John Stewart

Hi! I'm John. I'm a developer, coder, geek, tech head, maker of websites at MLB. JavaScript always. Creater of Pomy.io 🍅

ESLint + Prettier + VSCode

Suprisingly Confusing

As stated already I've spent many hours multiple times working on getting this setup of ESLint + Prettier + VSCode working. The best part is I'm not alone in this struggle. Wes Bos has made a video dedicated solely to this! Same is true for Elijah Manor from Manorisms! Those videos are super helpful and cover everything so if you prefer video content then go check those out. Otherwise I'm going to keep this short and sweet and get right into it.

Modules

Below is a list of modules that I installed:

  • babel-eslint
  • eslint
  • eslint-config-prettier
  • eslint-plugin-prettier
  • eslint-plugin-react
  • prettier

Pick your flavor of one liner below.

yarn

yarn add -D babel-eslint eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react prettier

npm

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

ESLint RC

Below is the configuration that I'm using for now. Feel free to take the following and customize to your needs.

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "babel-eslint",
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "printWidth": 120
      }
    ],
    "no-console": "off",
    "react/prop-types": "off"
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    }
  },
  "env": {
    "node": true,
    "es6": true,
    "jest": true,
    "browser": true
  }
}

VSCode

Last but not least is VSCode. Here are the settings used to tell VSCode how to use ESLint with Prettier.

ProTip: Do not use the Prettier Extension in VSCode

Create a .vscode folder and within that create a settings.json file. In that file include the following.

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true
}

That should do it!

If you liked this article and want to say hi, then you can find me on Twitter.