聊一聊代码风格和质量校验开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第 7 天，[点击查看活动详

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第 7 天，点击查看活动详情

前言

这篇来讲点实际的：手把手教你配置代码格式化和代码质量校验，并实现工程自动化。

代码校验

代码校验包括代码质量检查和代码风格检查，我们一般采用 ESLint 来进行校验，但是不同的人会配置不同的规则集，所以需要一个方案来确定整个团队的代码校验，确保团队中每个人写的代码风格一致。

代码校验有很多种方案：ESLint + Airbnb、ESLint + Prettier、ESLint + Standard等等，我日常用的就是Eslint + Prettier这种方案，现在我们来学习如何集成到 Vite吧。

1. 安装所需包

1、安装 ESLint 相关包

yarn add eslint eslint-plugin-vue -D，由于ESLint不支持 Vue 文件，所以我们需要安装 eslint-plugin-vue 用来检查 Vue 文件代码质量，支持 template 和 script 部分，它的规则集详见规则列表。

2、安装 Prettier 相关包

yarn add prettier -D

3、冲突

yarn add eslint-config-prettier -D，ESLint 既能代码质量检查，也可以进行代码风格化，而 Prettier 只负责代码风格化。如果两者同时使用，必然会造成冲突，所以我们需要来解决冲突，这个包就是来禁止ESLint和 Prettier 相冲突的规则。

4、提示

yarn add eslint-plugin-prettier -D，如果没有这个插件的话，我们书写的代码和 Prettier 定义规则不同的话，代码是不会报错的，自然我们就无法发现错误，当我们添加这个插件后，Prettier 规则会作为 ESLint 规则的一部分，代码就可以提示报错了。另外我们运行 eslint --fix 后，它会自动运行 prettier 命令。

yarn add vite-plugin-eslint -D，当我们添加这个插件后，我们就可以在浏览器看到 ESLint 的报错了，我们写错代码后，错误不仅会在控制台出现，它还会打在浏览器公屏上，这个插件是不是很管用。٩(๑❛ᴗ❛๑)۶

2. 配置

1、ESLint 配置

配置文件格式

忽略文件

配置说明

更多了解官方文档配置

规则说明

更多了解官方文档规则

支持文件格式

ESLint 默认是支持 ECMAScript/JavaScript 文件的，对于其他文件格式需要使用 --ext 来指定后缀。

如果是VSCode 安装的话，需要在 settings.json 指定validate列表：

"eslint.validate": ["typescript", "typescriptreact"]

完整配置

module.exports = {
  root:true,
  env: {
    browser: true,
    es2021: true,
  },
  // vue 配置：https://eslint.vuejs.org/user-guide/#usage
  // eslint 推荐规则
  // 'plugin:prettier/recommanded' equal to [https://github.com/prettier/eslint-plugin-prettier]，需要放在最后用于覆盖
  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', 'plugin:prettier/recommended'],
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
  },
  // eslint-plugin-vue
  plugins: ['vue'],
  rules: {
    'no-var': 'error',
    'no-debugger': 'off',
  },
};

2、Prettier 配置

配置文件格式

忽略文件

配置说明

更多了解官方文档

支持文件格式

3、Vue 融合

在 Vetur 中，默认使用了 Prettier 对 vue 文件的风格化，所以我们在配置VSCode 的 settings.json时，只需要配置：

"[vue]": {
   "editor.defaultFormatter": "octref.vetur"
}

它就可以启用 Prettier 对 Vue 文件的风格化。但是 Vue 3 的 Volar 没有默认采用任何风格化工具，所以我们需要这样配置：

"[vue]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
}

这样保存时就能启动 Prettier 对 Vue 文件的风格化了。

另外对于 Vue 文件，由于ESLint不能识别Vue进行代码质量检验，所以ESLint 的 parser 需要使用 vue-eslint-parser，并且在 --ext 传递 .vue参数。如果需要对 typescript进行支持，那么需要给一个parserOptions 选项以及执行yarn add typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin -D，更多配置详见官方文档。

"parserOptions": {
	  "parser": "@typescript-eslint/parser",
    "sourceType": "module"
},
"extends":['plugin:@typescript-eslint/recommended']

3. 自动化

既然我们设置代码校验是目的是统一团队的代码质量和代码风格，那怎么保证呢？答案当然是代码提交的时候需要去校验了，知道什么时候去校验了，接下来我们来学习怎么去做这个。

1、Git Hooks

在我们提交代码时，Git 其实会触发相应的钩子，比如git commit 它就会先后触发pre-commit、prepare-commit-msg、commit-msg、post-commit钩子，在这些钩子中，我们可以做一下奇妙的工作了。

2、Husky

安装 Husky 的时候，会创建所需的Git Hook，当我们操作 Git 命令时，会执行对应的 Git Hook 里面内容。

安装

yarn add husky -D。Husky V7版本发生破坏性更新，这个需要注意

启用 Git Hook

npx husky install。创建.husky 文件，启用Git Hook，为了在安装依赖之前自动化执行 husky install，需要在package.json配置：

"scripts":{
	"prepare": "husky install",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
}

添加 Git Hook

npx husky add .husky/pre-commit 'yarn lint'。这样会在根目录创建一个.husky文件，下面存在 pre-commit Hook，文件主要内容是yarn lint。

3、条件代码校验

虽然上面方式可以做到代码提交时代码校验，但是无法控制哪些代码需要校验，按正常需要，我们只需要校验那些提交的代码，保证提交代码校验就可以了，通过lint-staged我们就可以实现这个。

安装

yarn add lint-staged -D。。通过lint-staged ，我们控制提交代码进行校验，并且可以控制不同文件格式采取不同校验方式。

配置

我们需要更改下配置，更多配置参考官方文档：

// 添加 pre-commit 时
npx add husky .husky/pre-commit 'yarn lint-staged'

// package.json 中添加 lint-staged，也可以采取不同配置方式
{
  "lint-staged": {
    "src/**/*.{vue,js}": [
      "yarn lint",
      "git add"
    ],
    "src/**/*.{json,md,css,scss}": [
      "prettier --write",
      "git add"
    ],
    "docs/**/*.{json,md,css,scss}": [
      "prettier --write",
      "git add"
    ]
  }
}

附加

EditorConfig

我们经常在工程中看到 .editorconfig 这个文件，它其实也是用来风格化文件的，但是它可以无视你使用的编辑器，但是需要在编辑器安装EditorConfig 插件，你可以查看官方文档了解支持编辑器列表。

1. Prettier VS EditorConfig

既然都是风格化代码，Prettier 和 EditorConfig 肯定是有冲突的。他们冲突选项主要在这四项：

// EditorConfig
end_of_line
indent_style
indent_size/tab_width
max_line_length
// Prettier
"endOfLine"
"useTabs"
"tabWidth"
"printWidth"

如果这些选项Prettier已经定义的话，在Prettier的作用范围内，Prettier优先级是更高的，如果Prettier没有定义，那么将采用EditorConfig的。但是最好确定这四个选项放置的位置，比较合理的做法是这四个选项配置在EditorConfig，而Prettier不配置这些选项。

jsconfig.json or tsconfig.json

这两个文件其实是跟编辑器相关的，在编译时起作用，如果不使用typescript我们配置的是 jsconfig.json，它的配置是使编辑器能够在写代码时有更好的提示，比如以下配置：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "target": "ES6",
    "module": "commonjs"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

配置"@/*":['src/*']，我们在导入模块时，输入@便能智能识别src下面文件。

总结

本来想一篇写完代码校验和提交规范化，看来是完不成了，留着下篇给提交规范化吧，这篇主要介绍了代码校验化，主要是这些内容：

代码校验方案选择
代码校验配置
代码校验和 Vue 融合
代码校验自动化流程

聊一聊代码风格和质量校验

前言