从零构建前端 Lint 工作流（2020手把手版）

从零构建前端 Lint 工作流

eslint prettier stylelint husky lint-staged typescript eslint-config-alloy 为构建项目代码质量保驾护航。
传承 ESLint 推崇的插件化、配置化的理念，满足个性化需求（即让专业的工具做擅长的事）因此，各位可以选择自己需要的功能进行集成。
文章只发表于思否（不喜欢到处copy）各位有缘的老铁，点赞收藏支持一波哈（看到点赞收藏关注，有一种小鹿乱撞的美好）

选择性阅读

新手建议从头开始，都是手把手，按步骤配置一遍
有 ESLint 使用经验的，直接上 AlloyTeam 配置
让 ESLint 检查 TypeScript
VSCode 集成 ESLint 检查 => 自动提示/修复错误
结合 Prettier => 格式化文件
继续集成 Stylelint => 检查样式
本地 Lint 已构建，缺少 Git 提交代码预检

什么是代码检查

代码检查主要是用来发现代码错误、统一代码风格。
在 JavaScript 项目中，我们一般使用 ESLint 来进行代码检查，它通过插件化的特性极大的丰富了适用范围，搭配 typescript-eslint 之后，甚至可以用来检查 TypeScript 代码。

配置 ESLint

小试牛刀

1、新建一个文件夹，打开命令行，npm init -y创建package.json
2、安装依赖npm install --save-dev eslint babel-eslint eslint-config-alloy
3、在项目根目录下创建一个.eslintrc.js 或 .eslintrc.json的配置文件：

// .eslintrc.js
module.exports = {
    extends: [
        'alloy',
    ],
};

4、在项目根目录下创建一个index.js，复制下面内容：

var myName = 'Tom';
console.log(`My name is ${myNane}`);

5、在命令行输入npx eslint index.js

// eslint 报错信息：
✖ 2 problems (2 errors, 0 warnings)
error  Unexpected var, use let or const instead  no-var
error  'myNane' is not defined                   no-undef

6、使用npx eslint index.js --fix自动修复某些规则

// 这时 var 变成了 let
// 还剩下一个无法自动修复的错误 
✖ 1 problem (1 error, 0 warnings)
error  'myNane' is not defined  no-undef

配合 TypeScript

1、由于 ESLint 默认使用 Espree 进行语法解析，无法识别 TypeScript 的一些语法，故我们需要安装 @typescript-eslint/parser，替代掉默认的解析器，别忘了同时安装 typescript：

npm install --save-dev typescript @typescript-eslint/parser

2、接下来需要安装对应的插件 @typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充，提供了一些额外的适用于 ts 语法的规则。

npm install --save-dev @typescript-eslint/eslint-plugin

3、修改配置文件

module.exports = {
    extends: [
        'alloy',
    ],
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    rules: {
        // 禁止使用 var
        'no-var': "error",
        // 优先使用 interface 而不是 type
        '@typescript-eslint/consistent-type-definitions': [
            "error",
            "interface"
        ]
    }
}

以上配置中，我们自定义了两个规则，其中 no-var是 ESLint 原生的规则（我们刚刚已经用到了这个规则，它被包含在alloy中，此处会覆盖），@typescript-eslint/consistent-type-definitions 是 @typescript-eslint/eslint-plugin 新增的规则
规则的取值一般是一个数组（上例中的 @typescript-eslint/consistent-type-definitions），其中第一项是 off、warn 或 error 中的一个，表示关闭、警告和报错。后面的项都是该规则的其他配置。
如果没有其他配置的话，则可以将规则的取值简写为数组中的第一项（上例中的 no-var）。

关闭、警告和报错的含义如下：

关闭：禁用此规则
警告：代码检查时输出错误信息，但是不会影响到 exit code
报错：发现错误时，不仅会输出错误信息，而且 exit code 将被设为 1（一般 exit code 不为 0 则表示执行出现错误）

4、新建index.ts文件：

var myName = 'Tom';
console.log(`My name is ${myNane}`);
console.log(`My name is ${myName.toStrng()}`);
type Foo = {};

5、在命令行输入npx eslint index.ts，如下可以看到报错信息以及可修复项

  1:1   error  Unexpected var, use let or const instead  no-var
  2:27  error  'myNane' is not defined                   no-undef
  4:6   error  Use an `interface` instead of a `type`    @typescript-eslint/consistent-type-definitions

✖ 3 problems (3 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

脚本命令检查整个项目

1、根目录新建一个src文件夹，将我们的index.js和index.ts放进去
2、在package.json中的scripts新增：

{
    "scripts": {
        // 因为eslint不是全局安装的，所以要使用npx
        "lint": "npx eslint src --ext .js,.ts,tsx"
        // eslint 默认不会检查 .ts 后缀的文件，所以需要加上参数 --ext .ts
    }
}

3、然后npm run lint就可以看到src下所有指定后缀文件的报错信息

VSCode 集成 ESLint 检查

在编辑器中集成 ESLint 检查，可以在开发过程中就发现错误，甚至可以在保存时自动修复错误，极大的增加了开发效率

1、先安装 ESLint 插件，打开 VSCode 点击「扩展」按钮，搜索 ESLint，然后安装即可
2、在「文件 => 首选项 => 设置 => 工作区」中（也可以在项目根目录下创建一个配置文件 .vscode/settings.json），添加以下配置：

{
    // VSCode 中的 ESLint 插件默认是不会检查 `.vue`、`.ts` 或 `.tsx` 后缀的
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
        "typescript",
        "typescriptreact"
    ],
    // 开启保存时自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // 指定VSCode用于IntelliSense（智能感知）的ts版本，将内置版本更换为工作区版本
    "typescript.tsdk": "node_modules/typescript/lib"
}

结合 Prettier 使用

Prettier 是一个代码格式化工具，相比于 ESLint 中的代码格式规则，它提供了更少的选项，但是却更加专业。
AlloyTeam 推荐用 Prettier 管理格式化相关的规则，用 ESLint 来检查它更擅长的逻辑错误。

配置 Prettier

1、安装 Prettier

npm install --save-dev prettier

2、配置 .prettierrc.js 仅供参考：

// .prettierrc.js
module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'lf'
};

VSCode 集成 Prettier

1、在.vscode/settings.json中添加配置：

{
    // 保存时自动格式化所有支持文件 javascript/javascriptreact/typescript/typescriptreact/json/graphql
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
}

2、这时我们保存文件的时候，已经可以自动格式化了
3、也可以指定格式化文件类型：

{
    // Set the default
    "editor.formatOnSave": false,
    // Enable per-language
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    }
}

继续集成 Stylelint

顾名思义， Stylelint帮我们解决类css文件样式问题

Stylelint 规则分为三个类别

Possible errors：可以使用stylelint-config-recommended启用这些规则
Stylistic issues： stylelint-config-standard拓展了Possible errors，并启用此类的规则
Limit language features：其他规则，如果有需要，可以在rules里面配置
详尽的配置规则

Stylelint 配置

1、安装依赖

npm install --save-dev stylelint stylelint-config-standard stylelint-order

2、在项目根目录中创建一个.stylelintrc.js配置文件：

module.exports = {
    extends: [
        'stylelint-config-standard',
    ],
    plugins: ['stylelint-order'],
    rules: {
        // ...
    }
};

stylelint-config-standard是stylelint的推荐配置
stylelint-order是 css 属性排序插件

3、npx stylelint "**/*.css" 尝试检查 css 文件

支持 SCSS