一、stylelint

1. 相关安装包

// 快捷命令: npm i stylelint stylelint-config-standard stylelint-scss -D

"devDependencies": {
  ...
  "stylelint": "^15.2.0", // 主功能包
  "stylelint-config-standard": "^30.0.1", // 基础规则库
  "stylelint-scss": "^4.4.0" // scss检测插件
  ...
}

2. 增加自动修复命令

"scripts": {
    ...
    "stylelint": "stylelint "src/**/*.{css,scss,vue}"  --fix" // 文件类型根据实际情况配置,运行 npm run stylelint 会自动修复错误
    ...
}

3. 配置文件

项目根目录增加 .stylelintrc.js 文件

module.exports = {
  processors: [],
  plugins: [],
  extends: "stylelint-config-standard", // 这是官方推荐的方式
  rules: {
    // 这里自定义规则
    // 可参考官方：https://stylelint.docschina.org/user-guide/rules/
    "rule-empty-line-before":"never",
    indentation: [
      2,
      {
        // 指定缩进  warning 提醒
        severity: "warning",
      },
    ],
  },
};

其他的规则可以参考官方网站：stylelint.io/

二、eslint

1. 相关安装包

// 快捷命令: npm i eslint eslint-config-google eslint-plugin-react -D

"devDependencies": {
  ...
  "eslint": "^8.35.0",
  "eslint-config-google": "^0.14.0",
  "eslint-plugin-react": "^7.32.2",
  ...
}

2. 增加自动修复命令

"scripts": {
    ...
    "eslint": "eslint --fix --ext .js,.ts,.jsx,.tsx ./src", // 文件类型根据实际情况配置,运行 npm run eslint 会自动修复错误
    ...
}

3. 配置文件

项目根目录增加 .eslintrc.js 文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["plugin:react/recommended", "google"],
  overrides: [],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react"],
  rules: {
    "array-bracket-spacing": ["error", "always"],
    "object-curly-spacing": ["error", "always"],
    "no-unused-vars": "warn",
    "no-trailing-spaces": "warn",
    "no-unused-expressions": "warn",
    "react/prop-types": "warn",
    "valid-jsdoc": "off",
    "require-jsdoc": "off",
    "no-multiple-empty-lines": [1, { max: 1 }],
  },
};

其他的规则可以参考官方网站：eslint.io/ 更多规则可以参考：eslint.io/

三、husky 增加提交检测 v4+

1. 相关安装包

// 快捷命令: npm i husky lint-staged prettier @commitlint/cli @commitlint/config-conventional -D

"devDependencies": {
  ...
  "husky": "^8.0.0",
  "lint-staged": "^13.1.2",
  "prettier": "^2.8.4",
  "@commitlint/cli": "^17.4.4", // commitlint 校验工具
  "@commitlint/config-conventional": "^17.4.4",
  ...
}

2. 增加命令

"scripts": {
    ...
    "prepare": "husky install", // 自动安装 prepare
    "pre-commit": "lint-staged",
    "commit-msg": "commitlint --edit"
    ...
},
"lint-staged": {
    "*.{json,md}": [
      "prettier --write --ignore-unknown"
    ],
    "*.{js,jsx,ts,tsx}": [
      "eslint",
      "prettier --write --ignore-unknown"
    ],
    "*.{css,scss,less}": [
      "stylelint",
      "prettier --write --ignore-unknown"
    ]
  },
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  }

3. 添加 commit-msg 钩子

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
npx husky add .husky/commit-msg npm run commit-msg

4. 添加 pre-commit 钩子

npx husky add .husky/pre-commit npm run pre-commit

5. 效果预览

四、自动格式化

1. Vscode 中自动格式化（安装插件）

系统配置增加以下配置

{
  ...
  // 取消系统默认的检查
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  // 保存自动修复，与eslint通用
  // 也可通过"source.fixAll.stylelint": true单独配置
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }, 
  ...
}

2. Webstorm 中的自动格式化配置

1. 开启 stylelint

Webstorm 内置 stylelint，所以直接在配置中开启即可，注意勾选 Process JS files

2. 保存自动修复

创建一个文件监听器，webstorm 检查到文件保存时，执行修复命令

a) 全局安装 stylelint

npm install stylelint -g

b) 添加 File Watchers

c) 配置  File Watchers

$FileName$ --fix

$FileName$

$FileDir$

参考文献：[juejin.cn/post/715825…]

五、完整 package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^5.3.0",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.8.2",
    "react-router-dom": "^6.8.2",
    "react-scripts": "5.0.1",
    "tree": "^0.1.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint:js": "eslint --fix --ext .js,.ts,.jsx,.tsx ./src",
    "lint:css": "stylelint **/*.{css,scss,less} --fix",
    "prepare": "husky install",
    "pre-commit": "lint-staged",
    "commit-msg": "commitlint --edit"
  },
  "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": {
    "@commitlint/cli": "^17.4.4",
    "@commitlint/config-conventional": "^17.4.4",
    "eslint": "^8.35.0",
    "eslint-config-google": "^0.14.0",
    "eslint-plugin-react": "^7.32.2",
    "husky": "^8.0.0",
    "lint-staged": "^13.1.2",
    "prettier": "^2.8.4",
    "sass": "^1.58.3",
    "sass-loader": "^13.2.0",
    "stylelint": "^15.2.0",
    "stylelint-config-standard": "^30.0.1",
    "stylelint-scss": "^4.4.0"
  },
  "lint-staged": {
    "*.{json,md}": [
      "prettier --write --ignore-unknown"
    ],
    "*.{js,jsx,ts,tsx}": [
      "eslint",
      "prettier --write --ignore-unknown"
    ],
    "*.{css,scss,less}": [
      "stylelint",
      "prettier --write --ignore-unknown"
    ]
  },
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  }
}