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

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.

Photo by Negative Space