使用husky在Git提交代码时进行代码检查

在前端项目中使用 Husky 可以帮助你在 Git 钩子（hooks）上运行脚本，从而在代码提交前执行一些检查或任务，例如代码格式化、代码质量检查等。以下是如何在项目中设置和使用 Husky 的步骤：

安装 Husky

首先，你需要在项目中安装 Husky。确保你已经初始化了一个 Node.js 项目（即项目中有 package.json 文件）。

npm

yarn

1npm install husky -D

初始化 Husky

安装 Husky 后，需要初始化它。这将创建一个 .husky 目录来存放 Git 钩子。

1npx husky install

在Git钩子中使用

使用pre-commit钩子检测代码格式

安装lint-staged、prettier、eslint

npm

yarn

1npm install -D  lint-staged eslint prettier

配置.eslintrc.js、.prettierrc.json,.stylelintrc.js

根据自己配置，添加对应的依赖和文件

1npm install -D @babel/core @babel/eslint-parser @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @typescript-eslint/parser eslint eslint-plugin-import eslint-plugin-prettier eslint-plugin-@typescript-eslint

1// .eslintrc.js
2module.exports = {
3	env: {
4	  browser: true, // 浏览器端
5	  commonjs: true, // 支持CJS
6	  es2021: true, // 支持ES2021及之前的所有语法
7	},
8	extends: [
9	  'eslint:recommended',
10	  'airbnb-base',
11	  'plugin:@typescript-eslint/recommended',
12	  'plugin:prettier/recommended', // 使用 Prettier 来自动格式化代码
13	  'prettier', // 使用 Prettier 来自动格式化代码
14	],
15	parser: '@babel/eslint-parser',
16	plugins: ['import', '@typescript-eslint', 'prettier'],
17	overrides: [
18	  {
19		files: ['*.ts', '*.tsx'],
20		parser: '@typescript-eslint/parser',
21	  },
22	],
23	parserOptions: {
24	  ecmaFeatures: {
25		experimentalObjectRestSpread: true,
26		jsx: true,
27	  },
28	  ecmaVersion: 'latest',
29	  sourceType: 'module',
30	},
31	settings: {
32	  'import/extensions': ['.js', '.jsx', '.tsx', '.ts'],
33	  'import/resolver': {
34		node: { extensions: ['.js', '.jsx', '.tsx', '.ts'] },
35		alias: {
36		  map: [['src', './src']],
37		  extensions: ['.js', '.jsx', '.tsx', '.ts'],
38		},
39	  },
40	},
41	rules: {
42	  // 添加你的规则
43	  'no-extra-semi': 'error', // 禁止多余的分号
44	  'comma-dangle': 'off', // 关闭逗号结尾规则
45	  'linebreak-style': 'off', // 关闭换行风格规则
46	  'object-curly-spacing': 'off', // 关闭对象大括号内的空格规则
47	  'no-shadow': 'off', // 关闭变量声明遮蔽检查
48	  'default-param-last': 'off', // 关闭默认参数在最后的规则
49	  'prettier/prettier': ['error'], // 启用 Prettier 规则
50	},
51  };

1// .prettierrc.js
2{
3	"arrowParens": "always",
4	"jsxBracketSameLine": false,
5	"printWidth": 120,
6	"semi": true,
7	"singleQuote": true,
8	"tabWidth": 4,
9	"trailingComma": "all",
10	"useTabs": true
11}

1// .stylelintrc.js
2module.exports = {
3  rules: {
4    "block-no-empty": true
5  }
6};

具体可参考官网配置，以上仅作示例

配置lint-staged

package.json 中添加不同文件在 git 提交执行的 lint 检测配置

1{
2  "scripts": {
3    "lint:lint-staged": "lint-staged"
4  }
5  "lint-staged": {
6    "*.{js,ts,vue}": [//文件类型根据自己项目需求配置
7      "eslint --fix",
8      "prettier --write",
9      "git add"
10    ],
11    "*.{cjs,json}": [
12      "prettier --write"
13    ],
14    "*.{vue,html}": [
15      "eslint --fix",
16      "prettier --write",
17      "stylelint --fix"
18    ],
19    "*.{scss,css}": [
20      "stylelint --fix",
21      "prettier --write"
22    ],
23    "*.md": [
24      "prettier --write"
25    ]
26  }
27}

根目录 .husky 目录下 pre-commit 文件中的 npm test 修改为

1npm run lint:lint-staged

每次运行 git commit 时，将会自动执行 lint-staged 中配置的命令，对代码进行格式化和检查。也可以 gid add . 之后 npm run lint:lint-staged 进行代码格式化和检查

ON THIS PAGE

#使用husky在Git提交代码时进行代码检查

#安装 Husky

#初始化 Husky

#在Git钩子中使用

#使用pre-commit钩子检测代码格式

#安装lint-staged、prettier、eslint

#配置.eslintrc.js、.prettierrc.json,.stylelintrc.js

#配置lint-staged