这是我参与「第四届青训营」笔记创作活动的的第5天

何为规范化约束？

在我看来对于编码其实就是对我们所写的代码进行一定的约束，从而保持争个团队的代码风格统一，质量不至于太差。

怎样进行规范化约束？

这主要可以借助工具来完成，现今已经有很多成熟可用的代码规范化工具可用了，比如：

JS代码检查：ESLint
Css代码检查：StyleLint
提交消息检查：CommitLint
代码格式化：Prettier

JS代码检查：ESLint

ESlint相关概念

parser

解析器，进行词法分析、语法分析生成 AST 语法树，默认的 parse 适用于 JS 项目。

如果需要其他功能，则可以使用额外的 parse 配置，如解析 TS 代码时使用 typescript-eslint/parser ，解析Vue SFC 时使用 vue-eslint-parser ,使用 babel 时使用 @babel/eslint-parser 等。

parserOptions

解析器的配置项，常用的属性：

ecmaVersion: 6：配置代码的 js 版本
sourceType: 'module'：允许使用export / import
ecmaFeatures: { jsx: true }：使用 jsx

ecmaVersion: 6开启了 ES6 的语法，但使用 ES6 中的新API（如 Map、Set 等）会报错，需要在env中进行设置。

rules

一条 rule 就是单独的一条规则，针对一个具体问题（如不允许使用 alert ）。

在 eslintrc 文件中，可以针对具体的 rule 定义其严重程度，取值为数字或单词：

0（off）
1（warn）
2（error）

此外还可以传入 options，用于灵活的配置规则

{
  rules: {
    'react/jsx-no-undef': [2, { allowGlobals: true }],
  }
}

plugins

一系列规则 rule 的合集，如一个 plugin 是用来规范变量命名的，那么它可能包含对于普通变量的 rule，对于组件命名的 rule，对于样式命名的 rule 等等。

extends

一系列 plugins 的合集。

env

设置代码的运行环境，如 node 环境还是 browser 环境，设置后使用对应的全局变量才不会报错。除了预定义的字段外，也可以开启某个 plugin 中的某种环境

{
  plugins:[ 'example' ],
  env: {
    node: true,               // 可以使用global
    browser: true,            // 可以使用window
    es6: true,                // 可以使用Set等新的数据类型，并自动开启es6语法
    "example/custom": true,   // 在特定plugin中开启某环境
  }
}

ESlint 在vue项目中的配置

{
  "root": true,  // 表示这是根配置，不再向上级目录寻找配置文件合并
  "env": {
    "browser": true,  // 开启window变量
    "es2021": true   // 开启最新es变量
  },
  // https://github.com/vuejs/vue-eslint-parser#parseroptionsparser
  "parser": "vue-eslint-parser",   // 配置vue解析器，这样才能解析vue单文件组件
  "parserOptions": {
    "parser": "@typescript-eslint/parser"  // 告诉 vue-eslint-parse ts 代码交由 @typescript-eslint/parser 处理
  },
  "plugins": ["@typescript-eslint"], // 配置ts规则
  "extends": [
    "plugin:@typescript-eslint/recommended",  // 使用ts建议规则
    // https://github.com/vuejs/eslint-plugin-vue/blob/44ff0e02cd0fd08b8cd7dee0127dbb5590446323/docs/user-guide/README.md#conflict-with-prettier
    "plugin:vue/vue3-recommended", // 使用vue3建议规则
    "prettier" // 使用prettier规则
  ],
  "ignorePatterns": ["**/dist", "**/types"], // 忽略的文件
  "rules": {
    "@typescript-eslint/no-var-requires": "off", // 允许普通require
    "vue/no-setup-props-destructure": "off", 
    "no-console": "warn"
  }
}

Css代码检查：StyleLint

同ESlint类似，使用方法如下：

{
  "extends": [
    "stylelint-config-standard", // 基础规则
    "stylelint-config-standard-scss", // scss基础规则
    "stylelint-config-recommended-vue", // vue建议规则
    "stylelint-config-recess-order", // css顺序规则
    "stylelint-config-prettier" // prettier规则
  ],
  "ignorePatterns": ["**/dist", "**/types"] // 忽略文件
}

代码格式化：Prettier

推荐使用编辑器扩展，并配置保存自动格式化

Git提交自动进行代码检查和格式化

项目中安装这两个开发依赖 husky、lint-staged，在项目package.json中配置如下(仅供参考)：

{
  ...
  "scripts": {
    "postinstall": "husky install",
    ...
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss,sass,less,styl}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "*.{json,yaml,yml,md}": [
      "prettier --write"
    ],
    "*.{vue}": [
      "eslint --fix",
      "stylelint --fix",
      "prettier --write"
    ]
  },
  ...
}

运行命令：npx husky add .husky/pre-commit "lint-staged"

前端工程化-规范化约束｜ 青训营笔记