前端工程工具链
为了提高整体开发效率，首先要将一些代码规范考虑在内，需要保持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" }
