为了提高整体开发效率，首先要将一些代码规范考虑在内，需要保持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"
}
标签：npm,stylelint,工程,space,--,前端,空格,eslint,工具 From： https://www.cnblogs.com/wpshan/p/18546817