Vue3+Vite+TS后台项目 ~ 2.配置 ESLint 校验规范

管什么真理无穷，进一寸有一寸的欢喜

—— 胡适

配置 ESLint ：

ESLint 官方文档

先 安装 ESLint

# npm
npm install eslint --save-dev

# yarn
yarn add eslint --dev

再 初始化 ESLint

# npm
npx eslint --init

# yarn
yarn run eslint --init

小编这里使用的 npm

# 安装
npm install eslint --save-dev

# 初始化
npx eslint --init

# 选择 帮我们找到不规范的语法，并且强制应用代码规范
? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

# 选择 (import/export)代码规范（ES6 代码规范）
? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

# 选择 项目中使用的前端框架
? Which framework does your project use? … 
  React
❯ Vue.js
  None of these

# 是否验证 ts 代码规范
? Does your project use TypeScript? › No / Yes

# 代码的运行环境是 浏览器/node
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

# 选择一个流行的代码规范
? How would you like to define a style for your project? … 
❯ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

# 选择 Standard 代码规范
? Which style guide do you want to follow? … 
  Airbnb: https://github.com/airbnb/javascript
❯ Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

# ESLint配置文件 代码的保存格式
? What format do you want your config file to be in? … 
❯ JavaScript
  YAML
  JSON

# 是否同意开始安装
? Would you like to install them now with npm? › No / Yes

...
Successfully created .eslintrc.js file
# 配置成功

需要 ESLint 对代码进行验证，手动配置验证的脚本文件

编辑package.json文件

// eslint 需要验证 sec 目录下所有的 js、jsx、vue、ts、tsx 后缀的文件资源，对他们进行代码规范验证
// --fix 是指对于不符合要求的代码会自动格式化（简单的自动优化）
"scripts": {
	...
	// for mac
  "lint": "eslint 'src/**/*.{js,jsx,vue,ts,tsx}' --fix"
  
  // for window
  "lint": eslint 'src/**/*.{js,jsx,vue,ts,tsx} --fix"
}

验证是否配置成功：编辑main.js文件

import { createApp } from 'vue'
// 尾部加上分号，故意设置一个简单的语法错误
import App from './App.vue';

createApp(App).mount('#app')

# 终端使用 eslint 进行校验
npm run lint

效果：自动解决了main.js的分号错误，抛出其他错误

The template root requires exactly one element
—— 模板只允许存在一个根节点，在 Vue3 中可以使用多个根节点，这是 Vue2 校验规范的遗留问题

所以需要修改 eslint 校验版本：编辑.eslintrc.js文件

寻找 Vue3 校验版本

1. package.json 中的校验文件是 eslint-plugin-vue
2. 在 node_modules 中寻找 eslint-plugin-vue 文件夹
3. eslint-plugin-vue/lib/configs 中就是 eslint 的校验版本
4. essential 为Vue2 校验版本，这里使用 Vue3 强校验 - vue3-strongly-recommended

  extends: [
    ...
    'plugin:vue/vue3-strongly-recommended',
  ],

再次执行 npm run lint ，无报错

小编 在 main.js 有个报错 ：
提示： ‘defineProps’ is not defined
如下解决就好了
import { ref, defineProps } from ‘vue’

在 HelloWorld.vue 中， 有如下 波浪线 提醒

Vue3 强校验规定：超过两个属性需要折行

---

集成 VSCode 插件：

目的：

1. ESLint 配置目的是在代码提交时进行审核
2. VSCode 插件目的是在编写代码时进行辅助（提醒、格式化）

禁用 Vetur 插件

安装 eslint 插件

设置能够自动格式化代码：扩展设置中勾选 下面这个选项

以后在配置格式化工具时候，默认为 ESLint 就可以了（之后可以直接使用快捷键）

安装 volar 插件

配置 git commit hook：

lint-staged GitHub 官方文档

目的：

1. ESLint 配置目的是在代码提交时进行审核（需要运行 npm run lint）
2. 这里使用 hook 钩子，在提交时候自动对代码 进行校验

安装：

npx mrm@2 lint-staged

编辑package.json文件

// 遇到 js,jsx,vue,ts,tsx 文件时，运行 npm run lint，校验通过再向下执行
...
  "lint-staged": {
    "src/**/*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "git add"
    ]
  }

验证是否配置成功：编辑main.js文件

import { createApp } from 'vue'
// 尾部加上分号，故意设置一个简单的语法错误
import App from './App.vue';

// 添加一个复杂错误
const a = 123

createApp(App).mount('#app')

# 终端使用 git commit 进行校验
git status

git add .

git status

git commit -m "config eslint"

会在 git commit 的时候运行 npm run lint，并且抛出报错 位置和原因，错误的代码也不会被提交

效果展示：

在开发和构建的时候进行验证：

目的：

1. ESLint 配置目的是在代码提交时进行审核
2. VSCode 是编写代码时候辅助校验
3. 开发和构建验证是在 浏览器渲染时候校验并抛出异常

vite-plugin-eslint GitHub 官方文档

安装

# npm
npm install vite-plugin-eslint --save-dev

# yarn
yarn add vite-plugin-eslint --dev

配置：编辑vite.config.ts文件

...
import eslintPlugin from 'vite-plugin-eslint'

  plugins: [
    ...
    eslintPlugin({
		// 配置
		cache: false // 禁用 eslint 缓存
	})
  ]
})

验证是否配置成功：编辑main.js文件

import { createApp } from 'vue'
// 尾部加上分号，故意设置一个简单的语法错误
import App from './App.vue';

createApp(App).mount('#app')

效果展示：

现在 已经全局校验，例如 npm run build，当发现错误时，无法继续执行

---

Git commit 提交规范

Commit message 和 Change log 编写指南
Git 使用规范流程
Git 工作流程

目的：规范化的 Git commit 日志，便于后续代码 review，版本发布以及日志自动化生成等等

commitlint GitHub 官方文档

常用 commit 类型说明：

类型	说明
build	对构建系统或者外部依赖项进行了修改
ci	对 CI 配置文件或脚本进行了修改
chore	构建过程或辅助工具的变动
docs	新增或修改文档
feat	新功能，比如 feat: login
fix	修补 bug
perf	优化相关，比如提升性能、体验
refactor	重构（即不是新增功能，也不是修改bug的代码变动）
revert	回滚到上一个版本
style	不影响代码含义的修改，比如空格、格式化、缺失的分号等，而不是 css 修改
test	增加测试代码或者修改已存在的测试

安装：

# For mac:
npm install --save-dev @commitlint/{config-conventional,cli}
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# 自动创建配置文件（小编下面手动来创建）
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

手动创建配置文件：在根目录创建 commitlint.config.js文件

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

安装 Husky（之前已经安装、激活过 Husky，对添加 hook 进行手动配置）：

# Install Husky v6
npm install husky --save-dev
# or
yarn add husky --dev

# Activate hooks
npx husky install
# or
yarn husky install

# Add hook
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

终端执行：

# 添加 Husky 文件
npx husky add .husky/commit-msg ''

编辑 husky/commit-msg文件：

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

npx --no-install commitlint --edit "$1"

验证是否配置成功：

# 提交代码
git add .

# 查看被上传的文件
git status

# 提交日志（故意将日志内容乱写）
git commit -m "asdfasdfadsa"

结果展示：无法提交，抛出异常原因

重新提交日志内容：

# 构建过程或辅助工具的变动 - 配置了 commitlint
git commit -m "chore: 配置 commitlint"

# 上传成功...