Linting your code with Prettier + ESLint for React Hooks with VSCode
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