一、创建项目部分
使用 Vite 新建一个项目
yarn create vite二、ESlint使用部分
添加ESlint
yarn add eslint --dev初始化ESlint
yarn run eslint --init这个时候编写代码就会有 eslint 校验了，我们来配置整个项目校验命令
配置 package.json
"scripts": {
//...
"lint": "eslint 'src/**/*.{js,jsx,vue,ts,tsx}' --fix"
},执行校验
yarn run lint这个时候就能看到校验不通过的地方了
一般会提示以下问题我们来逐一解决
- error The template root requires exactly one element
- error 'defineProps' is not defined
解决Vue3模板根元素校验问题
修改 .eslintrc.js ，把 plugin:vue/essential 替换为 plugin:vue/vue3-recommended
extends: [
// 'plugin:vue/essential',
'plugin:vue/vue3-recommended',
'standard'
],解决 defineProps 定义问题
修改 .eslintrc.js ，添加 globals 配置
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly'
}保存在执行下 yarn run lint，这时可以看到所有校验都通过了
附上此时 .eslintrc.js 配置
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'plugin:vue/vue3-recommended',
'standard'
],
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module'
},
plugins: [
'vue',
'@typescript-eslint'
],
rules: {
},
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly'
}
}
三、配置运行时校验
安装 vite-plugin-eslint 插件
yarn add vite-plugin-eslint --dev配置 vite.config.ts
...
import eslintPlugin from 'vite-plugin-eslint'
...
plugins: [
...
eslintPlugin({
// 配置
cache: false // 禁用 eslint 缓存
})
]这时重启项目就可以看到有错误的地方控制台会报错了
四、集成 prettier
yarn add prettier --dev添加配置文件 .prettierrc.js
module.exports = {
// 根据自己项目需要
printWidth: 200, //单行长度
tabWidth: 4, //缩进长度
semi: false, //句末使用分号
singleQuote: true, //使用单引号
trailingComma: 'none' // 句末逗号
}配置校验脚本 package.json
"scripts":{
...
"format": "prettier --write './**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}'"
}配置完执行 yarn format 就可以格式化代码了
解决 eslint 和 prettier 的冲突
一般实际情况下 eslint 和 prettier 的规则会存在冲突，我们引用以下插件完成
yarn add eslint-config-prettier eslint-plugin-prettier --dev修改 .eslintrc.js 配置
...
extends: [
'plugin:vue/vue3-recommended',
'standard',
// 新增，必须放在最后面
'plugin:prettier/recommended'
],
...结合 vscode 保存自动格式化
安装 vscode 的 prettier 插件
配置 .vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnType": true
}现在编辑保存时就可以自动格式化代码了
五、Git 提交校验部分
添加 husky + lint-staged
npx mrm@2 lint-staged配置 package.json
// ...
"lint-staged": {
"src/**/*.{js,jsx,vue,ts,tsx}": [
"npm run lint",
"git add"
]
}这时尝试提交代码就会进行 eslint 校验了，不通过时会报错无法提交
添加GIT提交规范配置
yarn add @commitlint/config-conventional @commitlint/cli --dev添加配置文件 commitlint.config.js
module.exports = {
extends: ['@commitlint/config-conventional']
}npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'这时提交文件就会要求标明改动类型了
常见commit提交类型
| 类型 | 说明 |
|---|---|
| chore | 构建过程或辅助工具的变动 |
| feat | 新功能，比如 feat: login |
| fix | 修补 bug |
| perf | 优化相关，比如提升性能、体验 |
| style | 不影响代码含义的修改，比如空格、格式化、缺失的分号等，而不是 css 修改 |
| test | 增加测试代码或者修改已存在的测试 |