Add ESLint and Prettier to Format on Save

[macromania]

TS Config Updates

• Update TSConfig

{
    "compilerOptions": {
        "target": "ES2018",
        "module": "commonjs",
        "lib": [
            "es2018"
        ],
        "declaration": true,
        "resolveJsonModule": true,
        "strict": true,
        "noImplicitAny": false,
        "strictNullChecks": true,
        "noImplicitThis": true,
        "alwaysStrict": true,
        "noUnusedLocals": false,
        "noUnusedParameters": false,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": false,
        "inlineSourceMap": false,
        "inlineSources": false,
        "experimentalDecorators": true,
        "strictPropertyInitialization": false,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "outDir": "build",
        "typeRoots": [
            "./node_modules/@types"
        ],
        "types": [
            "node",
            "jasmine",
            "mocha",
            "jest"
        ]
    },
    "include": [
        "**/*"
    ],
    "exclude": [
        "**/*.spec.ts",
        "./build/**/*",
        "docs"
    ]
}

ESLint

• Setup ESLint

ESLint](https://eslint.org/) statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline. Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won't experience errors introduced by traditional find-and-replace algorithms. ESLint has been critical in helping developers write high-quality Javascript and it catches common issues early and often. It enforces code quality, consistent code formatting rules and makes it easy to onboard new developers to the project.

Prettier is an opinionated code formatter. Most text editors and IDEs support it so when you save the file, code is formatted automatically. This saves so much time discussing style in code reviews. It removes all original styling* and ensures that all outputted code conforms to a consistent style.

To install ESLint and Prettier, add following devDependencies to package.json:

        "@typescript-eslint/eslint-plugin": "^5.44.0",
        "@typescript-eslint/parser": "^5.44.0",
        "eslint": "^8.28.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-config-standard-with-typescript": "^23.0.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-n": "^15.5.1",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-promise": "^6.1.1",
        "eslint-plugin-unused-imports": "^2.0.0",
        "prettier": "^2.8.0"

Create .eslintrc.json file with following content:

{
    "root": true,
    "env": {
        "commonjs": true,
        "node": true,
        "jest": true
    },
    "parser": "@typescript-eslint/parser",
    "extends": [
        "plugin:@typescript-eslint/recommended",
        "prettier",
        "plugin:prettier/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "ignorePatterns": [
        "**/build",
        "**/node_modules"
    ],
    "plugins": ["unused-imports"],
    "rules": {
        "@typescript-eslint/array-type": [
            "error",
            {
                "default": "generic"
            }
        ],
        "@typescript-eslint/no-empty-interface": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/no-explicit-any": "error",
        "@typescript-eslint/no-inferrable-types": "error",
        "@typescript-eslint/no-var-requires": "off",
        "@typescript-eslint/no-non-null-assertion": "off",
        "@typescript-eslint/ban-ts-comment": "off",
        "curly": [
            "error",
            "multi-line"
        ],
        "indent": "off",
        "no-console": "off",
        "prefer-destructuring": "off",
        "max-len": "off",
        "object-curly-newline": "off",
        "implicit-arrow-linebreak": "off",
        "prefer-const": "error",
        "prettier/prettier": [
            "error",
            {
                "endOfLine": "auto"
            }
        ],
        "unused-imports/no-unused-imports": "error"
    }
}

Prettier

• Prettier Setup

Create .prettierrc file with following content:

{
    "arrowParens": "always",
    "bracketSpacing": true,
    "endOfLine": "lf",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxSingleQuote": false,
    "printWidth": 240,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "es5",
    "useTabs": false,
    "vueIndentScriptAndStyle": false,
    "overrides": [
        {
          "files": ["*.mts", "*.cts", "*.ts"],
          "options": {
            "parser": "typescript"
          }
        }
      ]
}

VSCode

• Editor Setup

Create .vscode folder and add following files:

extensions.json to install recommended extensions. Please also make sure these extensions are installed in your VSCode for the best experience.

{
    "recommendations": [
        "dbaeumer.vscode-eslint",
        "chris-noring.node-snippets",
        "christian-kohler.npm-intellisense",
        "esbenp.prettier-vscode"
    ]
}

settings.json to run actions on VSCode:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "files.exclude": {
    "app/**/*.js": true,
    "app/**/*.js.map": true,
    "app/**/*.d.ts": true,
    "build": true,
  },
}

[ross-p-smith]

The vscode ones should be in .devcontainer.json and not the .vscode file. Recommendations won't actually install them for the user