在使用 Vite 创建 Vue3 项目时, 发现 Vite 没有提供配置 Lint 工具的选项, 下面介绍一下自己如何配置 Lint 工具
1. 配置 ESLint 8
npm i eslint -D
npm init @eslint/config@0.4.6 # 按照提示选择合适的配置
# 推荐 standard 规则
- 安装完成后, 修改 ESLint 配置文件
// .eslintrc.js
module.exports = {
env: {
// ...
+ 'vue/setup-compiler-macros': true, // 解决 'defineProps' is not defined 相关问题(Vue3.2新增)
},
extends: [
- 'plugin:vue/essential',// 去掉 vue2 规则
+ 'plugin:vue/vue3-recommended', // 添加 vue3 规则
// ...
],
// ...
};
2. 配置 Prettier
npm i prettier -D
npm i eslint-config-prettier -D
// .prettierrc.js 根据个人习惯添加配置
module.exports = {
semi: true,
singleQuote: true,
trailingComma: 'all',
};
// .eslintrc.js
module.exports = {
// ...
extends: [
'plugin:vue/vue3-recommended',
'standard',
+ 'prettier', // 启用 eslint-config-prettier: 禁用 ESLint部分规则(与 Prettier 冲突)
// 注意: 一定要放在最后一项
],
// ...
};
3. 配置 VSCode
-
安装 VSCode 插件
- Volar: 代码高亮, TS类型提示等功能; 注意禁用 Vetur
- ESLint: 实时提示 Lint 问题
- Prettier - Code formatter: 保存时自动格式化
-
修改 VSCode 配置
// .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认格式化插件
"editor.formatOnSave": true // 保存代码时自动格式化
}
4. 配置 Git Hooks(可选)
在 git commit 时校验规范, 避免不规范代码提交到代码仓库
npm i yorkie -D
npm i lint-staged -D
// package.json
{
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
+ "lint": "eslint --ext .js,.jsx,.ts,.tsx,.vue",
+ "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,vue,md,json}'"
},
+ "gitHooks": {
+ "pre-commit": "lint-staged"
+ },
+ "lint-staged": {
+ "**/*.{js,jsx,ts,tsx}": "eslint --ext .js,.jsx,.ts,.tsx,.vue",
+ "**/*.{js,jsx,tsx,ts,vue,md,json}": [
+ "prettier --write"
+ ]
+ },
}
最终效果
- Prettier 负责代码美化
- ESLint 负责代码质量检测
- 配合 VSCode 实现: 保存代码时自动格式化, 编写代码时 ESLint 实时提示 Lint 问题
- 配合 Git Hooks 实现: 禁止 commit 不规范代码
- Demo 地址: github.com/wywppkd/vue…
