前言

eslint作為代碼檢查工具，已經(jīng)融入了現(xiàn)代前端開(kāi)發(fā)中了。因此，熟悉eslint配置是非常重要的。

vscode支持eslint自動(dòng)格式化

必須禁用如Vetur，Volar等插件，否則ESLint會(huì)無(wú)效

安裝eslint依賴包

yarn add -D eslint @babel/eslint-parser

eslint配置

• 一般使用@babel/eslint-parser作為parser，若使用typescript，則一般使用@typescript-eslint/parser
• typescript插件@typescript-eslint
• react插件eslint-plugin-react-hooks

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    node: true,
    es6: true
  },
  parser: '@babel/eslint-parser',
  parserOptions: {
    ecmaVersion: 2022,
    sourceType: 'module'
  },
  rules: {
    indent: [2, 2], // 縮進(jìn)2個(gè)空格
    semi: [2, 'never'], // 要求或禁止使用分號(hào)代替 ASI,即禁用行尾使用分號(hào)
    quotes: [2, 'single'], // 使用單引號(hào)
    'no-mixed-spaces-and-tabs': [2], // 禁止空格和 tab 的混合縮進(jìn)
    'no-extra-semi': [2], // 禁止不必要的分號(hào)
    'comma-dangle': [2, 'never'] // 禁止末尾逗號(hào)
  }
}

vscode配置

{
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "eslint.codeActionsOnSave.mode": "all",
  "eslint.format.enable": true,
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

使用prettier

ESLint主要解決了兩類(lèi)問(wèn)題，但ESLint主要解決的是代碼質(zhì)量問(wèn)題。另外一類(lèi)問(wèn)題，ESLint并沒(méi)有做完全，因?yàn)檫@些問(wèn)題"沒(méi)那么重要"，代碼質(zhì)量出現(xiàn)問(wèn)題意味著程序有潛在bug，而風(fēng)格問(wèn)題充其量是看著不爽而已。這時(shí)候就出現(xiàn)了prettier，prettier認(rèn)為格式很重要，但是格式很麻煩，于是我來(lái)幫你解決。諸如是用單引號(hào)還是雙引號(hào)，需要用分號(hào)結(jié)尾，還是不需要等等問(wèn)題。prettier還給予了一部分配置項(xiàng)，可以通過(guò).prettierrc配置修改。

所以相當(dāng)于prettier接管了兩個(gè)問(wèn)題其中的代碼格式問(wèn)題，而使用ESLint + Prettier就完完全全解決了這兩個(gè)問(wèn)題。但實(shí)際使用起來(lái)容易出現(xiàn)沖突，所以：

1. 我們首先使用eslint-config-prettier來(lái)關(guān)掉（disable）所有和prettier沖突的ESLint的配置（這部分配置就是上面說(shuō)的，格式問(wèn)題的配置，所以關(guān)掉不會(huì)有問(wèn)題），方法就是在 .eslintrc 里面將 prettier 設(shè)為最后一個(gè) extends

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

2. (可選，推薦) 然后再啟用 eslint-plugin-prettier ，將 prettier 的 rules 以插件的形式加入到 ESLint 里面。這里插一句，為什么"可選" ？當(dāng)你使用 Prettier + ESLint 的時(shí)候，其實(shí)格式問(wèn)題兩個(gè)都有參與，disable ESLint 之后，其實(shí)格式的問(wèn)題已經(jīng)全部由 prettier 接手了。那我們?yōu)槭裁催€要這個(gè) plugin？其實(shí)是因?yàn)槲覀兤谕麍?bào)錯(cuò)的來(lái)源依舊是 ESLint ，使用這個(gè)，相當(dāng)于把 Prettier 推薦的格式問(wèn)題的配置以 ESLint rules 的方式寫(xiě)入，這樣相當(dāng)于可以統(tǒng)一代碼問(wèn)題的來(lái)源。

// .eslintrc    
{      
    "plugins": ["prettier"],      
    "rules": {        
        "prettier/prettier": "error"      
    }    
}

將上面兩個(gè)步驟和在一起就是下面的配置，也是官方的推薦配置

// .eslintrc
{
  "extends": ["plugin:prettier/recommended"]
}