Eslint自动格式化

一个好的项目必定有个好的代码编写规范。我们日常的项目无论大小也应规范好自己的代码。

这里以Create React App生成的React项目名为例，配置代码编写规范。这里的配置不在编写时检查代码规范，也不在保存时自动格式化代码，而是在git commit时自动格式化代码，并且在检查到代码编写不规范时不允许提交。

这里使用 **husky + lint-staged + Eslint + prettier**配置

配置步骤如下

1. 首先安装必要的包

npm i eslint prettier husky lint-staged -D

2. 在安装对应的包

npm i @babel/core @babel/eslint-parser -D

eslint配置里的parser需要

npm i eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks -D

prettier和react react-hooke需要。eslint-plugin-prettier按自己需要安装。

npm i @typescript-eslint/parser @typescript-eslint/eslint-pluginer -D

支持typescript需要

具体配置可看相应包的使用方法。

• husky
• lint-staged
• eslint
• prettier
• eslint-config-prettier
• eslint-plugin-prettier
• eslint-plugin-react
• eslint-plugin-react-hooks
• @typescript-eslint

3. 新建.eslintrc.js文件，配置如下

module.exports = {
  root: true,
  extends: ["eslint:recommended", "plugin:react/recommended", "prettier"],
  parser: "@babel/eslint-parser",
  plugins: ["react", "react-hooks"],
  env: {
    browser: true,
    es6: true,
    node: true
  },
  rules: {
    // indent: ["error", 2]
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    requireConfigFile: false,
    project: "./tsconfig.json"
  },
  overrides: [
    {
      files: ["**/*.{ts,tsx}"],
      parser: "@typescript-eslint/parser",
      extends: ["prettier", "plugin:@typescript-eslint/recommended"],
      rules: {
        "@typescript-eslint/no-explicit-any": 0
      }
    }
  ]
};

4. 新建.prettierignore、.prettierrc.js文件，配置如下

.prettierignore

**/*.svg
**/*.less
**/*.json
**/*.conf
**/*.pdf
**/*.lock
**/*.log
**/*.png
**/*.toml
.dockerignore
.DS_Store
.eslintignore
.dockerfile
.editorconfig
.gitignore
.prettierignore
.eslintcache
.history
/dist
/build
docker
Dockerfile*
LICENSE
CNAME
README.md

.prettierrc.js

module.exports = {
  tabWidth: 2,
  useTabs: false,
  singleQuote: false,
  bracketSpacing: true,
  trailingComma: "none",
  printWidth: 100,
  arrowParens: "avoid",
  endOfLine: "lf",
  overrides: [
    {
      files: ".prettierrc",
      options: { parser: "json" }
    }
  ]
};

以上基本都是prettier的默认配置，写出来只是为了以后方便修改。

5. husky和lint-staged配置

lint-staged配置：package.json文件夹添加

• 添加script命令："lint-staged": "lint-staged"，如果不添加，husky调用时则使用npx lint-staged。
• 添加script命令："lint-staged:js": "eslint ./src --ext .js,.jsx,.ts,.tsx ",
• 添加lint-staged：

"lint-staged": {
  "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
  "**/*.{js,jsx,tsx,ts,md,json,css}": [
    "prettier --write"
  ]
},

Tip: 要注意husky(v4)和husky(v7)配置方式是不一样的

husky(v4)配置：package.json文件夹添加

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

husky(v7)配置：v7是配置shell的形式执行

• 首先添加script命令： "prepare": "husky install"。如果这个命令没有自动执行，则手动执行npx husky install 或 npm run prepare。会在根目录生成一个.husky文件
• 执行命令npx husky add .husky/pre-commit "npm run lint-staged" ，会自动添加pre-commit，内容如下：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint-staged

还有个commit-msg文件，颗根据需求添加。添加commitlint：npm install -g @commitlint/cli @commitlint/config-conventional

stylelint可以根据个人需要配置

完整package.json

{
  "name": "cra-ts-antd",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "antd": "^4.18.9",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-config": "^5.1.1",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.5.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "husky install",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint ./src --ext .js,.jsx,.ts,.tsx ",
    "prettier": "prettier -c --write \"**/*\""
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,md,json,css}": [
      "prettier --write"
    ]
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/eslint-parser": "^7.17.0",
    "@typescript-eslint/eslint-plugin": "^5.14.0",
    "@typescript-eslint/parser": "^5.14.0",
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-react": "^7.29.3",
    "eslint-plugin-react-hooks": "^4.3.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.3.4",
    "prettier": "^2.5.1"
  }
}

配置好后就可以commit测试一下啦~

更多参考：umijs/fabric