记录项目中引入Prettier + ESLint + Husky + Lint-staged实现代码编写规范和代码检查。
Prettier统一代码风格
Prettier 是一个“有态度”的代码格式化工具，在保存时就可以自定格式化代码，使代码保持一致性和可读性。
Vscode插件
Prettier - Code formatter
安装依赖
yarn add prettier -D
配置
在根目录新建.prettierrc.Js文件（.prettierrc.xxx格式文件），配置内容如下（你也可以按照你喜欢的风格进行配置）。
module.exports = {
// 是否使用单引号
singleQuote: true,
// 代码结尾是否加分号
semi: false,
// 末尾不需要逗号
trailingComma: 'none',
// 超过多少字符强制换行
printWidth: 180,
// 使用 2 个空格缩进
tabWidth: 2,
// 文件换行格式 LF/CRLF
endOfLine: 'auto',
// 单个参数的箭头函数不加括号 x => x
arrowParens: 'avoid'
// 结束标签＞跑到下一行
// htmlWhitespaceSensitivity: 'ignore'
// 指定在HTML或JSX属性中是否每行只放置一个属性
// singleAttributePerLine: false
// 对象大括号内两边是否加空格 { a:0 }
// bracketSpacing: true
}
常用命令
npx prettier --write .npx prettier --write srcnpx prettier --write src/xxx
ESLint代码检查
ESLint是一款前端开发中流行的代码检查工具，静态地分析你的代码以快速发现、修复问题。
主要功能：
- 语法检查：如检测未定义变量、未使用的变量等问题。
- 规则强制：如必须使用全等 (===) 而非等于 (==)。
- 支持插件：可扩展支持 React、Vue 等框架的特定规则。
Vscode插件
ESLint
安装依赖
yarn add eslint -D
注意：ESLint版本需小于9.0.0，因为从9开始它的配置有很大变化
配置
在根目录新建.eslintrc.Js文件（.eslintrc.xxx格式文件），配置内容如下：
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
常用命令
npx eslint .npx eslint srcnpx eslint src/xxx
整合Prettier和ESLint
在项目开发中，ESLint 和 Prettier 的规则存在很多冲突。例如，ESLint 可能强制某种格式，而 Prettier 会直接重写代码。为了解决这种冲突，我们需要通过插件整合它们。
安装依赖
yarn add eslint-config-prettier eslint-plugin-prettier -D
配置
.eslintrc.js文件中更新配置如下：
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended'], // 重要
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'prettier/prettier': 'error', // 重要
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-useless-escape': 0,
'no-empty-pattern': 0,
'no-empty': 'off',
indent: [
2,
2,
{
SwitchCase: 1
}
],
// 关闭检查文件名是否为驼峰命名
'vue/multi-word-component-names': 'off',
'vue/no-mutating-props': 'off',
// 关闭函数括号前面的空格
'space-before-function-paren': 'off',
// switch..break语法case中必须代break
'no-case-declarations': 'off',
curly: 'off',
// 在条件中使用常量表达式
'no-constant-condition': ['error', { checkLoops: false }]
// 不能有未定义的变量
// 'no-undef': 'off'
// 强制驼峰命名法
// 'camelcase': 'off'
}
}
Husky+Lint-staged进行git commit检查
Husky和Lint-staged是现代前端开发中常用的工具组合，用于在提交代码前进行检查和修复，确保代码质量并规范团队协作流程。
Husky： 用于在 Git 的生命周期事件（如 pre-commit、pre-push）中触发脚本操作。
- 替代 Git 原生钩子，方便管理和配置。
- 集成团队协作流程，减少低质量代码进入仓库。
Lint-staged： 专注于检查 Git 暂存区（staged） 的文件，避免对整个项目执行检查，提高效率。
- 仅处理需要提交的文件，节约时间。
- 可结合 ESLint、Prettier 等工具自动修复代码。
安装依赖
yarn add husky lint-staged -D
配置
在package.json文件中添加脚本：
"scripts": {
"prepare": "npx husky install"
}
只要执行yarn install命令，就会在项目根目录创建.husky文件夹及相关文件。
如果还没有执行yarn install命令，可以在跟目录下手动创建.husky文件夹，在该文件夹下新建pre-commit文件，文件内容如下：
npx lint-staged
在根目录下新建.lintstagedrc.js文件，文件内容如下：
module.exports = {
'*.{vue,js}': ['prettier --config .prettierrc.js --write', 'eslint --cache --fix']
}
这里使用 --cache命令，该配置项表示在进行ESLint检查的时候，生成一个缓存文件 .eslintcache，缓存文件默认在当前目录下面，有了缓存文件之后，下一次 ESLint 在做检查的时候速度会更快（注意：请在gitignore中配置忽略该文件）。
常见问题
为了避免发生冲突，可以使用极端方式，清除Vscode的个人配置。
Q: 配置不生效
A：Prettier的配置有时候需要重启Vscode，若重启还是不行，在根目录添加.vscode文件，在该文件下新建settings.json文件，文件内容如下：
{
"editor.formatOnSave": true,
"prettier.requireConfig": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
Q：配置好后，使用Ctr + S保存.vue文件，发现编译器先用Prettier格式化了代码，但是立马代码又被格式化成了其它代码风格
A：可能是之前针对某类文件做了指定格式化代码风格，windows系统中，Vscode配置文件C:\Users\你的用户名\AppData\Roaming\Code\User\settings.json注释或者删除针对vue的配置。
{
... // 其它配置
"[vue]": {
// 本人之前配置过vue文件的格式化方式，这里会起冲突，把它注释掉或删除
// 或者改为"editor.defaultFormatter": "esbenp.prettier-vscode"
// "editor.defaultFormatter": "Vue.volar"
},
... // 其它配置
}
