为了提高整体开发效率，首先要将一些代码规范考虑在内，需要保持git仓库的代码就像是一个人写出来的。根据团队习惯，考虑后使用组合工具：eslint + stylelint + prettier + husky。
- eslint: 对js做规则约束。强制校验
- stylelint: 对css做规则约束
- prettier: 代码格式化。强制格式化
- husky：本地的git钩子工具
另外敏捷开发过程中，代码复查是至关重要的一环，团队需要使用工具辅助代码分析。经比较和实践后，使用工具：jsinspect + jscpd
- jsinspect: 对js或jsx代码做重复检测。强制校验
- jscpd: 对代码重复率进行报告总结，辅助代码复查
eslint
1. 安装
npm install --save-dev eslint eslint-plugin-vue babel-eslint
2. .eslintrc.js配置
module.exports = {root: true,// 指定代码的运行环境。不同的运行环境，全局变量不一样 env: {browser: true,node: true},parserOptions: {// ESLint 默认使用Espree作为其解析器,安装了 babel-eslint 用来代替默认的解析器parser: 'babel-eslint'},// 使得不需要自行定义大量的规则 extends: [// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.'plugin:vue/essential'],// 插件 plugins: ['vue'],// add your custom rules here rules: {// allow async-await'generator-star-spacing': 'off',// allow debugger during development'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off','indent': [2, 4, { 'SwitchCase': 1 }],...}}
3. 提交前强制校验
将约束命令放置在提交代码前检查，这就要使用husky这个工具，该工具能在提交代码precommit时调用钩子命令。
"scripts": {"lint": "eslint --ext .js,.vue --ignore-path .gitignore .","precommit": "npm run lint" }
prettier
- 安装
npm install --save-dev prettier
.prettierrc.js配置
module.exports = {printWidth: 100, // 设置prettier单行输出（不折行）的（最大）长度 tabWidth: 4, // 设置工具每一个水平缩进的空格数 useTabs: false, // 使用tab（制表位）缩进而非空格 semi: false, // 在语句末尾添加分号 singleQuote: true, // 使用单引号而非双引号 trailingComma: 'none', // 在任何可能的多行中输入尾逗号 bracketSpacing: true, // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格 arrowParens: 'avoid', // 为单行箭头函数的参数添加圆括号，参数个数为1时可以省略圆括号 parser: 'babylon', // 指定使用哪一种解析器 jsxBracketSameLine: true, // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素） rangeStart: 0, // 只格式化某个文件的一部分 rangeEnd: Infinity, // 只格式化某个文件的一部分 filepath: 'none', // 指定文件的输入路径，这将被用于解析器参照 requirePragma: false, // (v1.7.0+) Prettier可以严格按照按照文件顶部的一些特殊的注释格式化代码，这些注释称为“require pragma”(必须杂注) insertPragma: false, // (v1.8.0+) Prettier可以在文件的顶部插入一个 @format的特殊注释，以表明改文件已经被Prettier格式化过了。 proseWrap: 'preserve' // (v1.8.2+) }
3. 提交前强制格式化
在提交git时需要对整个项目执行format格式化，使得代码强制统一。格式化之后再用eslint检查语法错误，无误后把格式化后的代码用git add .添加进入。如果有错误直接中断提交。
"scripts": {"format": "prettier --write './**/*.{js,ts,vue,json}'","lint": "eslint --ext .js,.vue --ignore-path .gitignore .","precommit": "npm run format && npm run lint && git add ." }
stylelint
安装
npm install --save-dev stylelint
使用
-
新增
.stylelintrc文件 -
在文件中设置规则，以下是笔者部门使用的css规范
{"rules": {# 缩进 4 个空格"indentation": 4,# 去掉小数点前面的 0"number-leading-zero": "never",# 使用双引号"string-quotes": "double",# 每个属性声明末尾都要加分号"declaration-block-trailing-semicolon": "always",# 属性值 0 后面不加单位"length-zero-no-unit": true,# 对空行的处理# 第一条属性声明前不允许有空行"declaration-empty-line-before": ["never",{ ignore: [ "after-declaration" ] }],# 每个样式规则前后都有空行，除了第一条规则与规则前有注释"rule-empty-line-before": ["always",{ except: [ "after-single-line-comment", "first-nested" ] }],# 在结尾 "}" 之前不允许有空行"block-closing-brace-empty-line-before": [ "never" ],# "@" 语句之前都有空行，但是忽略 "@" 语句在代码块中间与同个非代码块 "@" 语句之间的空行这两种情况"at-rule-empty-line-before": ["always",{ ignore: [ "inside-block", "blockless-after-same-name-blockless" ] }],# 不允许超过一行的空行"max-empty-lines": 1,# 每行句末不允许有多余空格"no-eol-whitespace": true,# 文件末尾需要有一个空行"no-missing-end-of-source-newline": true,# 大小写处理"unit-case": "lower","color-hex-case": "upper","value-keyword-case": "lower","function-name-case": "lower","property-case": "lower","at-rule-name-case": "lower","selector-pseudo-class-case": "lower","selector-pseudo-element-case": "lower","selector-type-case": "lower","media-feature-name-case": "lower",# 对空格的处理# "{" 前必须有空格"block-opening-brace-space-before": "always",# 注释 "/*" 后和 "*/" 前必须有空格"comment-whitespace-inside": "always",# 属性名 ":" 后必须有空格"declaration-colon-space-after": "always",# 属性名 ":" 前不能有空格"declaration-colon-space-before": "never",# 声明属性末尾 ";" 前不能有空格"declaration-block-semicolon-space-before": "never",# 属性值中的 "," 后必须有空格"function-comma-space-after": "always",# 选择器例如 ">、+、~" 前后必须要有空格"selector-combinator-space-before": "always","selector-combinator-space-after": "always",# 分隔多个选择器之间的 "," 后必须有空格"selector-list-comma-space-after": "always",# 分隔多个选择器之间的 "," 前不能有空格"selector-list-comma-space-before": "never",# 子代选择器之间没有额外空格"selector-descendant-combinator-no-non-space": true,# 多个属性值之间的 "," 后必须有空格"value-list-comma-space-after": "always",# 多个属性值之间的 "," 前不能有空格"value-list-comma-space-before": "never",# 媒体查询中设置断点宽度里的 ":" 后必须有空格"media-feature-colon-space-after": "always",# 媒体查询中设置断点宽度里的 ":" 前不能有空格"media-feature-colon-space-before": "never"} }
规则检查
stylelint 'src/**/*.vue' --fix
stylelint命令有时候无法解析到，因为使用了全局的sylelint，这时可以指定相对路径
./node_modules/.bin/stylelint
提交git时检查
需要用到插件husky,该插件会在git提交时，执行npm run precommit命令，所以需要在package.json中添加如下代码检查：
"lint": "eslint --quiet --ext .js,.vue src", "style": "stylelint 'src/**/*.vue' --fix", "precommit": "npm run lint && npm run style",
添加例外
在stylelint使用过程中，有时候会对某条css添加例外，不要适用规则或部分规则
关闭全部规则：
/* stylelint-disable */ a {} /* stylelint-enable */
关闭部分规则：
/* stylelint-disable selector-no-id, declaration-no-important */ #id {color: pink !important; } /* stylelint-enable */
自动修复
有些项目是开发到一半时，添加了StyleLint进行css约束，这时候需要自动化对不满足条件的Rule进行修复，如下是使用到的几种：
1.--fix命令
该命令能fix大部分格式问题，具体哪些规则可以自动fix可以看这里
2.Vetur插件--格式化文件
优点是可以统一格式化文件，缺点是只能单个文件操作
3.vscode-stylefmt插件
类似Vetur插件，但该插件可定制化更多，详情请移至github
4.stylefmt
该工具也是官方推荐，可以批量修改，使用如下命令修改，详情见 github
stylefmt --stdin-filename input.css
jsinspect
1. 安装
npm install jsinspect --save-dev
2. 提交前强制校验
"scripts": {"format": "prettier --write './**/*.{js,ts,vue,json}'","lint": "eslint --ext .js,.vue --ignore-path .gitignore .","inspect": "jsinspect -t 50 ./src","precommit": "npm run format && npm run lint && npm run inspect && git add ." }
jscpd
1. 安装
npm install jscpd --save-dev
2. 代码复查辅助命令
"scripts": {"codereview": "jscpd ./src" }
