近期有做 eslint 統(tǒng)一代碼風(fēng)格的事情，結(jié)合自己的沉淀和網(wǎng)上的解決方案，分享一套 針對 react + typescript的 eslint 配置方案，配置完成后可以檢測代碼，統(tǒng)一代碼風(fēng)格，VScode 保存自動格式化代碼。

1、使用 Eslint 來規(guī)范 typescript 代碼
安裝依賴：

npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

這三個(gè)依賴分別是：
eslint: ESLint 的核心代碼
@typescript-eslint/parser：ESLint 的解析器，用于解析typescript ，從而檢查和規(guī)范 Typescript代碼
@typescript-eslint/eslint-plugin：這是一個(gè) ESLint 插件，包含了各類定義好的檢測 Typescript 代碼的規(guī)范

在項(xiàng)目根目錄下新建 .eslintrc.js 文件,代碼暫時(shí)如下

module.exports = {
    env:{                          //指定代碼的運(yùn)行環(huán)境
        browser: true,
        node: true,
    },
    parser:  '@typescript-eslint/parser', //定義ESLint的解析器
    extends: ['plugin:@typescript-eslint/recommended'],//定義文件繼承的子規(guī)范
    plugins: ['@typescript-eslint'],//定義了該eslint文件所依賴的插件                        
}

由于是 typescript 項(xiàng)目,所以 parser 需要配置成 @typescript-eslint/parser 才能正確檢測代碼。
其次 env 是配置環(huán)境，比如 console 只有在 browser 環(huán)境才存在，如果不配置的話可能會標(biāo)紅報(bào)錯。

2、使用 Eslint 規(guī)范 React 代碼
安裝依賴：

npm i -D eslint-plugin-react

接著在 .eslintrc.js 中配置如下：

module.exports = {
    env:{                         
        browser: true,
        node: true,
    },
    parser:  '@typescript-eslint/parser',
    extends: [
    'plugin:react/recommended'  
    'plugin:@typescript-eslint/recommended'
    ],                              //使用推薦的React代碼檢測規(guī)范
    plugins: ['@typescript-eslint'],
    settings: {             //自動發(fā)現(xiàn)React的版本，從而進(jìn)行規(guī)范react代碼
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    }, 
    parserOptions: {        //指定ESLint可以解析JSX語法
        "ecmaVersion": 2019,
        "sourceType": 'module',
        "ecmaFeatures":{
            jsx:true
        }
    },
    rules: {
        // 可以定義react 編碼規(guī)則
    }
}

3、結(jié)合 Prettier 規(guī)范代碼
安裝依賴

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

Prettier：Prettier插件的核心代碼
eslint-config-prettier：解決 ESLint 中的樣式規(guī)范和 Prettier 中樣式規(guī)范的沖突，以 Prettier的樣式規(guī)范為準(zhǔn)
eslint-plugin-prettier：將 Prettier 作為 ESLint 規(guī)范來使用

根目錄下創(chuàng)建 .prettierrc.js 文件，配置如下：

module.exports =  {
  "eslintIntegration": true,
  "printWidth": 150, // 每行代碼長度（默認(rèn)80）
  "tabWidth": 2, // 每個(gè)tab相當(dāng)于多少個(gè)空格（默認(rèn)2）
  "useTabs": false, // 是否使用tab進(jìn)行縮進(jìn)（默認(rèn)false）
  "singleQuote": true, // 使用單引號（默認(rèn)false）
  "semi": true, // 聲明結(jié)尾使用分號(默認(rèn)true)
  "trailingComma": "none", // 多行使用拖尾逗號（默認(rèn)none）
  "bracketSpacing": true, // 對象字面量的大括號間使用空格（默認(rèn)true）
  "jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的結(jié)尾，而不是另起一行（默認(rèn)false）
  "arrowParens": "avoid" // 只有一個(gè)參數(shù)的箭頭函數(shù)的參數(shù)是否帶圓括號（默認(rèn)avoid）
};

修改 .eslintrc.js 文件，引入 Prettier

module.exports = {
  env: {
    browser: true,
    node: true
  },
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ], //使用推薦的React代碼檢測規(guī)范
  plugins: ['@typescript-eslint'],
  settings: {
    //自動發(fā)現(xiàn)React的版本，從而進(jìn)行規(guī)范react代碼
    react: {
      pragma: 'React',
      version: 'detect'
    }
  },
  parserOptions: {
    //指定ESLint可以解析JSX語法
    ecmaVersion: 2019,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    semi: ['error', 'always'],
    eqeqeq: 'off',
    'linebreak-style': ['error', 'unix'],
    'no-useless-call': 'off',
    'space-before-function-paren': ['error', { anonymous: 'always', named: 'never', asyncArrow: 'always' }]
  }
};

4、 結(jié)合VScode
安裝 VScode 插件 ESlint Prettier
然后配置 setting.json

"editor.tabSize": 2,
"editor.detectIndentation": false, // 全部統(tǒng)一成2空格縮進(jìn)
"eslint.enable": true,  //是否開啟vscode的eslint
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"eslint.options": {    //指定vscode的eslint所處理的文件的后綴
"extensions": [
    ".js",
  ".jsx",
    ".ts",
    ".tsx"
]
},
"eslint.validate": [     //確定校驗(yàn)準(zhǔn)則
    "javascript",
    "javascriptreact",
    "html",
    "typescript",
    "typescriptreact"
],

至此，重新啟動 VScode 就能看到效果，command + s 保存文件的時(shí)候回自動補(bǔ)全代碼。

5、兼容老項(xiàng)目
針對老項(xiàng)目中有 .js 和 .jsx 混合的文件，可以在根目錄下新建 .eslintignore 配置如下：

**/*.js
**/*.jsx

這樣下來， eslint 就會忽略所有的 .js 和 .jsx 文件的校驗(yàn)。

6、使用 husky lint-staged 來控制 git 提交之前的校驗(yàn)
其中 husky 可以配置git 提供的鉤子，比如 pre-commit pre-push 等。
lint-staged 是 git add . 之后“暫存” 狀態(tài)的文件，也就是本次 git 提交的文件
安裝依賴

npm i -D husky lint-staged

在 package.json 文件配置如下：

 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint"
  }

這樣配置好之后，在提交 git 的時(shí)候，修改的文件如果沒有修復(fù) eslint 的報(bào)錯，就會無法提交。

坑："*.{js,jsx,ts,tsx}": "eslint" 這里的配置{js,jsx,ts,tsx} 逗號后面不能空格，否則匹配不到文件,逗號后面不能空格，否則匹配不到文件,逗號后面不能空格，否則匹配不到文件!!!

特殊辦法： 可以在后面加 --no-verify 跳過驗(yàn)證