Skip to main content

Configuring Prettier with ESLint

· One min read
Kumar Nitesh

If you have not added Prettier and ESlint into your project you are missing a lot of out of box configuration and code formatting.It's simple to add them and follow industry based best practice and adding them will not even take 2 minutes.

So here are the steps to add them into your project.

  • Add Prettier as an extension to your VSCode, or if you not using VSCode install it globally using npm i -g prettier

  • Add ".prettierrc" file to your project root directory

  • Add following code into ".prettierrc"

{ "semi": false, "trailingComma": "all", "singleQuote": true, "printWidth": 70 }

Add followig two packages to your project

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Add .eslintrc.json

Add following code to ".eslintrc.json"

{  "extends": ["prettier"],  "plugins": ["prettier"],  "rules": { "prettier/prettier": ["error"] }}

Thats it, your project to s configured to use best practices based on Prettier and ESLint.

Read about Prettier here

Read about ESlint here

Here is AirBnb eslint config: https://www.npmjs.com/package/eslint-config-airbnb

Happy Coding... Kumar