Eslint相關(guān)?

在vscode中使用eslint插件

在vscode中用戶(hù)配置沒(méi)有開(kāi)啟eslint.enable

在vscode中工作區(qū)配置開(kāi)啟eslint.enable

settings.json中沒(méi)有做eslint相關(guān)配置

在編寫(xiě)的vue文件中a這個(gè)變量沒(méi)有使用應(yīng)該是報(bào)錯(cuò)的，eslint插件是開(kāi)啟的

應(yīng)該如何解決開(kāi)啟了eslint插件卻沒(méi)有檢測(cè)代碼沒(méi)有生效？

有兩種方式可以讓eslint插件生效：

開(kāi)啟用戶(hù)配置中的eslint.enable，這個(gè)開(kāi)關(guān)如果沒(méi)打開(kāi)的話(huà)，即使我們配置了Eslint，檢測(cè)代碼也不會(huì)生效。

在settings.json文件中配置

{
"eslint.enable": true
}

代碼檢測(cè)功能馬上就會(huì)生效

ps: 為什么會(huì)出現(xiàn)上面這兩種情況？個(gè)人猜測(cè)，如果項(xiàng)目中存在settings.json文件，eslint插件優(yōu)先讀取settings.json的配置，發(fā)現(xiàn)沒(méi)有配置，就去檢查用戶(hù)配置，發(fā)現(xiàn)用戶(hù)配置沒(méi)有開(kāi)啟就啟動(dòng)檢測(cè)代碼功能，如果發(fā)現(xiàn)有配置，并且配置未"eslint.enable": true就開(kāi)啟代碼檢測(cè)

eslint插件自動(dòng)格式化代碼

在.eslintrc的rules里我們可以配置自己的規(guī)則，比如我們想要在項(xiàng)目里統(tǒng)一使用單引號(hào)的格式（默認(rèn)是雙引號(hào)），我們可以進(jìn)行如下配置：

   {
    "rules": {
        quotes: ["error", "single"]
    }

可是配置完發(fā)現(xiàn)文件都標(biāo)紅了，因?yàn)槲募J(rèn)都是用的雙引號(hào)，一個(gè)個(gè)改成單引號(hào)又很麻煩，有沒(méi)有什么簡(jiǎn)單的方法呢？

我們可以通過(guò)在設(shè)置中配置editor.codeActionsOnSave在我們進(jìn)行保存的時(shí)候自動(dòng)格式化代碼。

打開(kāi)了.vscode目錄下的settings.json文件，我們?cè)谶@個(gè)文件里添加如下代碼：

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
}

這個(gè)配置表示在我們保存的時(shí)候自動(dòng)執(zhí)行fix操作，且使用的是eslint進(jìn)行fix操作。做完這個(gè)配置后我們?cè)趧偛艠?biāo)滿(mǎn)紅波浪線的文件夾中點(diǎn)擊保存，發(fā)現(xiàn)雙引號(hào)都被自動(dòng)替換為單引號(hào)了，紅波浪線全部消失了。
做完以上配置那么我們的項(xiàng)目已經(jīng)可以用VsCode進(jìn)行代碼檢測(cè)了，點(diǎn)擊保存的時(shí)候也會(huì)幫你自動(dòng)格式化一部分代碼。

Prettier相關(guān)

上面通過(guò)Eslint已經(jīng)可以檢測(cè)代碼了也可以做自動(dòng)格式化了，為什么還需要Prettier呢？因?yàn)樗麄兊膫?cè)重點(diǎn)其實(shí)是不同的，Eslint主要用于檢測(cè)代碼質(zhì)量，幫你發(fā)現(xiàn)代碼中的錯(cuò)誤，而Prettier主要是檢測(cè)代碼格式，也就是檢測(cè)你的代碼美不美觀，比如下面這行代碼：

const a   ='1';

可以看到a和等號(hào)中間有很多空格，看起來(lái)很不美觀，Eslint是不會(huì)幫你調(diào)整格式的，這個(gè)工作就需要交給Perttier來(lái)做。

安裝Prettier插件

到vscode的extension選項(xiàng)卡中搜索Prettier安裝即可，安裝完成后有的人是可以直接保存代碼，然后代碼就會(huì)格式化，這是因?yàn)槟愕木庉嬈髦坝性O(shè)置過(guò)Format On Save這個(gè)選項(xiàng)

如果你在上面的Format On Save沒(méi)有選中，可以直接到settings.json文件中添加如下代碼：（個(gè)人推薦）
"editor.formatOnSave": true,起碼你知道是你配置了起了作用，如果去修改用戶(hù)和工作區(qū)的Format On Save會(huì)導(dǎo)致新項(xiàng)目你無(wú)法知道究竟是哪里的配置起了作用，云里霧里。
現(xiàn)在的settings.json文件內(nèi)容：

{
  // eslint相關(guān)配置
  // 只要安裝了插件，就默認(rèn)開(kāi)啟，即使不寫(xiě)這個(gè)配置
  "eslint.enable": true,
  // 保存時(shí)為編輯器運(yùn)行代碼操作。必須指定代碼操作，并且編輯器不能關(guān)閉
  "editor.codeActionsOnSave": {
    // 控制是否應(yīng)在文件保存時(shí)運(yùn)行自動(dòng)修復(fù)操作
    "source.fixAll": true,
    //使用eslint做代碼格式化
    "source.fixAll.eslint": true
  },
  // 保存時(shí)自動(dòng)格式化代碼,這里提供給prettier做代碼格式化
  "editor.formatOnSave": true
}

Prettier和Eslint沖突

有人說(shuō)那不是會(huì)格式化兩次嗎，formatOnSave格式化了一次，codeActionsOnSave又格式化了一次，為什么需要兩個(gè)配置項(xiàng)，簡(jiǎn)化成一個(gè)不行嗎?這個(gè)其實(shí)社區(qū)也有給VsCode提過(guò)意見(jiàn)，VsCode給的答案大致意思是它們各司其職，所以還是要兩個(gè)都保留。
放在Eslint和Prettier這里就是說(shuō)：

• "editor.formatOnSave": true這個(gè)配置項(xiàng)主要就是用來(lái)做樣式的格式化，
• "editor.codeActionsOnSave"不僅局限于樣式的格式化，還會(huì)做代碼檢查等其它工作。

所以我們可以?xún)蓚€(gè)同時(shí)使用，可是Prettier和Eslint的有些規(guī)則是重合的，如果同時(shí)使用的話(huà)會(huì)存在有沖突的可能。比如當(dāng)我們同時(shí)配置了Eslint和Prettier，然后給Eslint加了使用單引號(hào)的規(guī)則，那么這個(gè)時(shí)候點(diǎn)擊保存會(huì)出現(xiàn)下面的情況：

因?yàn)镻rettier里的規(guī)則使用的雙引號(hào)，兩個(gè)同時(shí)存在的時(shí)候，最終格式化出來(lái)的結(jié)果會(huì)以Prettier里的規(guī)則為準(zhǔn)，也就是說(shuō)Eslint和Prettier都會(huì)對(duì)文件進(jìn)行格式化，可是Prettier格式化的會(huì)覆蓋掉Eslint格式化的。所以最終格式化的結(jié)果是雙引號(hào)的。
這個(gè)時(shí)候Eslint的檢測(cè)就會(huì)報(bào)錯(cuò)，所以顯示了紅色的波浪線，所以我們需要做一些配置，對(duì)Eslint和Prettier的規(guī)則做一下合并，大家都以最終的合并的規(guī)則為準(zhǔn)，這樣就不會(huì)有沖突了。

Prettier配置文件

我們可以在.prettierrc.cjs文件里配置我們項(xiàng)目的規(guī)則，這里的規(guī)則會(huì)覆蓋Prettier的默認(rèn)規(guī)則，我們可以讓在這里修改有沖突的規(guī)則，讓Eslint的規(guī)則和Prettier的規(guī)則一致。比如上面的單引號(hào)和雙引號(hào)的問(wèn)題，我們可以新建.prettierrc.js文件，然后在里面配置如下規(guī)則：

// .prettierrc.cjs
module.exports = {
  singleQuote: true,
};

那么這時(shí)候Eslint和Prettier的規(guī)則都是需要使用單引號(hào)，就不會(huì)有沖突了。

Prettier配置文件加載順序

• 配置文件是有優(yōu)先級(jí)的，實(shí)測(cè)：獨(dú)立配置文件>vscode工作區(qū)配置>vscode用戶(hù)配置，使用時(shí)請(qǐng)注意
• 每次配置文件類(lèi)型的切換，建議重啟一下vscode，否則可能不會(huì)生效如.editorconfig -> .prettierrc.js 、 .prettierrc.js -> VsCode用戶(hù)設(shè)置

解決Prettier和Eslint沖突

如果說(shuō)沖突的規(guī)則很多，或者說(shuō)我們也不知道哪個(gè)規(guī)則沖突了，這樣一個(gè)個(gè)手動(dòng)去改有沖突的規(guī)則也太麻煩了，所以有兩個(gè)插件可以幫我們做這個(gè)事情，它們是eslint-plugin-prettier和eslint-config-prettier

• eslint-config-prettier會(huì)把Eslint里和Prettier有沖突的規(guī)則關(guān)掉， 關(guān)閉eslint中與prettier相互沖突的規(guī)則。
• eslint-plugin-prettier會(huì)將Prettier里的規(guī)則設(shè)置到Eslint里面,賦予eslint用prettier格式化代碼的能力。

通過(guò)這兩個(gè)插件的配合，就完成了Eslint和Prettier規(guī)則的合并，其中沖突的規(guī)則以Prettier里的規(guī)則為準(zhǔn)。
首先需要安裝這兩個(gè)插件：

pnpm i eslint-plugin-prettier eslint-config-prettier -D

然后我們?cè)贓slint的extends里添加如下配置"plugin:prettier/recommended",這一行一定要加在最后，因?yàn)楹竺娴臅?huì)覆蓋前面的。
最終的配置如下：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:prettier/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['vue'],
  // rules 中的定義會(huì)覆蓋 extends 里配置組合中的設(shè)定。
  rules: {
    // quotes這條規(guī)則用來(lái)測(cè)試eslint的規(guī)則是否生效
    quotes: ['error', 'single'],
  },
};

關(guān)鍵在于新增加的 plugin:prettier/recommended 這個(gè)規(guī)則。讓我們看看它具體做了什么

// node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js
module.exports = {
  // plugin:prettier/recommended 就是加載這個(gè)
  configs: {
    recommended: {
      extends: ['prettier'],
      plugins: ['prettier'],
      rules: {
        'prettier/prettier': 'error',
        'arrow-body-style': 'off',
        'prefer-arrow-callback': 'off',
      },
    },
  },
  // 其他的
}

plugin:prettier/recommended 這個(gè)語(yǔ)法就是加載了 node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js 文件導(dǎo)出的 configs 中的 recommended 配置項(xiàng)。下面解析他們分別做了什么。

• extends: ['prettier']: 通過(guò) eslint-config-prettier 關(guān)閉eslint和prettier 相沖突的規(guī)則。
• plugins: ['prettier']: 加載 eslint-plugin-prettier，賦予 eslint 用 prettier 格式化文檔的功能
• 'prettier/prettier': 'error': 讓代碼文件中不符合prettier格式化規(guī)則的都標(biāo)記為錯(cuò)誤，結(jié)合vscode-eslint插件便可以看到這些錯(cuò)誤被標(biāo)記為紅色，當(dāng)運(yùn)行eslint --fix 命令時(shí)，將自動(dòng)修復(fù)這些錯(cuò)誤。
• arrow-body-style 和 prefer-arrow-callback: 這兩個(gè)規(guī)則在eslint 和 prettier 中存在不可解決的沖突，所以關(guān)閉掉。

至此, prettier 和 eslint 便可以無(wú)沖突協(xié)作，保存時(shí)候也能自動(dòng)修復(fù)并格式化代碼了。

保存后應(yīng)該可以看到?jīng)_突的規(guī)則以Prettier為準(zhǔn)了，Eslint相關(guān)的檢測(cè)不會(huì)報(bào)錯(cuò)了，如果還沒(méi)生效可以重啟下VsCode試試。

如上圖所示，prettier配置是對(duì)于字符串格式化為雙引號(hào)，eslint配置字符串必須使用使用單引號(hào)，看到helloword.vue中，對(duì)于使用了雙引號(hào)的字符串都報(bào)錯(cuò)了，這是eslint輸出的錯(cuò)誤，為什么會(huì)出現(xiàn)這種情況，不是說(shuō)已經(jīng)解決了prettier和eslint的沖突了嗎？這是因?yàn)樵?code>.eslintrc.cjs配置文件中的rules選項(xiàng)中配置了quotes相關(guān)規(guī)則，rules 中的定義會(huì)覆蓋 extends 里配置組合中的設(shè)定，解決沖突就是通過(guò) eslint-config-prettier 關(guān)閉eslint和prettier 相沖突的規(guī)則,現(xiàn)在覆蓋了該extends的對(duì)于quotes相關(guān)規(guī)則，所以就會(huì)報(bào)錯(cuò)，只需要去掉.eslintrc.cjs中quotes的規(guī)則或者修改.prettierrc.cjs中的規(guī)則。

• 如項(xiàng)目中需要對(duì)字符串使用單引號(hào)，只需要修改.prettierrc.cjs中singleQuote為true

  

• 如項(xiàng)目中需要對(duì)字符串使用雙引號(hào)，只需要修改.eslintrc.cjs中rules注釋即可

  

.eslintignore和.prettierignore

有些文件我們可能不想做代碼檢測(cè)，比如node_modules里的，dist目錄里的，這時(shí)候可以配置在這兩個(gè)文件里面

.eslintignore

dist
node_modules
public
.husky
.vscode
.idea
*.sh
*.md

src/assets

.eslintrc.cjs
.prettierrc.cjs
.stylelintrc.cjs

.prettierignore

dist
node_modules
public
.husky
# .vscode
.idea
*.sh
*.md

src/assets

總結(jié) 

到此這篇關(guān)于Eslint在Vscode中使用的一些相關(guān)技巧的文章就介紹到這了,更多相關(guān)Eslint在Vscode中使用技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論