Linting your code with Prettier + ESLint for React Hooks with VSCode

Leandro A. Siqueira
3 min readFeb 19, 2019

I tried thousands of configurations to get a good Linting with CRA (Create-React-App) environment, here’s my steps to archive this goal:

Installation

First you need to create a new project with CRA and Yarn, if you have Yarn installed, just simple use the command:

yarn create react-app hello-world

Dependencies

Then add the dependencies using npm or yarn.

npm install eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react prettier eslint-config-prettier eslint-plugin-prettier husky lint-staged eslint-plugin-compat --save-devyarn add eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react prettier eslint-config-prettier eslint-plugin-prettier husky lint-staged eslint-plugin-compat --dev

Edit you package.json

Add the following lines to your scripts:

"scripts": {
"lint": "eslint \"src/**/*.{js,jsx,json}\"",
"lint:fix": "eslint . --fix"
},

At the end of you package.json, added both of the following groups (use 4 spaces to indent the code :D) :

Adding Husky 🐶

Husky can prevent bad git commit, git push and more 🐶 woof!

"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},

Lint-Staged

Run linters against staged git files and don’t let 💩 slip into your code base!

"lint-staged": {
"src/**/*.{js,jsx,json}": [
"npm run format",
"npm run lint:fix"
]
}
},

.eslintrc

Create a .eslintrc file, you can use:

touch .eslintrc

Add the source to this file:

{
"env": {
"browser": true,
"es6": true,
"jest": true,
"node": true
},
"extends": [
"airbnb",
"plugin:jsx-a11y/strict",
"plugin:react/recommended",
"plugin:prettier/recommended",
"prettier/react",
"plugin:compat/recommended",
"plugin:cypress/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true,
"experimentalObjectRestSpread": true
}
},
"plugins": ["react", "react-hooks", "jsx-a11y", "prettier", "compat"],
"rules": {
"react/jsx-filename-extension": [
1,
{
"extensions": [".js", ".jsx"]
}
],
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"no-console": "off",
"react/prop-types": 0,
"prettier/prettier": ["error"],
"compat/compat": "off"
}
}

If you are using Jest, add new line to the env section: “jest”: true.

Create a .prettierrc, you can use:

touch .prettierrc

Add the code below to the .prettierrc file:

{
"arrowParens": "always",
"bracketSpacing": true,
"printWidth": 80,
"proseWrap": "always",
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false
}

.eslintignore

Create a .eslintignore file, you can use:

touch .eslintignore

And add the following:

build/
node_modules/
src/serviceWorker.js

Babel

Adding babel it's also simple, run the installation package and create a new .babelrc file:

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-devyarn add @babel/core babel-loader @babel/preset-env @babel/preset-react -D

.babelrc

touch .babelrc

Add the following content to the .babelrc

{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

VSCode Integration

Add the Prettier and ESLint extension to you Code:

Editor

Add a Editor configuration to you project:

touch .editorconfig

And add the following:

# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false

And setup some useful settings for the editor:

{
"files.autoSave": "onFocusChange",
"editor.formatOnSave": true,
"editor.formatOnType": true,
"eslint.autoFixOnSave": true,
"eslint.enable": true,
"prettier.singleQuote": true,
}

You can find those options on the menu: File > Preferences > Settings.

Run yarn to install and validate all the dependencies and let’s code.

Plus

Here some useful extensions for Code, add by the Ctrl + Shift + P to search for the extensions:

angryobject.react-pure-to-class-vscode
christian-kohler.path-intellisense
coenraads.bracket-pair-colorizer
dbaeumer.vscode-eslint
donjayamanne.githistory
dsznajder.es7-react-js-snippets
eamodio.gitlens
editorconfig.editorconfig
esbenp.prettier-vscode
formulahendry.auto-rename-tag
hookyqr.beautify
mikestead.dotenv
msjsdiag.debugger-for-chrome
pflannery.vscode-versionlens
robertohuertasm.vscode-icons
robinbentley.sass-indented
wix.vscode-import-cost

Here is a project reference:
https://github.com/leandroaps/react-hooks-eslint

Thanks,
Siqueira.

:D

Photo by Negative Space

--

--