项目中需要对代码进行格式化,并且对代码进行校验。可以通过git提供的钩子在commit时可以对==git暂存区的文件==提前进行校验和格式化,如果校验不通过,则不让提交。
在项目中最开始运行的时候,可以把校验规则配置的等级低一些,后续再增加校验难度。
git钩子
git hooks都存储在 .git/hooks
文件夹,里面都是一些可执行的脚本。生成项目时,会生成一些带sample的文件,可以把sample去掉执行。
客户端钩子
一般比较常用到的钩子
- pre-commit:在commit消息之前执行脚本
- prepare-commit-msg:可以在这里执行 提交信息的模板,合并提交、压缩提交等
- commit-msg: 对提交信息进行校验
服务端钩子
- pre-receive:处理来自客户端的推送操作时执行
husky 和 vue-cli
husky提供了commits的各种钩子,包括pre-commit、commit-msg等。
vue-cli内置了git-hooks yorkie, yorkie是两年前从 husky 项目中fork出来的,打开可以看到yorkie已经两年没有更新了。
husky 使用
在pre-commit钩子中使用 lint-staged, lint-staged只会对git暂存区的文件进行校验。
安装相应依赖
npm install --save-dev husky lint-staged
npm i -D prettier
npm i -D eslint-plugin-prettier
npm i -D eslint-config-prettier
npm i -D eslint
npm i -D eslint-plugin-standard
npm i -D eslint-plugin-vue
npm i -D stylelint
npm i -D stylelint-scss
npm i -D stylelint-config-standard
npm i -D stylelint-config-recess-order
husky相应配置
将下面配置拷贝到package.json中
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{html,vue,css,scss}": [
"prettier --write",
"stylelint --fix",
"git add"
],
"*.{js,vue}": [
"prettier --write",
"eslint --fix",
"git add -A"
]
},
Prettier配置
格式化代码,通过配置.prettierrc
达到项目中使用统一格式。可以与eslint配合使用。
新建 .prettierrc
文件。
{
"arrowParens": "always",
"bracketSpacing": true,
"endOfLine": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": true,
"jsxSingleQuote": false,
"printWidth": 120,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false
}
新建 .prettierignore
文件, 里面填写不需要校验的文件或文件夹。
EsLint 配置
十分钟了解eslint配置 && 编写自定义eslint规则
EsLint 配置文档
Extends的规则
- EsLint 推荐的规则:eslint:recommended, 通过使用
"extends": "eslint:recommended"
来启用推荐的规则。 - Vue文件校验的规则: plugin:vue/essential, 通过安装官方的
eslint-plugin-vue
支持,它支持同时检查你 .vue 文件中的模板和脚本,增加对v-if,v-for等指令的校验等。 - prettier校验:plugin:prettier/recommended,根据配置的prettier规则进行校验。
在项目新建 .eslintrc.js
文件。
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true,
},
extends: ["eslint:recommended", "plugin:vue/essential", "plugin:prettier/recommended"],
parserOptions: {
parser: "babel-eslint",
},
// eslint: https://eslint.org/docs/user-guide/configuring
// "规则名": [规则值, 规则配置]
// 关闭规则: "off"或者0
// 在打开的规则作为警告(不影响退出代码): "warn"或者1
// 把规则作为一个错误(退出代码触发时为1): "error"或者2
rules: {
"prettier/prettier": "warn",
"arrow-parens": 0,
// 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-unused-vars": [
"off",
{
ignorePattern: "^_",
},
],
avoidEscape: 0,
"space-before-function-paren": 0,
"generator-star-spacing": 0,
semi: [0],
indent: ["off", 2],
"no-multi-spaces": "warn",
"no-prototype-builtins": "warn",
"no-undef": "warn",
"prefer-const": 0,
"key-spacing": [
0,
{
singleLine: {
beforeColon: false,
afterColon: true,
},
multiLine: {
beforeColon: true,
afterColon: true,
align: "colon",
},
},
],
},
};
新建 .eslintignore
文件, 里面填写不需要校验的文件或文件夹。
node_modules
/dist
StyleLint 配置
- StyleLint 配置文档
- StyleLint 规则列表
- stylelint-config-standard extends stylelint-config-recommended, 开启附加规则校验,强制执行
常见的CSS样式指南
(如:常用的CSS原则,谷歌的CSS样式指南、Airbnb的样式指南)中的一些常见风格校验。 - stylelint-order: css的排序规则,stylelint-config-recess-order是一个配置
stylelint-order
的样例。
新建 .stylelintrc.js
。
module.exports = {
extends: ["stylelint-config-standard", "stylelint-config-recess-order"],
plugins: ["stylelint-scss"],
defaultSeverity: "warning",
rules: {
// 校验规则略
},
};
新建 .stylelintignore
文件, 里面填写不需要校验的文件或文件夹。
效果
格式化工具
- vscode vue-format, 对包含jsx语法的文件支持度不好,不能配合git钩子进行校验,其它不错,可以支持按照标签属性个数进行格式化。
- vscode prettier
vscode vue模板使用vetur,setting中有个template选项,vetur.validation.template为true时会自动使用 eslint-plugin-vue
校验。
参考
- eslint与git钩子
- 最全的Eslint配置模板,从此统一团队的编程习惯
- vue eslint配置
- 使用ESLint+Prettier来统一前端代码风格
- VSCode + ESLint + Prettier 代码语法检查和格式化
作者:浮生如斯
链接:https://juejin.im/post/6891259855974170638
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文著作权归作者所有,如若转载,请注明出处
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com