How to add lintstaged to your react project

The folling configurations have been implemented

1、install  eslint and prettier first

yarn add eslint prettier -D

2、install lint-staged

npx mrm@2 lint-staged

3、config in package.json  add precommit into scripts

"precommit": "lint-staged"

4、add lint-staged config

"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx}": [
    "eslint --ignore-path .eslintignore --fix",
    "prettier --write"
  ]
}

5、staged some changed files under src/folder

git add ./src

6、commit the staged files

git commit -m 'feature: lint-staged test'

It will exec precommit before commit.

At this step, you may face below error.

hint ESLint couldn't find the config "react-app" to extend from. Please check that the name of the config is correct.

you can add eslint-config-react-app -D

yarn add eslint-config-react-app -D

7、run eslint test

eslint ./src

if the folling warning appears

Warning: React version not specified in eslint-plugin-react settings.

accroding eslint-plug-react config doc ,add below to .eslintrc

settings: {
  react: {
    version: 'detect'
  }
}

if there some jest files in your src dir, you should add eslint-plugin-jest to less lint error.

yarn add eslint-plugin-jest -D

and then follow the office doc  to modify the .eslintrc.js

the content of .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'jest'],
  rules: {
    'jest/no-disabled-tests': 'warn',
    'jest/no-focused-tests': 'error',
    'jest/no-identical-title': 'error',
    'jest/prefer-to-have-length': 'warn',
    'jest/valid-expect': 'error',
    '@typescript-eslint/no-explicit-any': 'off',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

 There maybe some other error appers too. Reslove it and go on.

8、when you run   run npm build , the eslint will also work, it will lint before build, if you wanto disable eslint on build. you can change the build script

from

"build": "react-app-rewired build",

to

"build": "cross-env DISABLE_ESLINT_PLUGIN=true react-app-rewired build",
# you should install cross-env first by 'yarn add cross-env -D' or 'npm install cross-env --save-dev'

9、We use prettier to formate the code.

please configure the .prettierrc.json file under the project root folder.

{
    "singleQuote": true,
    "semi": true,
    "trailingComma": "none",
    "arrowParens": "always",
    "tabWidth": 2,
    "printWidth": 150,
    "endOfLine": "lf"
}

10、vscode project setting

.vscode/setting.json

{
    "editor.tabSize": 4,
    "editor.wordWrap": "on",
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "search.exclude": {
        "dist": true
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
}