Enea Xharja Logo

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.


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:

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

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

2 "extends": ["eneax"]

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

1"scripts": {
2 "lint": "eslint <relative_path>",
3 "lint:fix": "eslint <relative_path> --fix"

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

1"scripts": {
2 "lint": "eslint src/",
3 "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.


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:

2 "extends": ["eneax"],
3 "rules": {
4 "no-console": 2,
5 "prettier/prettier": [
6 "error",
7 {
8 "trailingComma": "es5",
9 "singleQuote": true
10 }
11 ]
12 }

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 CodePreferencesSettings:
1// These are all my auto-save configs
2"editor.formatOnSave": true,
3// turn it off for JS and JSX, we will do this via eslint
4"[javascript]": {
5 "editor.formatOnSave": false
7"[javascriptreact]": {
8 "editor.formatOnSave": false
10// tell the ESLint plugin to run on save
11"editor.codeActionsOnSave": {
12 "source.fixAll": true
14// 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
15 "prettier.disableLanguages": ["javascript", "javascriptreact"],

Not working?

Remove all eslint modules that we installed previously:

1npm 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!

© 2021 Enea Xharja