• 在項(xiàng)目下安裝必要插件

//無論使用yarn還是npm，需要全局安裝eslint
npm install eslint -g 全局安裝
//如果你使用Npm
npm install  eslint babel-eslint eslint-plugin-react eslint-config-alloy -D
//如果你使用yarn
yarn add     eslint babel-eslint eslint-plugin-react eslint-config-alloy -D

• 在項(xiàng)目目錄下創(chuàng)建配置文件 - .eslintrc.js

//.eslintrc.js
module.exports = {
    extends: [//使用哪些默認(rèn)規(guī)則來檢查,由于我們安裝了 eslint-config-alloy 所以直接使用它的規(guī)則
        'alloy',
        'alloy/react',
    ],
    env: {
      browser: true,
      commonjs: true,
      es6: true
    },
    globals: {
      '$':true,//這里可以將一些全局變量忽略檢查,如果你沒有則可以不用配置
    },
    rules: {
      // 自定義你的規(guī)則,https://eslint.bootcss.com/docs/rules/ 可以查找規(guī)則
     'no-debugger':1,//比如發(fā)現(xiàn)debugger時(shí)只是警告，不要報(bào)錯(cuò)
     'indent': [1, 2], // 控制一個(gè)tab縮進(jìn)為2個(gè)空格
     'quotes': [1, 'single'], // 要求字符串使用單引號(hào)包裹
      
    }
};

• 配置vscode
  1、首先需要在vscode內(nèi)自己把eslint的插件安裝好
  2、在vscode的setting.json中增加配置

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",//增加了對(duì)react的支持
    ],
    // 開啟保存時(shí)自動(dòng)根據(jù)規(guī)則會(huì)修復(fù)一些問題，比如剛才我們配置了縮進(jìn)和單引號(hào)包裹字符串，那么這個(gè)時(shí)候會(huì)自動(dòng)格式化這些問題
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

• 排除某些文件夾或者文件不實(shí)用eslint檢測
  1、在需要不檢測的文件頭部增加 /* eslint-disable */ 注釋
  2、創(chuàng)建.eslintignore 文件，配置需要忽略的文件

  //.eslintignore 加入要過濾的文件夾和文件
  node_modules
  webpack.config.js
  

加入prettier來幫我們格式化代碼

1、首先vscode內(nèi)安裝好prettier插件
2、在項(xiàng)目根目錄下增加配置文件 prettier.config.js

module.exports={
  //簡單配置幾個(gè)常用的格式化方案
  tabWidth: 2,//1個(gè)tab用2個(gè)空格代替
  useTabs: false,
  printWidth: 120,
  semi:true,//末尾必須有分號(hào)
  singleQuote:true,//使用單引號(hào)包裹字符串
  jsxSingleQuote:true //jsx內(nèi)也使用單引號(hào)包裹字符串
  //其他規(guī)則可以在https://prettier.io/docs/en/options.html查詢
};

• 然后在vscode的setting.json內(nèi)增加配置

{
    "editor.formatOnSave": true,//當(dāng)保存的時(shí)候，自動(dòng)格式化
    //指定react和js都使用prettier來作為格式化工具
     "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}

好了接下來試試在編輯代碼后按保存看看
如果不想自動(dòng)格式化代碼，可以將 "editor.formatOnSave": false 然后通過鼠標(biāo)右鍵點(diǎn)擊格式化命令來隨時(shí)格式化

相關(guān)文件引用及推薦

• 從零構(gòu)建前端 ESLint 工作流（2020手把手版）
  https://mp.weixin.qq.com/s/fR5TD-ibsOffS9bo0l9iWA

• vscode ESLint 校驗(yàn)React
  http://www.itdecent.cn/p/f2fb689c6837

• eslint-config-alloy項(xiàng)目
  https://github.com/AlloyTeam/eslint-config-alloy/blob/master/README.zh-CN.md