一、前言
一个人的时候，代码随便敲
多个人一起时，互相看不上
冥冥之中，你想到了eslint + prettier + husky
二、开发工具
vscode
三、安装插件
四、正式开凿
***开凿前温馨提示
为了避免版本不同带来的踩坑，如果项目中已经使用了eslint、prettier，可以在package.json中直接删掉
（1）安装eslint
npm i eslint -D
npm i @babel/eslint-parser @vue/cli-plugin-eslint @vue/eslint-config-prettier @vue/eslint-config-standard --save-dev
npm i babel-eslint eslint-config-prettier eslint-plugin-import eslint-plugin-n --save-dev
看看项目根目录有没有.eslintrc.js文件，没有可以手动新增一个
代码验证规则可以直接带走
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', '@vue/standard', '@vue/prettier'],
rules: {
'no-console': process.env.NODE_ENV == 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: '@babel/eslint-parser',
requireConfigFile: false
}
}
如果想忽略一些文件，不使用eslint校验
神奇操作来了，检查项目根目录是否有.eslintignore文件，没有就手动添加
文件中内容可以直接复制带走
# 忽略目录
build/
node_modules/
public/
tests/
# 忽略文件
**/*-min.js
**/*.min.js
# 忽略src/assets目录下文件的语法检查
src/assets
# 忽略当前目录下为js的文件的语法检查
*.js
*.json
在package.json中添加eslint命令，表示Eslint检测当前目录下所有文件：
"scripts": {
"eslint": "eslint ./**/*"
}
（2）Prettier自动格式化代码
在项目根目录中新建 .prettierrc.js 文件，该文件为 perttier 默认配置文件:
module.exports = {
printWidth: 100, // 一行最多 100 字符
semi: false, // 行尾需要有分号
singleQuote: true, // 使用单引号
trailingComma: 'none', // 末尾不需要逗号
tabWidth: 2, // 使用 2 个空格缩进
endOfLine: 'auto'
}
打开vs code的setting.json文件，添加以下内容
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 设置编辑器的默认格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.format.enable": true,
//autoFix默认开启，只需输入字符串数组即可
"eslint.validate": [
"javascript",
"vue",
"html",
"javascriptreact",
"vue-html"
],
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// -------------------- vetur 配置 --------------------
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 让vue中的js按prettier进行格式化 用这个
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js": "prettier",
"js-beautify-html": {
"wrap_attributes": "aligned-multiple" //当超出折行长度时，将属性进行垂直对齐
}
},
"vetur.validation.script": false, // 未明显使用变量校验
// -------------------- vetur 配置 --------------------
// -------------------- prettier 配置 --------------------
"prettier.useEditorConfig": false, // 不使用editorConfig配置文件设置才生效
// -------------------- prettier 配置 --------------------
以上内容设置完成后，记得重启vs code，确保一系列配置可以生效
（3）代码提交规范husky
安装husky
npm i husky -D
在终端控制台输入命令，生成.husky文件
npx husky i
修改package.json，将我们的husky放到命令中，避免其他人获取代码时husky不生效
"scripts": {
"eslint": "eslint ./**/*",
"prepare": "husky install"
}
使用commit-msg规范提交信息，会在.husky目录下生成commit-msg文件，记得将文件结尾方式改成lf后再保存
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
然后我们测试一下，输入命令
git commit -m '测试'
就会提示我们
然后我们再试一下git commit -m 'fix: 测试' 命令，就会神奇的发现没有错误信息，提交成功了
git commit -m 'fix: 测试`
使用pre-commit检测提交时代码是否规范
引入lint-staged
npm i lint-staged -D
修改package.json文件，在scripts添加命令
"scripts": {
"eslint": "eslint ./**/*",
"lint": "lint-staged",
"prepare": "husky install"
}
接着在.husky目录下生成pre-commit文件
npx husky add .husky/pre-commit "npm run lint"
修改package.json文件，添加"lint": "lint-staged"命令
"scripts": {
"eslint": "eslint ./**/*",
"lint": "lint-staged",
"prepare": "husky install"
},
至此，项目中使用eslit + prettier + husky 已经可以大功告成了！！！
