代码规范流程

前端开发代码规范，无非两方面：代码质量与代码风格

代码质量，比如使用 === 替换 ==

代码风格，比如语句结束是否要加 ;

代码质量检查 js 使用 eslint，css 使用 stylelint

至于 ts、less、scss 都有相关的 linter 插件

代码风格检查通常使用 pretitter

eslint、stylelint、pretitter 一般的编辑器都会集成，比如 VSCode

编辑器集成的好处是自动检查代码规范且在控制台直观看到错误详情

这样可以边开发边修改,而不需要运行对应的命令进行手动检查再修改，浪费时间

当代码检查通过后，下面是提交到 Git

在 git commit 时再进行最后的代码规范检查，同编辑器自动检查不同

此时要用到 husky，它支持所有 Git Hooks

比如 pre-commit, 在 git commit 提交前自动执行脚本进行代码检查

husky 会检查本地所有的代码，这完全是浪费的

其实开发中只检查通过 git add 添加 Git 暂存库的代码即可，因为这部分代码是要提供到远程的

此时要用到 lint-staged，它的目的是针对暂存的 git 文件运行 linters，避免让不规范的代码提供到 Git

另外一点好处是会自动修复不规范的代码并且自动添加到 Git 暂存库

所以整个代码规范流程如下：

基于此的 代码规范 Demo (opens new window)

# 一些值得注意的

# eslint 的规则说明

eslint 规则来源有两种

一种官方内置的，比如 eslint:recommended 规则

还有一种来自于插件

内置的规则，直接使用规则名为 key，

来自于插件使用插件名/规则名 为 key

{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}

rules 规则的 value 值有以下几种：

1. 字符串： off, warn, error
2. 数字： 0, 1, 2
3. 数组： [a, b] // a 表示 off, warn, error, 0, 1, 2 中的一种， b 表示规则的可选项，比如是否开启规则的特殊情况等

off 映射 0 -> 关闭规则校验，没有规则限制

warn 映射 1 -> 开启规则校验，规则不对时，只提示，不退出程序

error 映射 2 -> 开启规则校验，规则不对时，退出程序

[0] 只有一个参数时，与 0, 1，2 相同

rules 规则规范：

1. 不以 no-，disallow- 等表示否定开头规则，表示允许 xxx， 必须符合规则条件才能通过
2. 以 no-，表示规则不允许 xxx，如果代码符合了 xxx，则不通过
3. 规则分为带配置与不带配置，不带配置，规则不允许有特例
4. 带配置规则，表示规则允许有特例，如果规则本身严格（要么是禁止，要么是允许，不允许特殊情况），通过配置项让其变得不严格
5. 如果规则本身不严格，通过配置让其严格

# eslint 负责代码质量，prettier 负责代码风格

eslint 虽然包括了代码质量、风格的检查

但代码风格的检查不太全面，所以开发中使用 prettier 进行代码风格检查

一句话，linter 只负责代码质量，代码风格交给 prettier

在使用 prettier 时需要解决与 eslint 中代码风格检查的冲突

需要安装 eslint-config-prettier (opens new window)

在 .eslintrc.* 文件的 extends 选项中禁用 eslint 的代码风格检查部分

{
  "extends": [
    "eslint:recommended",
    "prettier"
  ]
}

如果 eslint 的代码风格被 prettier 接管了

此时就不能在 eslintrc 文件 rules 下面配置代码风格规则了

因为它会使 prettier 规则配置不生效

所以，此时配置代码风格规则要在 .prettierrc.* 文件中配置

按理说，如果使用 stylelint 也要安装 stylelint-config-prettier 解决规则冲突

是的，有区别版本

在 eslint 15+ 版本之后就可以不再使用这个插件了

As of Stylelint v15 all style-related rules have been deprecated. If you are using v15 or higher and are not making use of these deprecated rules, this plugin is no longer necessary.

stylelint-config-prettier (opens new window) 包说明也提到了 15+ 版本之后与样式相关的规则被弃用

如果在 eslint 中没有用到就不需要安装 stylelint-config-prettier

# git commit 提交时未触发代码规范检查

比如删除了项目下的 .git 目录

此时重新 npx install husky 即可

# stylelint 检查出现 --allow-empty-input 警告

在 .lintstagedrc.* 添加 --allow-empty-input 参数

module.exports = {
  "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint"],
  "*.{css,less,scss,html}": ["prettier --write", "stylelint --allow-empty-input"]
}

# 小结

前端代码规范相关 npm 包众多

eslint, stylelint, prettier, husky, lint-staged

还有各自的相关插件

明白每个包的作用及相互关系即可

至于相关规则及配置用时查相关的文档

扫一扫，微信中打开