一、创建项目部分
使用 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 | 增加测试代码或者修改已存在的测试 |
参考项目git地址：github.com/jyliyue/vit…
