项目代码规范工具链配置

eslint

yarn add eslint eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

新建 .eslintrc.cjs:

module.exports = {
  extends:[
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    // prettier的eslint插件
    'prettier',
    'plugin:prettier/recommended'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures:{
      jsx: true
    },
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    quotes: ['error', 'single'], // 单引号
    semi: ['error', 'never'], // 结尾不追加分号
    '@typescript-eslint/no-non-null-assertion': 'off',
   'react/react-in-jsx-scope': 'off', // 解决 jsx文件内 不引入 React from ‘react’ 的报错
   '@typescript-eslint/no-var-requires': 0 // 解决require部分没有通过import引入
  },
  settings: {
    react: {
      version: 'detect'
    }
  }
}

排除不进行校验的文件.eslintignore:

.eslintrc.cjs
node_modules
package.json
pnpm-lock.yaml
dist
bin
esm-cjs
docs

package.json 新增

"scripts": {
  "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ./",
},

• --fix 开启自动修复

prettier配置

yarn add prettier eslint-plugin-prettier eslint-config-prettier -D

.prettierrc.js:

module.exports = {
  semi: false,
  singleQuote: true,
  eslintIntegration: true,
  trailingComma: "none", // 函数后面不加逗号
  bracketSpacing: true
}

• .prettierignore文件配置同上selint的配置！

设置自动保存

设置icon-设置-input键入 formatter

设置为默认格式化工具 然后搜索 format on save 勾选此

这样就完成了基本的配置

代码提交阶段--husky

以下插件仅在当前为.git根目录时有效，否则会报错，根据需求进行配置！

yarn add husky -D

npx husky install

完成之后执行

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

来注册 Husky 的 pre-commit 钩子。执行完后你可以在项目的 .husky 目录下看到详细的脚本内容。

在package.json注册prepare命令

"prepare": "husky install"

随后进行commit的格式检查 安装：

yarn add commitlint @commitlint/cli @commitlint/config-conventional -D

根目录新建 .commitlintrc.js

module.exports = {
  extends: ['@commitlint/config-conventional']
}

然后命令行执行新建命令

npx husky add .husky/commit-msg "npx --no-install commitlint --edit \"$1\""

• commit提交格式 git commit -m '[type]: [desc]'

其中type可接受类型有：[build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test]
冒号后有空格，这个是必须的，否则会报错！
desc为描述

• 但现在进行的是全量检查，需要安装lint-staged进行处理

yarn add lint-staged -D

package.json中新增：

"lint-staged":{
  "**/*.{js,jsx,ts,tsx}":[
    "eslint --fix"
  ]
}

然后需要在 .husky/pre-commit 中进行修改

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

npx --no -- lint-staged

即可

• 至此，完成了eslint prettier husky commitlint的完成工具链配置

这篇好文章是转载于：学新通技术网