如何配置 ESLint 工作流

Posted 2020-12-18 chase-star

一、从零配置 ESLint 工作流

• eslint prettier stylelint husky lint-staged typescript babel-eslint eslint-config-airbnb-base

  eslint-config-alloy 为构建项目代码质量保驾护航。

• 传承 ESLint 推崇的插件化、配置化的理念，满足个性化需求（即让专业的工具做擅长的事）因此，各位可以选择自己需要的功能进行集成。

二、什么是代码检查

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

三、配置 ESLint

　　1、新建一个文件夹，打开命令行 npm init -y 创建属于新项目的 package.json

　　2、安装依赖 npm i eslint babel-eslint eslint-config-alloy -S  （这里以腾讯eslint库为例，eslint-config-airbnb-base 为 airbnb 团队的 eslint 库 ）

　　3、在项目根目录下创建一个  .eslintrc.js 或者  .eslintrc.json 的配置文件，如下：

// .eslintrc.js
module.exports = {
    extends: [
        ‘babel-eslint‘,
    ],
};

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

var myName = ‘Jack‘
console.log(`My name is ${myNane}`)

5、在命令行输入 npx eslint index.js , 当使用 npx 时，webpack 会自动去找 node_modules中的 eslint/lib/index，（npm 需要指定地址）从而执行命令

// 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"
    }
}

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下所有指定后缀文件的报错信息

推荐使用 AlloyTeam 的配置

1、安装技术栈相关依赖

// 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

2、配置.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: {
        // 自定义你的规则
    }
};

3、接下来就可以直接用eslint命令检查文件了
4、这样就引入了alloy团队的lint规则了，然后可以用rules覆盖你不爽的规则，直接采用开源规则是为了避免重复造轮子，你也可以选择别的团队，或者自己定义一套

结合 Prettier 使用

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

配置 Prettier

1、安装 Prettier

npm install -S 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
    }
}