前端prettier+eslint+stylelint+commitlint

项目规范如何生成

项目地址

虽然现在很多脚手架都能帮我们自动生成和配置好，但是我觉得还是有必要手动实现下

代码风格格式化配置（prettier）

1 yarn add --dev --exact prettier
2 新建文件 .prettierrc.js .prettierignore
3 在这两个文件中配置规则 和 需要忽略的文件
4 package.json中配置脚本 "prettier": "prettier --cache --write 'src/**/*.{ts,tsx,jsx,js}'"
5 上述脚本表示 格式src下面所有的ts/tsx/js/jsx文件 --cache表示只修复暂存区改动过的文件
6 地址 https://prettier.io/docs/en/integrating-with-linters.html

代码质量检测配置（eslint）

1 yarn add eslint --dev
2 yarn add eslint --dev (按需求选择)
3 yran add eslint-config-prettier --dev （解决eslint和prettier冲突）
4 修改.eslintrc.js文件 plugins: ['react', '@typescript-eslint', 'prettier'], extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
5 添加脚本 "lint": "eslint --cache --fix --ext .js,.jsx,.ts,.tsx src/** "

样式检查（stylelint）

1 yarn add stylelint stylelint-config-standard -D
2 在项目的根目录中创建一个配置文件，内容如下：.stylelintrc.js
3 stylelint 可能和 prettier冲突
4 下载 yarn add stylelint-config-prettier -D
5 module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  rules: {
    'selector-class-pattern': '.', // 正则 .表示任意
  },
}

只检测 git 暂存区的代码（lint-staged）

1 yarn add lint-staged -D
2 在package.json中 添加 "lint-staged"
"lint-staged": {
  "./**/*.{ts,tsx,jsx,js,html}": "yarn run lint & yarn run prettier",
  "./**/*.{css,scss,less}": "yarn run lint:style"
},
3 或者在根目录下新建.lintStagedrc文件
{
  "./**/*.{ts,tsx,jsx,js,html}": "yarn run lint & yarn run prettier",
  "./**/*.{css,scss,less}": "yarn run lint:style"
},和在package.json中是一样的

在 git commit 之前做这些工作（husky）

1 yarn add husky -D
2 npx husky install
3 添加一个脚本  "prepare": "husky install"
"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "prettier": "prettier --write 'src/**/*.{ts,tsx,jsx,js}'",
  "lint": "eslint --cache --fix 'src/**.{ts,tsx,jsx,js}'",
  "lint:style": "stylelint 'src/**/*.{css,less,sass}' --fix",
  "prepare": "husky install"
},
4 添加一个commit之前执行的勾子
npx husky add .husky/pre-commit "npx lint-staged"

对 git commit message 做出限制（@commitlint/cli）

1 yarn add @commitlint/cli -D
2 yarn add @commitlint/config-conventional -D 包含一些commit规则
3 添加一个勾子 yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'
4 根目录下新建文件 .commitlintrc.js
/**
 * 具体配置参考文档
 * https://commitlint.js.org/#/reference-rules
 */

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    // 指定commit-message的开头只能是这些 例如:  feature: xxx fixbug: xxx
    // 2表示报错， 1表示警告，0表示不限制
    'type-enum': [
      2,
      'always',
      [
        'feature',
        'update',
        'fixbug',
        'refactor',
        'optimize',
        'style',
        'docs',
        'chore',
      ],
    ],
    // 同理
    'type-case': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
}