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:
1npx install-peerdeps --dev eslint-config-eneax
Create a .eslintrc
file in the root of the project's directory and copy this:
1{2 "extends": ["eneax"]3}
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"4},
For instance, if all your code is in a src/
folder:
1"scripts": {2 "lint": "eslint src/",3 "lint:fix": "eslint src/ --fix"4},
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:
1{2 "extends": ["eneax"],3 "rules": {4 "no-console": 2,5 "prettier/prettier": [6 "error",7 {8 "trailingComma": "es5",9 "singleQuote": true10 }11 ]12 }13}
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
:
1// These are all my auto-save configs2"editor.formatOnSave": true,3// turn it off for JS and JSX, we will do this via eslint4"[javascript]": {5 "editor.formatOnSave": false6},7"[javascriptreact]": {8 "editor.formatOnSave": false9},10// tell the ESLint plugin to run on save11"editor.codeActionsOnSave": {12 "source.fixAll": true13},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 already15 "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!