DEV Community

Chris
Chris

Posted on

Getting Prettier, Eslint and Vscode to work together

#vscode #eslint #prettier #javascript

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
 
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

Collapse
 
ssembara profile image
Sebastianus Sembara •

how to format and fix all files using one command?