如何配置 ESLint 工作流

一、從零配置 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
    }
}