ESLint and Prettier setup for VSCode

This a style/linting setup for writing JavaScript in VSCode. This is done to have a coherent development experience when multiple developers are working on the same project.

We'll be leveraging the style guide that Airbnb uses. There are a few style guides out there, but we settled on Airbnb's.

Step 0:

An npm init -y inside a folder would give us an empty node project. i.e.. there'll be just a package.json file in it. Make a file called
.gitignore, so that we don't push the node_modules folder to git.

$ cat .gitignore

Step 1:

In your project, have these in the package.json file.

"devDependencies": {
  "eslint": "^5.3.0",
  "eslint-config-airbnb": "^17.1.0",
  "eslint-config-prettier": "^4.0.0",
  "eslint-plugin-import": "^2.16.0",
  "eslint-plugin-jsx-a11y": "^6.2.1",
  "eslint-plugin-prettier": "^3.0.1",
  "eslint-plugin-react": "^7.12.4",
  "prettier": "^1.16.4"

Then run npm install to have these in your project.

Step 2:

Create a file called .eslintrc.json file in the project root
folder. Have these lines in it.

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

Step 3:

Create a file called .prettierrc file, also in the
project's root folder. Have these lines in it.

    "printWidth": 100,
    "singleQuote": true

Step 4:

Install the VSCode extensions of Prettier and ESLint.

$ code --install-extension dbaeumer.vscode-eslint
$ code --install-extension esbenp.prettier-vscode


Do not install eslint or prettier globally with npm. They will conflict with the local project's configs.

Step 5:

Ctrl+Shift+P (or) Cmd+Shift+P in your VSCode and type in
User Settings, a JSON file should come up.

Append these few lines, if not present

"[javascript]": { "editor.formatOnSave": true },
"files.exclude": {
  "**/.git": true,
  "**/.DS_Store": true,
  "**/node_modules": true,
  "node_modules": true
"editor.tabSize": 2,
"telemetry.enableTelemetry": false, // no to micro$oft spying.


Do not add this to an exisiting project right away. It'll screw up the formatting and git will yell at you!.


Subscribe to newsletter
Need more tech news? Tune in to our weekly newsletter to get the latest updates