> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# 提交前自动校验

## 需求场景

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

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

## 安装依赖

> **【Vue2】husky + eslint + prettier**

### 依赖安装一

- **"eslint": "^7.32.0"**


```sh [npm]
npm install eslint -D
```

```sh [yarn]
yarn add eslint -D
```

```sh [pnpm]
pnpm add eslint -D
```

```sh [bun]
bun add eslint -D
```

```sh [deno]
deno add npm:eslint -D
```

- **"prettier": "^2.4.1"**


```sh [npm]
npm install prettier -D
```

```sh [yarn]
yarn add prettier -D
```

```sh [pnpm]
pnpm add prettier -D
```

```sh [bun]
bun add prettier -D
```

```sh [deno]
deno add npm:prettier -D
```

- **"husky": "^8.0.0"**


```sh [npm]
npm install husky -D
```

```sh [yarn]
yarn add husky -D
```

```sh [pnpm]
pnpm add husky -D
```

```sh [bun]
bun add husky -D
```

```sh [deno]
deno add npm:husky -D
```

- **"lint-staged": "^11.1.2"**


```sh [npm]
npm install lint-staged -D
```

```sh [yarn]
yarn add lint-staged -D
```

```sh [pnpm]
pnpm add lint-staged -D
```

```sh [bun]
bun add lint-staged -D
```

```sh [deno]
deno add npm:lint-staged -D
```

### 依赖安装二

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


```sh [npm]
npm install eslint-config-prettier -D
```

```sh [yarn]
yarn add eslint-config-prettier -D
```

```sh [pnpm]
pnpm add eslint-config-prettier -D
```

```sh [bun]
bun add eslint-config-prettier -D
```

```sh [deno]
deno add npm:eslint-config-prettier -D
```

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


```sh [npm]
npm install eslint-plugin-prettier -D
```

```sh [yarn]
yarn add eslint-plugin-prettier -D
```

```sh [pnpm]
pnpm add eslint-plugin-prettier -D
```

```sh [bun]
bun add eslint-plugin-prettier -D
```

```sh [deno]
deno add npm:eslint-plugin-prettier -D
```

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


```sh [npm]
npm install eslint-plugin-vue -D
```

```sh [yarn]
yarn add eslint-plugin-vue -D
```

```sh [pnpm]
pnpm add eslint-plugin-vue -D
```

```sh [bun]
bun add eslint-plugin-vue -D
```

```sh [deno]
deno add npm:eslint-plugin-vue -D
```

## 校验规则

### 规则文件：.eslintignore

```javascript title="校验规则"
module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
        commonjs: true,
        amd: true,
    },
    extends: [
        "plugin:vue/essential",
        "eslint:recommended",
        "plugin:prettier/recommended",
    ],
    parserOptions: {
        ecmaVersion: 12,
        sourceType: "module",
        allowImportExportEverywhere: true,
        ecmaFeatures: {
            modules: true,
            legacyDecorators: true,
        },
    },
    plugins: ["vue", "prettier"],
    // 0 = off, 1 = warn, 2 = error
    rules: {
        "prettier/prettier": [2, { endOfLine: "auto" }],
        "vue/no-unused-components": 0,
        "vue/multi-word-component-names": 0,
        "no-console": 0,
        "no-debugger": 1,
        "no-empty": 0,
        "no-unused-vars": 0,
        "no-regex-spaces": 2,
        "no-async-promise-executor": 0,
        "no-misleading-character-class": 0,
        // "no-control-regex": 2,
        // "no-duplicate-case": 2,
        // "no-extra-boolean-cast": 2,
        // "no-extra-semi": 2,
        // "no-const-assign": 2
    },
    globals: {
        uni: true,
        wx: true,
        getCurrentPages: true,
    },
};
```

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

### 忽略校验文件：.eslintignore

```bash title="忽略校验文件"
.hbuilderx
.husky
.vscode
# folder
dist
sdk
uni_modules
unpackage
wxcomponents

```

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

## 格式化规则

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

```js title="格式化规则"
module.exports = {
    printWidth: 140,
    tabWidth: 4,
    useTabs: false,
    semi: true,
    singleQuote: false,
    quoteProps: "as-needed",
    jsxSingleQuote: false,
    trailingComma: "none",
    bracketSpacing: true,
    bracketSameLine: false,
    arrowParens: "avoid",
    proseWrap: "preserve",
    htmlWhitespaceSensitivity: "ignore",
    vueIndentScriptAndStyle: false,
    endOfLine: "lf",
    embeddedLanguageFormatting: "auto",
    singleAttributePerLine: false,
};
```

### 格式化忽略文件：.prettierignore

```bash title="格式化忽略文件"
**/.hbuilderx
**/.husky
**/.vscode
# folder
/dist
/sdk
/node_modules
/uni_modules
/unpackage
/wxcomponents
# file
manifest.json
```

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

## 项目文件配置

```json title="项目文件配置"
{
    "private": true,
    "scripts": {
        "lint": "prettier --write .",
        "prepare": "husky install"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.{js,jsx,tsx,vue,html,css,less,scss,md}": [
            "prettier --write .",
            "eslint --fix"
        ]
    },
    "dependencies": {
        "crypto-js": "^4.1.1",
        "dayjs": "^1.11.10",
        "echarts": "^5.4.3",
        "js-base64": "^3.7.5",
        "uuid": "^9.0.1"
    },
    "devDependencies": {
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-vue": "^9.19.2",
        "husky": "^8.0.0",
        "lint-staged": "^11.1.2",
        "prettier": "^2.4.1",
        "vite": "^4.5.1"
    }
}
```

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 文件配置

```bash title="配置"
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# 配置执行规则
npx lint-staged

```

## 总结

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

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