The secret to configuring eslint, prettier, prettier-eslint plugin in VsCode for Angular, Ts, and Js Project

There have been n-number of articles before explaining the configuration of the same but it does not get simpler than this.😃

This article assumes that you have basic knowledge of npm/Node
My current system configuration-

1. Node js - v12.8
2. Npm - v6.14.10
3. NVM - v0.37.2

The steps are the same for both an existing / a new Project

# Install ESLint
npm install --save-dev eslint

# Install additional plugins
npm install --save-dev @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-plugin-angular

# Install Prettier and Prettier-ESLint dependencies
npm install --save-dev prettier prettier-eslint eslint-config-prettier

• eslint: The core ESLint linting library
• @typescript-eslint/eslint-plugin : A plugin that contains a bunch of ESLint rules that are TypeScript specific. Basically a Monorepo for all the tooling which enables ESLint to support TypeScript
• eslint-plugin-angular: ESLint rules for your angular project with checks for best-practices, conventions, or potential errors.
• prettier: The core prettier library
• eslint-config-prettier: Disables ESLint rules that might conflict with prettier
• eslint-plugin-prettier: Runs prettier as an ESLint rule

Add a configuration file for ESLint, named .eslintrc.json or .eslintrc . I use the latter. My file is as follows:

{
    "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
    "extends": [
        "plugin:angular/johnpapa", //ESLint rules for your angular project with checks for best-practices, conventions or potential errors.
        "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
        "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
        "plugin:prettier/recommended",
        "prettier/@typescript-eslint" /*Enables eslint-plugin-prettier and eslint-config-prettier.
                                        This will display prettier errors as ESLint errors.
                                         Make sure this is always the last configuration in the extends array.*/
    ],
    "parserOptions": {
        "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features
        "sourceType": "module" // Allows for the use of imports
    },
    "settings": {
        "angular": {
            "version": "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
        }
    },
    "root": true,
    "env": {
        "node": true,
        "jest": true
    },
    "rules": {
        "@typescript-eslint/interface-name-prefix": "off",
        "@typescript-eslint/explicit-function-return-type": "off",
        "@typescript-eslint/no-explicit-any": "off"
    },
    "ignorePatterns": ["/*.*"]
}

Add the following .eslintignore file:
dist

The reason being we do not want to format these folders since they are generated by angular it-self

Modify the script in your package.json:

"scripts": {
  "lint": "tsc --noEmit && eslint . --ext js,ts,json --quiet --fix",
}

Add a configuration file for Prettier, named .prettierrc containing:

{
    "semi": true,
    "trailingComma": "none",
    "singleQuote": true,
    "printWidth": 90,
    "tabWidth": 4
}

you can configure Prettier any way you like 😇😁😏.please refer to [prettier]

(https://prettier.io/) for details, the meaning of the above options
and add the following to .prettierrcignore

package.json
package-lock.json
dist

Install the following Visual Studio Code extensions:

dbaeumer.vscode-eslint
esbenp.prettier-vscode

Add the following to your .vscode/settings.json file:

{
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
  "[json]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  }
}

And that’s it! You should now have complete Visual Studio Code integration. When you violate a linting rule, you’ll be visually alerted, and when you save a file, ESLint will attempt to fix any issues using Prettier. This should work for both JavaScript and TypeScript.

Comments

[dbrils]

What is the prettier-eslint package used for? I see you added it to the dev dependencies, but I don't see it being used anywhere.

[Manav Misra]

I didn't read the post, but guessing that it's needed to play nicely with "eslint", so the stylistic rules don't fight.
Add it to your ES Lint config, after extends. [Here's] where I use it on one of my starter template repos.

[dbrils]

Judging from the descriptions on npm/github we only need the eslint-config-prettier plugin for that.