Eslint相關(guān)?

在vscode中使用eslint插件

在vscode中用戶配置沒有開啟eslint.enable

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

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

在編寫的vue文件中a這個變量沒有使用應該是報錯的，eslint插件是開啟的

應該如何解決開啟了eslint插件卻沒有檢測代碼沒有生效？

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

開啟用戶配置中的eslint.enable，這個開關(guān)如果沒打開的話，即使我們配置了Eslint，檢測代碼也不會生效。

在settings.json文件中配置

{
"eslint.enable": true
}

代碼檢測功能馬上就會生效

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

eslint插件自動格式化代碼

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

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

可是配置完發(fā)現(xiàn)文件都標紅了，因為文件默認都是用的雙引號，一個個改成單引號又很麻煩，有沒有什么簡單的方法呢？

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

打開了.vscode目錄下的settings.json文件，我們在這個文件里添加如下代碼：

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

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

Prettier相關(guān)

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

const a   ='1';

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

安裝Prettier插件

到vscode的extension選項卡中搜索Prettier安裝即可，安裝完成后有的人是可以直接保存代碼，然后代碼就會格式化，這是因為你的編輯器之前有設(shè)置過Format On Save這個選項

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

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

Prettier和Eslint沖突

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

• "editor.formatOnSave": true這個配置項主要就是用來做樣式的格式化，
• "editor.codeActionsOnSave"不僅局限于樣式的格式化，還會做代碼檢查等其它工作。

所以我們可以兩個同時使用，可是Prettier和Eslint的有些規(guī)則是重合的，如果同時使用的話會存在有沖突的可能。比如當我們同時配置了Eslint和Prettier，然后給Eslint加了使用單引號的規(guī)則，那么這個時候點擊保存會出現(xiàn)下面的情況：

因為Prettier里的規(guī)則使用的雙引號，兩個同時存在的時候，最終格式化出來的結(jié)果會以Prettier里的規(guī)則為準，也就是說Eslint和Prettier都會對文件進行格式化，可是Prettier格式化的會覆蓋掉Eslint格式化的。所以最終格式化的結(jié)果是雙引號的。
這個時候Eslint的檢測就會報錯，所以顯示了紅色的波浪線，所以我們需要做一些配置，對Eslint和Prettier的規(guī)則做一下合并，大家都以最終的合并的規(guī)則為準，這樣就不會有沖突了。

Prettier配置文件

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

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

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

Prettier配置文件加載順序

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

解決Prettier和Eslint沖突

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

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

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

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

然后我們在Eslint的extends里添加如下配置"plugin:prettier/recommended",這一行一定要加在最后，因為后面的會覆蓋前面的。
最終的配置如下：

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 中的定義會覆蓋 extends 里配置組合中的設(shè)定。
  rules: {
    // quotes這條規(guī)則用來測試eslint的規(guī)則是否生效
    quotes: ['error', 'single'],
  },
};

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

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

plugin:prettier/recommended 這個語法就是加載了 node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js 文件導出的 configs 中的 recommended 配置項。下面解析他們分別做了什么。

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

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

保存后應該可以看到?jīng)_突的規(guī)則以Prettier為準了，Eslint相關(guān)的檢測不會報錯了，如果還沒生效可以重啟下VsCode試試。

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

• 如項目中需要對字符串使用單引號，只需要修改.prettierrc.cjs中singleQuote為true

  

• 如項目中需要對字符串使用雙引號，只需要修改.eslintrc.cjs中rules注釋即可

  

.eslintignore和.prettierignore

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

.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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論