Getting Prettier, Eslint and Vscode to work together

For quite a while I've tried getting Prettier, Eslint and Vscode to work together, but never found a solution that satisfied me. Now, as I'm working on a new React project in my day job, I finally found some time to make it work.

Wait what are Eslint and Prettier?

Eslint is a javascript linter that can help you find syntax or other errors. Eslint can be extended by plugging in pre-defined configs or completely configuring it yourself. Paired with the plugin for vscode, it can show you errors as you type.

Prettier is a code formatter for quite a few languages, including javascript. You can have code being automatically or optionally formatted with it.

Prerequisites

I assume you have basic knowledge about NPM and Vscode, as I won't cover it here. You need to have:

• Vscode installed
• NodeJS and NPM installed

Install Vscode plugins

First of all install the Vscode plugins ESLint and Prettier - Code formatter and make sure they're enabled.

Install dependencies

npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier

Setup the config files

Create an .eslintrc file in your project root.

In here we basically tell Eslint to:

• Extend from the recommended prettier config
• Register the Prettier plugin we installed
• Show Prettier errors as errors

{
  "extends": [
    "plugin:prettier/recommended"
  ],

  "plugins": ["prettier"],

  "rules": {
    "prettier/prettier": "error"
  }
}

Note: Your eslint config can include many more rules. I'm keeping it simple and easy to grasp.

Next create a .prettierrc file in your project root.

You can tweak these settings, or add new ones as you like:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

Enable formatOnSave in Vscode

Look for formatOnSave and check the checkbox, or add this line to settings.json:

"editor.formatOnSave": true,

Try it out

If you kept the .prettierrc file like above, Vscode should now:

• indent your code with 2 spaces
• use single quotes instead of double
• add semicolons add the end of each line

If you're having trouble try restarting Vscode.