管什么真理无穷,进一寸有一寸的欢喜
—— 胡适
配置 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 校验版本
- package.json 中的校验文件是 eslint-plugin-vue
- 在 node_modules 中寻找 eslint-plugin-vue 文件夹
- eslint-plugin-vue/lib/configs 中就是 eslint 的校验版本
- 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 插件:
目的:
- ESLint 配置目的是在代码提交时进行审核
- VSCode 插件目的是在编写代码时进行辅助(提醒、格式化)
禁用 Vetur 插件
安装 eslint 插件
设置能够自动格式化代码:扩展设置中勾选 下面这个选项
以后在配置格式化工具时候,默认为 ESLint 就可以了(之后可以直接使用快捷键)
安装 volar 插件
配置 git commit hook:
目的:
- ESLint 配置目的是在代码提交时进行审核(需要运行 npm run lint)
- 这里使用 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
,并且抛出报错 位置和原因,错误的代码也不会被提交
效果展示:
在开发和构建的时候进行验证:
目的:
- ESLint 配置目的是在代码提交时进行审核
- VSCode 是编写代码时候辅助校验
- 开发和构建验证是在 浏览器渲染时候校验并抛出异常
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,版本发布以及日志自动化生成等等
常用 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"
# 上传成功...