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

从零构建前端 Lint 工做流

• eslint prettier husky lint-staged typescript eslint-config-alloy 为构建项目代码质量保驾护航
• 传承 ESLint 推崇的插件化、配置化的理念，知足个性化需求（即让专业的工具作擅长的事）

选择性阅读

• 新手建议从头开始，都是手把手，按步骤配置一遍
• 有 ESLint 使用经验的，直接上 AlloyTeam 配置
• 让 ESLint 检查 TypeScript
• 想集成 VSCode 插件，自动提示/修复错误-->VSCode 集成 ESLint 检查
• 本地 Lint 已构建，缺乏 Git 提交代码预检

什么是代码检查

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

配置 ESLint

小试牛刀

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

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

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

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

五、在命令行输入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

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

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

配合 TypeScript

一、因为 ESLint 默认使用 Espree 进行语法解析，没法识别 TypeScript 的一些语法，故咱们须要安装 @typescript-eslint/parser，替代掉默认的解析器，别忘了同时安装 typescript：

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

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

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

三、修改配置文件

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 则表示执行出现错误）

四、新建index.ts文件：

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

五、在命令行输入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.

脚本命令检查整个项目

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

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

三、而后npm run lint就能够看到src下全部指定后缀文件的报错信息

推荐使用 AlloyTeam 的配置

• 上面手把手完成了ESLint的配置过程
• 有必定经验的推荐直接使用AlloyTeam实现可自定义拓展的ESLint规则
• AlloyTeam/eslint-config-alloy已经帮咱们集成了各类技术栈

一、安装技术栈相关依赖

// Eslint
npm install --save-dev eslint babel-eslint eslint-config-alloy
// React
npm install --save-dev eslint babel-eslint eslint-plugin-react eslint-config-alloy
// Vue
npm install --save-dev eslint babel-eslint vue-eslint-parser eslint-plugin-vue eslint-config-alloy
// TypeScript
npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloy
// TypeScript React
npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-config-alloy

二、配置.eslintrc.js文件

/* .eslintrc.js */
module.exports = {
    extends: [
        'alloy', // 都须要
        'alloy/vue', //vue项目须要
        'alloy/react', //react项目须要
        'alloy/typescript', //ts项目须要
    ],
    env: {
        // 你的环境变量（包含多个预约义的全局变量）
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // 你的全局变量（设置为 false 表示它不容许被从新赋值）
        //
        // myGlobal: false
    },
    rules: {
        // 自定义你的规则
    }
};

三、接下来就能够直接用eslint命令检查文件了
四、这样就引入了alloy团队的lint规则了，而后能够用rules覆盖你不爽的规则，直接采用开源规则是为了不重复造轮子，你也能够选择别的团队，或者本身定义一套

VSCode 集成 ESLint 检查

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

一、先安装 ESLint 插件，打开 VSCode 点击「扩展」按钮，搜索 ESLint，而后安装便可
二、在「文件 => 首选项 => 设置 => 工做区」中（也能够在项目根目录下建立一个配置文件 .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

一、安装 Prettier

npm install --save-dev prettier

二、配置 .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

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

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

二、这时咱们保存文件的时候，已经能够自动格式化了
三、也能够指定格式化文件类型：

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

Git 代码预检

• 上面咱们配置了ESLint、Prettier集成了VSCode插件，实现了错误提示和保存自动修复
• 然而自动修复的只是小部分，若是团队成员不按规范，依然能够将不规范的代码推送至远程代码库
• 咱们经过Git 代码预检，必定程度防止不规范的代码被提交

实现过程

1. 待提交的代码
2. git add 添加到暂存区
3. 执行 git commit（这时进行代码预检）
4. husky注册在git pre-commit的钩子调起 lint-staged
5. lint-staged 取得全部被提交的文件依次执行写好的任务
6. 若是有错误（没经过ESlint检查）则中止任务，等待下次commit，同时打印错误信息
7. 成功提交后，git push推送到远程库

什么是 git hook

• git hook就是.git文件夹的hooks下的一些钩子函数，特定时机他们将被调用
• 查看全部 git 钩子函数：

cd .git/hooks
ls -l
// 打印以下：
total 96
-rwxr-xr-x  1 zzc  staff   478 10 21  2019 applypatch-msg.sample
-rwxr-xr-x  1 zzc  staff   896 10 21  2019 commit-msg.sample
-rwxr-xr-x  1 zzc  staff  3327 10 21  2019 fsmonitor-watchman.sample
-rwxr-xr-x  1 zzc  staff   189 10 21  2019 post-update.sample
-rwxr-xr-x  1 zzc  staff   424 10 21  2019 pre-applypatch.sample
-rwxr-xr-x  1 zzc  staff  1638 10 21  2019 pre-commit.sample
-rwxr-xr-x  1 zzc  staff  1348 10 21  2019 pre-push.sample
-rwxr-xr-x  1 zzc  staff  4898 10 21  2019 pre-rebase.sample
-rwxr-xr-x  1 zzc  staff   544 10 21  2019 pre-receive.sample
-rwxr-xr-x  1 zzc  staff  1492 10 21  2019 prepare-commit-msg.sample
-rwxr-xr-x  1 zzc  staff  3610 10 21  2019 update.sample

• .sample为各个钩子的案例脚本，能够把sample去掉，直接编写shell脚原本执行。
• 而前端能够用插件husky与pre-commit，来使钩子生效。

husky 注册 git hook

Requires Node >= 10 and Git >= 2.13.0.

• husky新老版本的配置方式和使用变化较大，老版本请自行升级，详见 husky

一、安装 husky

npm install husky --save-dev

二、编辑 package.json 文件：

{
    "husky": {
        "hooks": {
            "pre-commit": "eslint src/**/*.js"
        }
    },
}

三、尝试 git commit 提交，就会先执行eslint src/**/*.js，代码没有问题才会被真正提交
四、这样每次提交代码，eslint都会检查全部文件，若是报错过多，必定会崩溃

lint-staged 只 Lint 改动代码

lint-staged requires Node.js version 10.13.0 or later.

• v10.0.0 之后对原始暂存文件的任何新修改都将自动添加到提交中。若是您的任务之前包含一个git add步骤，请删除此步骤，同时运行多个git操做一般会致使错误，详见 lint-staged

一、安装 lint-staged

npm install lint-staged --save-dev

二、新增 package.json 配置：

{
    "lint-staged": {
        "src/**/*.js": "eslint"
    }
}

三、如此husky只负责注册git hook，后续操做交给lint-staged，只对改动的文件执行任务，并且能够很方便
地配置多条命令：

{
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "src/**/*.js": ["eslint --fix", "prettier --write"]
    }
}

四、如上，咱们提交代码以前，程序会自动修复eslint配置，格式化prettier配置

几点建议

• 建议代码提交只作检查和测试，拦截问题代码比较好，仍是在保存时，自动修复eslint、prettier配置，并且大部分还须要手动修复才行
• 实在紧急，也可经过git commit -m -n "跳过代码代码预检"跳过检查，慎用
• 和构建有关的包建议使用--save-dev安装在项目内部
• 老版本husky lint-staged配置都放在package.json中，如今eslint prettier husky lint-staged都支持多种后缀配置文件，建议采用.js统一格式，也方便拓展：

统一配置文件格式

// .eslintrc.js
module.exports = {
    extends: [
        'alloy',
    ],
};
// .prettierrc.js
module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // ...
};
// .huskyrc.js
module.exports = {
  'hooks': {
    'pre-commit': "lint-staged"
  }
}
// .lintstagedrc.js
module.exports = {
  "src/**/*.{js,ts}": "eslint"
}

拓展现例

• .huskyrc.js

// 数组方式配置多条命令
const tasks = arr => arr.join(' && ')
module.exports = {
  'hooks': {
    'pre-commit': tasks([
      'npm run lint',
      'npm test'
    ])
  }
}

• .lintstagedrc.js

module.exports = {
    // 若是超过10个暂存文件，则在整个存储库上运行eslint
    '**/*.js?(x)': (filenames) =>
    filenames.length > 10 ? 'eslint .' : `eslint ${filenames.join(' ')}`,
    "*.css": "stylelint",
    "*.scss": "stylelint --syntax=scss",
    // 对ts文件运行tsc，但不传递任何参数
    '**/*.ts?(x)': () => 'tsc -p tsconfig.json --noEmit'
}