#代码提交自动校验

#需求场景

  为了便于后续代码统一管理，搭建项目初期都会增加“代码格式校验”。在提交代码时，触发“格式化规则”，对保存代码进行格式化处理，在者在使用代码管理工具保存和提交代码时，依据校验规则对提交代码进行规则格式化和规则校验。

  增加代码统一规格管理，好处是对于多人进行项目协同开发时，代码风格统一，可以减少冲突，便于代码合并和审核。与此同时，可以增加一些代码校验规则，严格规范编码风格约束不规范行为，也可以减少不必要的问题或者错误出现。从而大大提高项目开发效率和减低项目更新迭代维护的难度。

#安装依赖

【Vue2】husky + eslint + prettier

#依赖安装一

• "eslint": "^7.32.0"

  npm

  yarn

  pnpm

  bun

  1npm install eslint -D

• "prettier": "^2.4.1"

  npm

  yarn

  pnpm

  bun

  1npm install prettier -D

• "husky": "^8.0.0"

  npm

  yarn

  pnpm

  bun

  1npm install husky -D

• "lint-staged": "^11.1.2"

  npm

  yarn

  pnpm

  bun

  1npm install lint-staged -D

#依赖安装二

• "eslint-config-prettier": "^8.3.0"

  npm

  yarn

  pnpm

  bun

  1npm install eslint-config-prettier -D

• "eslint-plugin-prettier": "^4.0.0"

  npm

  yarn

  pnpm

  bun

  1npm install eslint-plugin-prettier -D

• "eslint-plugin-vue": "^9.19.2"

  npm

  yarn

  pnpm

  bun

  1npm install eslint-plugin-vue -D

#校验规则

#规则文件：.eslintignore

1module.exports = {
2	env: {
3		browser: true,
4		es2021: true,
5		node: true,
6		commonjs: true,
7		amd: true
8	},
9	extends: ["plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended"],
10	parserOptions: {
11		ecmaVersion: 12,
12		sourceType: "module",
13		allowImportExportEverywhere: true,
14		ecmaFeatures: {
15			modules: true,
16			legacyDecorators: true
17		}
18	},
19	plugins: ["vue", "prettier"],
20	// 0 = off, 1 = warn, 2 = error
21	rules: {
22		"prettier/prettier": [2, { endOfLine: "auto" }],
23		"vue/no-unused-components": 0,
24		"vue/multi-word-component-names": 0,
25		"no-console": 0,
26		"no-debugger": 1,
27		"no-empty": 0,
28		"no-unused-vars": 0,
29		"no-regex-spaces": 2,
30		"no-async-promise-executor": 0,
31		"no-misleading-character-class": 0
32		// "no-control-regex": 2,
33		// "no-duplicate-case": 2,
34		// "no-extra-boolean-cast": 2,
35		// "no-extra-semi": 2,
36		// "no-const-assign": 2
37	},
38	globals: {
39		uni: true,
40		wx: true,
41		getCurrentPages: true
42	}
43};

• globals：全局忽略变量
• rules：校验规则
• plugins：插件配置

#忽略校验文件：.eslintignore

1.hbuilderx
2.husky
3.vscode
4# folder
5dist
6sdk
7uni_modules
8unpackage
9wxcomponents

注：配置忽略校验的文件和文件夹

#格式化规则

#格式化规则文件：prettier.config.js

1module.exports = {
2	printWidth: 140,
3	tabWidth: 4,
4	useTabs: false,
5	semi: true,
6	singleQuote: false,
7	quoteProps: "as-needed",
8	jsxSingleQuote: false,
9	trailingComma: "none",
10	bracketSpacing: true,
11	bracketSameLine: false,
12	arrowParens: "avoid",
13	proseWrap: "preserve",
14	htmlWhitespaceSensitivity: "ignore",
15	vueIndentScriptAndStyle: false,
16	endOfLine: "lf",
17	embeddedLanguageFormatting: "auto",
18	singleAttributePerLine: false
19};

#格式化忽略文件：.prettierignore

1**/.hbuilderx
2**/.husky
3**/.vscode
4# folder
5/dist
6/sdk
7/node_modules
8/uni_modules
9/unpackage
10/wxcomponents
11# file
12manifest.json

注：配置忽略代码格式化的文件和文件夹

#项目文件配置

1{
2	"private": true,
3	"scripts": {
4		"lint": "prettier --write .",
5		"prepare": "husky install"
6	},
7	"husky": {
8		"hooks": {
9			"pre-commit": "lint-staged"
10		}
11	},
12	"lint-staged": {
13		"*.{js,jsx,tsx,vue,html,css,less,scss,md}": ["prettier --write .", "eslint --fix"]
14	},
15	"dependencies": {
16		"crypto-js": "^4.1.1",
17		"dayjs": "^1.11.10",
18		"echarts": "^5.4.3",
19		"js-base64": "^3.7.5",
20		"uuid": "^9.0.1"
21	},
22	"devDependencies": {
23		"eslint": "^7.32.0",
24		"eslint-config-prettier": "^8.3.0",
25		"eslint-plugin-prettier": "^4.0.0",
26		"eslint-plugin-vue": "^9.19.2",
27		"husky": "^8.0.0",
28		"lint-staged": "^11.1.2",
29		"prettier": "^2.4.1",
30		"vite": "^4.5.1"
31	}
32}

1. 安装 husky 依赖
2. 初始化 husky
   • npx husky-init && yarn
3. 执行 prepare install
4. 并添加命令到 package.json
   • npm set-script prepare "husky install"
5. 创建钩子
   • npx husky add .husky/pre-commit "npm run lint"

#husky 文件下 pre-commit 文件配置

1#!/usr/bin/env sh
2. "$(dirname -- "$0")/_/husky.sh"
3
4# 配置执行规则
5npx lint-staged

#总结

  前几主要是基于 vue 的项目进行配置，vue2 和 vue3 配置工具基本大差不差，区别在于版本号。husky 的版本号不同，初始化方式略微有所差异。eslint 校验规则有很多，具体规则可以参照 eslint 官网，现已有对应的中文版的 eslint 说明文档。可以根据自己项目的实际需求来决定规则的制定。

  代码格式化校验插件有很多，总有一款是符合自己需求的，大家可以根据自己的是舒适度和使用习惯来选择自己索要选择的代码格式化插件，工欲善其事，好的工具，好的插件可以倍速提升自己的编码效率。本文仅做参考，后续配置大家可以自行查阅和参考网上的规则配置和推荐插件，配置完成后要做相应的校验，保证配置无误。