一、创建项目部分
使用 Vite 新建一个项目
yarn create vite
二、ESlint使用部分
添加ESlint
yarn add eslint --dev
初始化ESlint
yarn run eslint --init
配置 package.json
"scripts": {
//...
"lint": "eslint 'src/**/*.{js,jsx,vue,ts,tsx}' --fix"
},
执行校验
yarn run lint
解决Vue3模板根元素校验问题
extends: [
// 'plugin:vue/essential',
'plugin:vue/vue3-recommended',
'standard'
],
解决 defineProps 定义问题
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}'"
}
解决 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 | 增加测试代码或者修改已存在的测试 |