DEV Community

BhargavMantha
BhargavMantha

Posted on

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

#angular #typescript #javascript

Alt Text

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
Enter fullscreen mode Exit fullscreen mode
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": ["/*.*"] }
Enter fullscreen mode Exit fullscreen mode

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", }
Enter fullscreen mode Exit fullscreen mode

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

{ "semi": true, "trailingComma": "none", "singleQuote": true, "printWidth": 90, "tabWidth": 4 }
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode
Install the following Visual Studio Code extensions: 
dbaeumer.vscode-eslint esbenp.prettier-vscode
Enter fullscreen mode Exit fullscreen mode

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 } }
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (3)

Collapse
 
dbrils profile image
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.

Collapse
 
codefinity profile image
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.

Collapse
 
dbrils profile image
dbrils •

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