The secret to configuring eslint, prettier, prettier-eslint plugin in VsCode for Angular, Ts, and Js Project
Tags: angular, typescript, javascript
Published: 2021-01-22 04:07:41

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kz20y4aubodxx7tzjowv.png)
#### 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
```javascript
# 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]
(https://eslint.org/): The core ESLint linting library
* [@typescript-eslint/eslint-plugin]
(https://www.npmjs.com/package/@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]
(https://www.npmjs.com/package/eslint-plugin-angular): ESLint rules for your angular project with checks for best-practices, conventions, or potential errors.
* [prettier]
(https://prettier.io/): The core prettier library
* [eslint-config-prettier]
(https://github.com/prettier/eslint-config-prettier): Disables ESLint rules that might conflict with prettier
* [eslint-plugin-prettier]
(https://github.com/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:

```javascript
{
    "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`:
```javascript
"scripts": {
  "lint": "tsc --noEmit && eslint . --ext js,ts,json --quiet --fix",
}
```
Add a configuration file for Prettier, named `.prettierrc` containing:
```javascript
{
    "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:
```javascript
dbaeumer.vscode-eslint
esbenp.prettier-vscode
```
Add the following to your `.vscode/settings.json` file:
```javascript
{
  "[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.