Getting Prettier, Eslint and Vscode to work together

chgldev profile image Chris ・2 min read

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.


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": [

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

Posted on by:


markdown guide

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"


Grat addition, thank you!


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?


Disable Prettier Plugin in VS Code when you setup Prettier in project.
So when formatOnSave will work as what you setup in .prettierrc


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