My Eslint and Prettier Config

I finally took some time to setup Eslint and Prettier with VS Code and made the eslint-config-eneax package.

If you want to know what Eslint rules I use, check them out here. If you want to install and configure the package on your projects, follow the instructions below.

Install

You can use eslint globally and/or locally per project. I prefer to install it locally per single project, so I can have project specific settings:

Create a package.json file with npm init and install everything needed by the config:

npx install-peerdeps --dev eslint-config-eneax

Create a .eslintrc file in the root of the project’s directory and copy this:

{
  "extends": ["eneax"]
}

You can add two scripts to your package.json to lint and/or fix your code:

"scripts": {
  "lint": "eslint <relative_path>",
  "lint:fix": "eslint <relative_path> --fix"
},

For instance, if all your code is in a src/ folder:

"scripts": {
  "lint": "eslint src/",
  "lint:fix": "eslint src/ --fix"
},

Now you can manually lint your code by running npm run lint and fix all fixable issues with npm run lint:fix.

Settings

If you want to overwrite eslint or prettier settings, go to your .eslintrc file and you can add rules. ESLint rules go directly under rules while prettier options go under "prettier/prettier".

For instance:

{
  "extends": ["eneax"],
  "rules": {
    "no-console": 2,
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true
      }
    ]
  }
}

VS Code

If you use VS Code and want it to lint all the errors for you, here are the instructions:

• Install the ESLint package
• Setup VS Code settings via Code → Preferences → Settings:

// These are all my auto-save configs
"editor.formatOnSave": true,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
  "editor.formatOnSave": false
},
"[javascriptreact]": {
  "editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
  "source.fixAll": true
},
// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
  "prettier.disableLanguages": ["javascript", "javascriptreact"],

Not working?

Remove all eslint modules that we installed previously:

npm remove eslint-config-eneax babel-eslint eslint eslint-config-prettier eslint-config-airbnb eslint-plugin-html eslint-plugin-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react prettier eslint-plugin-react-hooks

Remove package-lock.json file and delete the node_modules/ directory and repeat above instructions again!