Using ESLint and Prettier with VScode in an Angular Project 🚀(outdated)
Tags: eslint, prettier, vscode, angular
Published: 2020-03-21 16:12:42

In this setup guide you will learn how to use [Prettier](https://prettier.io/) to take care of your code formatting and [ESLint](https://eslint.org/) to take care of your code style in an [Angular](https://angular.io/) application.

Create an angular application using the [angular-cli](https://cli.angular.io/):
```bash
ng new ng-pretty
cd ng-pretty
```

Install the required dependencies:
```bash
# Install ESLint
npm install --save-dev eslint

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

# 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://github.com/typescript-eslint/typescript-eslint): A plugin that contains a bunch of ESLint rules that are TypeScript specific
 - [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` containing:
```json
{
  "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
  "extends": [
    "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" // 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
  },
  "rules": {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
  }
}
```
 - You can add your specific linting rules in the `rules` property.


It's a good idea not to format the dependencies folder, since every time you add a new dependency npm usually does that, for this you should add an `.eslintignore` file containing:
```
package.json
package-lock.json
dist
```

Modify the `lint` script in your `package.json`:
```json
"scripts": {
  "lint": "tsc --noEmit && eslint . --ext js,ts,json --quiet --fix",
}
```
This will typecheck your app, and run the linter through all Javascript, JSON and Typescript files. Any ESLint errors that can be automatically fixed will be fixed with this command, but any other errors will be printed out in the command line.

At this point, ESLint will work correctly with TypeScript. You can lint your project’s JavaScript and TypeScript files by running `npm run lint`.

Add a configuration file for Prettier, named `.prettierrc.json` containing:
```json
{
  "singleQuote": true,
  "trailingComma": "none",
  "endOfLine": "auto"
}
```
 you can [configure](https://prettier.io/docs/en/configuration.html) prettier any way you like 😉

Install the following Visual Studio Code extensions:
```
dbaeumer.vscode-eslint
esbenp.prettier-vscode
```

Add the following to your `.vscode/settings.json` file:
```json
{
  "[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.

You can find the code for this tutorial here: [ng-pretty](https://github.com/dreiv/ng-pretty)