DEV Community

Chris
Chris

Posted on

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

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

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
}

Enter fullscreen mode Exit fullscreen mode

Enable formatOnSave in Vscode

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

"editor.formatOnSave": true,
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (6)

Collapse
 
edo_begagic profile image
Edo Begagic

thank you very much for the instructions. they have been very helpful, although when i was setting up eslint and prettier in vscode for react native, i received following Parsing error: "The keyword 'import' is reserved eslint". For others who may experience the same issue, I fixed it by adding additional code to the .eslintrc file and it worked for me:

{
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"extends": ["plugin:prettier/recommended"],

"plugins": ["prettier"],

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

Collapse
 
chgldev profile image
Chris

Grat addition, thank you!

Collapse
 
adjiganoff profile image
Roman Vasyliev

Thanks for the tutorial!

By the way, isn't it sufficient just to add this single string?

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

Because it essentially does this, doesn't it?

Collapse
 
zcmgyu profile image
Long Nguyen

Disable Prettier Plugin in VS Code when you setup Prettier in project.
So when formatOnSave will work as what you setup in .prettierrc
youtube.com/watch?v=YIvjKId9m2c

Collapse
 
ssembara profile image
Sebastianus Sembara

how to format and fix all files using one command?

Collapse
 
sgtmurv profile image
Matthew Honour

I spent most of yesterday pulling my hair out trying to get this to work in vscode! XD Thank you for sharing how to do this it was very helpful ! :D