我的项目中须要对代码进行格式化，并且对代码进行校验。能够通过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-stagednpm i -D prettiernpm i -D eslint-plugin-prettiernpm i -D eslint-config-prettiernpm i -D eslintnpm i -D eslint-plugin-standardnpm i -D eslint-plugin-vuenpm i -D stylelintnpm i -D stylelint-scssnpm i -D stylelint-config-standardnpm i -D stylelint-config-recess-orderhusky相应配置
将上面配置拷贝到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/distStyleLint 配置
- 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 代码语法检查和格式化