ESLint和Prettier
安装
npm install -D eslint prettier eslint-plugin-import eslint-plugin-prettier eslint-config-prettier eslint-config-airbnb-base babel-eslint eslint-plugin-vue
eslint-plugin-import，支持ES6语法import/exporteslint-config-prettier，关闭不必要或者可能和prettier产生冲突的eslint规则eslint-config-airbnb-base，业界比较成熟的规范
配置eslint规则
在根目录下增加.eslintrc.js文件
module.exports = {
root: true,
env: {
node: true,
browser: true,
},
extends: [
'airbnb-base',
'eslint:recommended',
'plugin:vue/essential',
'plugin:prettier/recommended',
],
plugins: ['vue', 'prettier'],
parserOptions: {
parser: '@babel/eslint-parser',
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
semi: ['off', 'always'], // 不检测语句末尾的分号
indent: ['error', 2, { SwitchCase: 1 }], // 强制缩进为2个空格
'space-before-function-paren': 0, // 关闭函数名称跟括号之间的空格检测
'object-curly-spacing': 0, // 忽略大括号内的空格
// 允许使用slot和slot-scope
'vue/no-deprecated-slot-attribute': 0,
'vue/no-deprecated-slot-scope-attribute': 0,
// 允许使用过滤器
'vue/no-deprecated-filter': 0,
'vue/no-parsing-error': 0,
// 解决正则斜杠问题
'no-useless-escape': 0,
'no-control-regex': 0,
},
}
配置prettier规则
在根目录下增加.prettierrc.js文件
module.exports = {
eslintIntegration: true, // 与eslint整合
semi: false, // 不需要分号结尾
singleQuote: true, // 单引号
arrowParens: 'avoid', // 在单个箭头函数参数周围加上括号<avoid|always>
endOfLine: 'auto', // 最后一行格式自适应
}
参考文章
styleLint
和ESLint类型，只不过是对css等样式进行检查的工具
安装
npm install -D stylelint stylelint-config-standard stylelint-prettier
配置文件
在根目录添加stylelint.config.js文件
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
// https://stylelint.io/user-guide/configuration
rules: {
'no-descending-specificity': null, // 禁止低优先级的选择器出现在高优先级的选择器之后
},
}
参考文章
lint-staged
用于代码提交前的检查，和husky的pre-commit钩子配合使用
安装
npm install -D lint-staged
特别需要注意，执行命令的时候安装的是最新的
lint-staged，在之后执行中注意node的版本，如果出现Unexpected identifier的错误，就是node版本过低，升级后即可
配置
在package.json中增加lint-staged指令块，在提交前使用eslint检查所有js,vue文件
"lint-staged": {
"*.{js,vue}": [
"eslint --fix",
"git add"
]
}
husky
安装
npx husky-init && npm install
安装后会在根目录创建.husky文件夹，并在package.json中增加script代码块中增加prepare命令
husky install
特别需要注意，在mac中可能会出现之后设置的钩子不能执行的问题，需要改写
prepare命令，具体原因可以参考这篇文章
husky install && chmod ug+x .husky/*
.husky文件夹默认添加pre-commit钩子文件，我们可以配合之前lint-staged命令来改写一下，在提交前对文件进行一次代码规范检查
npx lint-staged --verbose
添加新的钩子
npx husky add .husky/commit-msg 'npx commitlint --config commitlint.config.js --edit $1'
这里添加commit-msg钩子来约束提交规范，如果执行命令失败，可以参考这篇文章
跳过钩子检查
增加--no-verify参数跳过检查，用于增加第三方文件等不需要代码检查的情况
参考文章
commitlint
安装
npm install -D @commitlint/cli @commitlint/config-conventional
配置文件
在根目录下增加commitlint.config.js文件，并配置提交规范
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
'build', // 发布版本
'chore', // 改变构建流程、或者增加依赖库、工具等
'ci', // 持续集成修改
'docs', // 文档修改
'feat', // 新增功能
'fix', // 修复缺陷
'perf', // 优化相关，比如提升性能、体验
'refactor', // 代码重构
'revert', // 回退版本
'style', // 样式修改
'test', // 测试用例修改
],
],
},
}
