Using ESLint and Prettier with VScode in an Angular Project 🚀(outdated)

Andrei Voicu — Sat, 21 Mar 2020 16:12:42 +0000

In this setup guide you will learn how to use Prettier to take care of your code formatting and ESLint to take care of your code style in an Angular application.

Create an angular application using the angular-cli:

ng new ng-pretty
cd ng-pretty

Install the required dependencies:

# 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: The core ESLint linting library
@typescript-eslint/eslint-plugin: A plugin that contains a bunch of ESLint rules that are TypeScript specific
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 containing:

{
  "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:

"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:

{
  "singleQuote": true,
  "trailingComma": "none",
  "endOfLine": "auto"
}

you can configure 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:

{
  "[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

Forem: Andrei Voicu

Using ESLint and Prettier with VScode in an Angular Project 🚀(outdated)