React+Eslint+Prettier+git hook -> make your life easier

[amandakelake]

eslint

▶ npm install --save-dev eslint eslint-loader babel-loader babel-eslint eslint-plugin-react

• eslint is the core JavaScript linter.
• eslint-loader tells webpack that you want to use eslint in our build
• babel-loader transpiles our code with webpack
• babel-eslint provides linting for valid ES6 code
• eslint-plugin-react extends ESLint rules to cover React

▶ touch .eslintrc

add the following rules in your .eslintrcfile, or you can make your own rules

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "plugins": [
    "react"
  ],
  "extends": ["plugin:prettier/recommended", "plugin:react/recommended", "eslint:recommended"],
  "rules": {
    "quotes": [1, "double", "avoid-escape"],
    "react/prop-types": 0,
    "no-console": 0,
    "no-unused-vars": 1,
    "no-func-assign": 2,
    "no-const-assign": 2,
    "no-var": 2,
    "react/react-in-jsx-scope": 0
  }
}

prettier

▶ npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

• prettier — the core prettier library. Duh.
• eslint-plugin-prettier — this plugin allows you to format code using Prettier when you run --fix
• eslint-config-prettier — This library solves the conflicts between eslint and prettier. It turns off conflicting rules. ESLint’s rules, not Prettier’s. Obviously.

vscode settings

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "files.associations": {
    "*.js": "javascriptreact"
  }
}

after the above setting, you vscode should be able to lint and fix your code automatically

git hook

▶ npm install --save-dev pretty-quick husky lint-staged

Add the following code into package.json file, it’ll fix the error automatically

"husky": {
	"hooks": {
	  "pre-commit": "pretty-quick --staged"
	}
},

now try a commit, what a beautiful result

references

Add ESLint & Prettier to VS Code for a Create React App - YouTube
Linting React Using ESLint with Create React App ← Alligator.io
React Code Style with ESLint + Babel + Webpack - RWieruch
ESLint + Prettier For a Consistent React Codebase – GO-JEK Product + Tech