eslint config prettier

eslint-config-prettier

關閉所有不必要或可能與 Prettier 衝突的規則。

這使您可以使用您最喜歡的可共享配置，而不會讓它的風格選擇妨礙您使用 Prettier。

請注意，此配置僅關閉規則，因此只有將其與其他配置一起使用才有意義。

安裝

1. 安裝 eslint-config-prettier：

    npm install --save-dev eslint-config-prettier
   

2. 將 eslint-config-prettier 新增至您的 ESLint 設定中 – eslintrc 或 eslint.config.js （平面配置）。

   • eslintrc：將"prettier"加入.eslintrc.*檔案中的「extends」陣列中。確保將其放在最後，以便它有機會覆蓋其他配置。

     {
       "extends" : [
         " some-other-config-you-use " ,
         " prettier "
       ]
     }

   • eslint.config.js（平面配置）：導入 eslint-config-prettier，並將其放入配置數組中 - 在您想要覆蓋的其他配置之後。

      import someConfig from "some-other-config-you-use" ;
     import eslintConfigPrettier from "eslint-config-prettier" ;
     
     export default [
       someConfig ,
       eslintConfigPrettier ,
     ] ;

3. 最後，執行 CLI 幫助工具來尋找配置的"rules"部分中的問題。

使用 eslint-plugin-prettier？查看 eslint-plugin-prettier 的建議配置。

外掛

eslint-config-prettier 不僅會關閉核心規則，還會自動關閉這些外掛程式中的一些規則：

• @typescript-eslint/eslint-插件
• @babel/eslint-插件
• eslint-插件-babel
• eslint-插件-flowtype
• eslint 插件反應
• eslint 插件標準
• eslint-插件-獨角獸
• eslint-插件-vue

注意：您可能會在網路上找到指南，說您還應該擴展諸如"prettier/react"之類的內容。從 eslint-config-prettier 8.0.0 版本開始，您需要擴展的只是"prettier" ！這包括所有插件。

eslint.config.js（平面配置）插件警告

透過平面配置，您可以決定插件名稱！例如：

 import typescriptEslint from "@typescript-eslint/eslint-plugin" ;
import eslintConfigPrettier from "eslint-config-prettier" ;

export default [
  {
    plugins : {
      // You’d typically use one of the following two:
      // typescriptEslint: typescriptEslint,
      // typescriptEslint,
      // But in this example we give it another name.
      // It might be tempting to use something shorter like “ts”:
      ts : typescriptEslint , //  Don’t do this!
    } ,
    rules : {
      // With eslintrc, this is _always_ called:
      // @typescript-eslint/indent
      // But in eslint.config.js (flat config), the name chosen above in `plugins` is used.
      "ts/indent" : "error" , //  Don’t do this!
    } ,
  } ,
  eslintConfigPrettier ,
] ;

您可能期望 eslint-config-prettier 關閉ts/indent ，但它不會！因為 eslint-config-prettier 僅關閉@typescript-eslint/indent 。它無法知道您選擇如何呼叫該插件。 CLI 幫助工具也是如此。

只需遵循官方插件名稱即可。

如果您遇到使用非標準外掛名稱的共享配置，請要求他們改用標準名稱。

排除已棄用的規則

eslint-config-prettier 關閉的一些規則可能已被棄用，甚至從 ESLint 中刪除。這完全沒問題，但如果您確實需要省略已棄用和已刪除的規則，可以透過將ESLINT_CONFIG_PRETTIER_NO_DEPRECATED環境變數設為非空值來實現。例如：

 env ESLINT_CONFIG_PRETTIER_NO_DEPRECATED=true npx eslint-find-rules --deprecated index.js

CLI 幫助工具

eslint-config-prettier 還附帶了一個 CLI 工具，可以幫助您檢查配置是否包含任何不必要或與 Prettier 衝突的規則。運行方法如下：

 npx eslint-config-prettier path/to/main.js

（將path/to/main.js更改為專案中存在的檔案。）

什麼以及為什麼

現在，讓我們看看它的作用以及為什麼您可能想要使用它。

此 eslintrc 範例啟用了衝突規則"indent" ：

{
  "extends" : [
    " some-other-config-you-use " ,
    " prettier "
  ],
  "rules" : {
    "indent" : " error "
  }
}

對於 eslintrc，雖然"prettier"配置可以禁用"some-other-config-you-use"中有問題的規則，但它不能觸及"rules" ！ （這就是 ESLint 的工作原理 - 它允許您覆蓋您擴展的配置。）CLI 幫助器工具會報告"indent"與 Prettier 衝突，因此您可以將其刪除。 （這很好——簡化你的配置！）

此 eslint.config.js （平面配置）範例也啟用了衝突規則"indent" ：

 import someConfig from "some-other-config-you-use" ;
import eslintConfigPrettier from "eslint-config-prettier" ;

export default [
  someConfig ,
  eslintConfigPrettier ,
  {
    rules : {
      indent : "error" ,
    } ,
  } ,
] ;

使用新的 ESLint「平面配置」格式，您可以控制哪些內容會覆寫您自己的內容。解決上述衝突的一種方法是重新排序配置對象，使 eslint-config-prettier 位於最後：

 import someConfig from "some-other-config-you-use" ;
import eslintConfigPrettier from "eslint-config-prettier" ;

export default [
  someConfig ,
  {
    rules : {
      indent : "error" ,
    } ,
  } ,
  eslintConfigPrettier , // eslint-config-prettier last
] ;

然而，查看上面的配置可能會讓人感到困惑。看起來我們啟用了indent規則，但實際上由於其下面的eslintConfigPrettier行，它被禁用了。相反，您可能希望在 eslint-config-prettier之後真正擁有自己的規則，並執行 CLI 幫助程式工具來找出問題，以便您可以從設定檔中完全刪除衝突的規則（簡化您的設定）。

檢查多個文件

理論上，您需要為專案中的每個檔案執行該工具，以 100% 確定不存在衝突的規則，因為 ESLint 支援對不同的檔案使用不同的規則。通常，所有檔案都會有大致相同的規則，因此在一個檔案上執行該命令就足夠了。但如果您使用多個設定檔或覆蓋，您可以提供多個檔案來檢查：

 npx eslint-config-prettier index.js test/index.js legacy/main.js

退出代碼

• 0：沒有發現問題。
• 1：意外錯誤。
• 2：發現衝突規則。

ESLINT_USE_FLAT_CONFIG 環境變數

就像 ESLint 本身一樣，您可以使用ESLINT_USE_FLAT_CONFIG環境變數來控制 eslint-config-prettier CLI 幫助器工具：

• ESLINT_USE_FLAT_CONFIG=true ：僅使用 eslint.config.js （平面配置）。
• ESLINT_USE_FLAT_CONFIG=false ：僅使用 eslintrc 檔案。
• 取消設定或任何其他值：先嘗試 eslint.config.js，然後嘗試 eslintrc。

警告
對於 eslint.config.js（平面配置），CLI 幫助程式工具導入eslint/use-at-your-own-risk這可能隨時中斷。

遺產

7.0.0 之前的 eslint-config-prettier 版本的 CLI 工具略有不同，運作方式也不同。例如：

 npx eslint --print-config index.js | npx eslint-config-prettier-check

如果您在教程中發現類似的內容，則該命令在 7.0.0 或更高版本中如下所示：

 npx eslint-config-prettier index.js

特別規則

eslint-config-prettier 停用了一些規則，但在某些情況下實際上可以啟用這些規則。

• 有些需要某些選項。 CLI 幫助工具驗證了這一點。
• 有些在編寫程式碼時需要特別注意。如果啟用了任何這些規則，CLI 幫助程式工具會向您發出警告，但無法判斷是否有問題。
• 如果使用 eslint-plugin-prettier 和--fix ，有些可能會導致問題。

為了最大程度地方便使用，預設會停用特殊規則（前提是您在"extends"中包含所有需要的內容）。如果您需要它們，您需要在 ESLint 配置中明確指定它們。

箭頭主體樣式和首選箭頭回調

如果使用 eslint-plugin-prettier 和--fix這些規則可能會導致問題。

有關詳細信息，請參閱arrow-body-style和prefer-arrow-callback問題。

有幾種方法可以關閉這些規則：

• 將"plugin:prettier/recommended"放入"extends"中。這是 eslint- plugin- prettier 的建議配置。
• 將"prettier/prettier"放入"extends"中。 （是的，有一個名為"prettier/prettier"的規則和一個名為"prettier/prettier"配置。）
• 從您的配置中刪除它們或手動關閉它們。

使用哪種方法並不重要。 "plugin:prettier/recommended"可能是最簡單的。

注意：如果為相同文件啟用了"prettier/prettier"規則，CLI 工具僅將這些報告為有問題。

如果您不使用 eslint-plugin-prettier，這些規則可以安全使用。換句話說，如果您將eslint --fix和prettier --write作為單獨的步驟運行。

捲曲

該規則需要某些選項。

如果一個區塊（例如if 、 else 、 for或while之後）僅包含一個語句，則 JavaScript 允許省略該語句周圍的大括號。如果或何時應省略那些可選的大括號，則強制執行此規則。

如果您使用"multi-line"或"multi-or-nest"選項，則該規則可能會與 Prettier 發生衝突。

例如， "multi-line"選項允許此行：

 if ( cart . items && cart . items [ 0 ] && cart . items [ 0 ] . quantity === 0 ) updateCart ( cart ) ;

然而，Prettier 可能會認為該行太長，並將其變成以下內容，這是"multi-line"選項不允許的：

 if ( cart . items && cart . items [ 0 ] && cart . items [ 0 ] . quantity === 0 )
  updateCart ( cart ) ;

如果您喜歡這個規則，只要您不使用"multi-line"或"multi-or-nest"選項，它就可以與 Prettier 一起使用。

ESLint 設定範例：

{
  "rules" : {
    "curly" : [ " error " , " all " ]
  }
}

註解周圍的行（已棄用）

（以下內容也適用於 @typescript-eslint/lines-around-comment。）

該規則可以與某些選項一起使用。

此規則要求註解之前和/或之後有空行。 Prettier 保留空行，但有兩個例外：

• 一行中的多個空白行被折疊為一個空白行。這很好。
• 區塊、物件和陣列開頭和結尾的空白行總是會被刪除。這可能會導致衝突。

預設情況下，ESLint 需要在註解上方有一個空白行，如下所示：

 if ( result ) {

  /* comment */
  return result ;
}

然而，Prettier 刪除了空白行：

 if ( result ) {
  /* comment */
  return result ;
}

如果您喜歡這個規則，只要您添加一些額外的配置以允許在區塊、物件和陣列的開頭和結尾添加註釋，它就可以與 Prettier 一起使用。

ESLint 設定範例：

{
  "rules" : {
    "lines-around-comment" : [
      " error " ,
      {
        "beforeBlockComment" : true ,
        "afterBlockComment" : true ,
        "beforeLineComment" : true ,
        "afterLineComment" : true ,
        "allowBlockStart" : true ,
        "allowBlockEnd" : true ,
        "allowObjectStart" : true ,
        "allowObjectEnd" : true ,
        "allowArrayStart" : true ,
        "allowArrayEnd" : true
      }
    ]
  }
}

最大長度（已棄用）

（以下內容也適用於 vue/max-len。）

寫程式的時候需要特別注意這個規則。

通常，Prettier 會自動遵循最大行長度。然而，在某些情況下，Prettier 無法執行任何操作，例如長字串、正規表示式和註釋。這些需要由人來分割。

如果您想要強制執行比 Prettier 自動提供的更嚴格的最大行長度策略，您可以啟用此規則。只需記得保持max-len的選項和 Prettier 的printWidth選項同步即可。

請記住，如果 Prettier 以max-len規則不認可的方式格式化行，您可能需要稍微重構程式碼。

ESLint 設定範例：

{
  "rules" : {
    "max-len" : [ " error " , { "code" : 80 , "ignoreUrls" : true }]
  }
}

無混淆箭頭（已棄用）

該規則需要某些選項。

例如，該規則可能會警告這一行：

 var x = a => 1 ? 2 : 3 ;

使用{allowParens: true} （自 ESLint 6.0.0 起的預設值），加入括號被認為是避免箭頭混淆的有效方法：

 var x = a => ( 1 ? 2 : 3 ) ;

雖然 Prettier 保留了這些括號，但如果該行足夠長以引入換行符，則會刪除它們：

 EnterpriseCalculator . prototype . calculateImportantNumbers = inputNumber =>
  1 ? 2 : 3 ;

對於{allowParens: false} ，ESLint 建議切換到明確返回：

 var x = a => { return 1 ? 2 : 3 ; } ;

這不會給 Prettier 帶來任何問題。

如果您喜歡這個規則，只要allowParens選項關閉，它就可以很好地與Prettier一起使用。

ESLint 設定範例：

{
  "rules" : {
    "no-confusing-arrow" : [ " error " , { "allowParens" : false }]
  }
}

（注意：CLI 幫助程式工具將{allowParens: true}視為預設值，自 ESLint 6.0.0 以來就是這種情況。如果您使用預設值，即使您使用舊版本的 ESLint，該工具也會產生警告。明確設定{allowParens: false}不會有什麼壞處，儘管它在技術上是多餘的，這樣您就可以為將來的 ESLint 升級做好準備，並且 CLI 工具可以保持簡單。

無混合運算子（已棄用）

寫程式的時候需要特別注意這個規則。

此規則禁止混合某些運算符，例如&&和|| 。

例如，該規則可能會警告這一行：

 var foo = a + b * c ;

該規則建議添加括號，如下所示：

 var foo = a + ( b * c ) ;

然而，Prettier 刪除了許多“不必要的”括號，將其變回：

 var foo = a + b * c ;

如果你想將此規則與 Prettier 一起使用，則需要將表達式拆分為另一個變數：

 var bar = b * c ;
var foo = a + bar ;

但請記住，Prettier 會印製一些「不必要的」括號：

 var foo = ( a && b ) || c ;

ESLint 設定範例：

{
  "rules" : {
    "no-mixed-operators" : " error "
  }
}

無選項卡（已棄用）

該規則需要某些選項。

此規則不允許使用製表符。預設情況下，該規則禁止所有製表符。只要您不將 Prettier 配置為使用製表符縮進，就可以很好地與 Prettier 一起使用。

幸運的是，可以配置該規則，使其無論 Prettier 使用空格還是製表符都有效：將allowIndentationTabs設為true 。這樣，Prettier 會處理您的縮排，而無no-tabs則會處理程式碼中其他任何位置的潛在製表符。

ESLint 設定範例：

{
  "rules" : {
    "no-tabs" : [ " error " , { "allowIndentationTabs" : true }]
  }
}

無意外多行

寫程式的時候需要特別注意這個規則。

此規則不允許混淆多行表達式，其中換行符號看起來像是結束語句，但實際上並非如此。

例如，該規則可能會對此發出警告：

 var hello = "world"
[ 1 , 2 , 3 ] . forEach ( addNumber )

Prettier 通常以一種明顯缺少分號的方式對其進行格式化：

 var hello = "world" [ ( 1 , 2 , 3 ) ] . forEach ( addNumber ) ;

然而，在某些情況下，Prettier 將事物分成幾行，從而導致no-unexpected-multiline衝突。

 const value = text . trim ( ) . split ( "n" ) [ position ] . toLowerCase ( ) ;

不過，Prettier 將其分成幾行，導致了衝突：

 const value = text
  . trim ( )
  . split ( "n" )
  [ position ] . toLowerCase ( ) ;

如果您喜歡此規則，通常可以與 Prettier 一起使用而不會出現任何問題，但有時您可能需要暫時停用該規則或重構您的程式碼。

 const value = text
  . trim ( )
  . split ( "n" )
  // eslint-disable-next-line no-unexpected-multiline
  [ position ] . toLowerCase ( ) ;

// Or:

const lines = text . trim ( ) . split ( "n" ) ;
const value = lines [ position ] . toLowerCase ( ) ;

注意：如果您啟用此規則，則必須將 ESLint 和 Prettier 作為兩個單獨的步驟運行（首先是 ESLint）才能從中獲取任何價值。否則 Prettier 可能會以 ESLint 永遠沒有機會報告任何內容的方式重新格式化您的程式碼（如第一個範例所示）。

設定範例：

{
  "rules" : {
    "no-unexpected-multiline" : " error "
  }
}

引號（已棄用）

（以下內容也適用於 babel/quotes 和 @typescript-eslint/quotes。）

此規則需要某些選項和某些 Prettier 選項。

通常，您根本不需要這條規則。但有兩種情況它可能有用：

• 強制對字串使用反引號而不是單引號或雙引號。
• 禁止在可以使用常規字串的地方使用反引號。

強制反引號

如果您希望所有字串都使用反引號（從不引號），請啟用"backtick"選項。

ESLint 設定範例：

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

禁止不必要的反引號

在下面的範例中，第一個陣列項可以用引號而不是反引號編寫。

 const strings = [
  `could have been a regular string` ,
  `
    multiple
    lines
  ` ,
  `uses ${ interpolation } ` ,
  String . raw `tagged/` ,
] ;

如果您希望 ESLint 強制將`could have been a regular string`寫為"could have been a regular string"或'could have been a regular string' ，則需要使用一些特定的配置。 quotes規則有兩個選項，一個字串選項和一個物件選項。

• 第一個（字串）選項需要設定為"single"或"double" ，並與 Prettier 的 singleQuote 選項保持同步。
• 第二個（物件）選項需要以下屬性：
  • "avoidEscape": true遵循 Prettier 的字串格式規則。
  • "allowTemplateLiterals": false禁止不必要的反引號。

雙引號配置範例

ESLint：

{
  "rules" : {
    "quotes" : [
      " error " ,
      " double " ,
      { "avoidEscape" : true , "allowTemplateLiterals" : false }
    ]
  }
}

Prettier（這是預設設置，因此不需要添加）：

{
  "singleQuote" : false
}

單引號設定範例

ESLint：

{
  "rules" : {
    "quotes" : [
      " error " ,
      " single " ,
      { "avoidEscape" : true , "allowTemplateLiterals" : false }
    ]
  }
}

更漂亮：

{
  "singleQuote" : true
}

獨角獸/模板縮排

該規則可以與某些選項一起使用。

此規則將自動修復多行字串範本的縮進，以使它們與它們所在的程式碼保持一致。

Prettier 涉及：

• 超文本標記語言
• CSS
• GraphQL
• 降價

使用各種標籤、功能和註釋。

unicorn/template-indent預設會格式化一些相同的標記模板，這可能會導致衝突。例如，規則和 Prettier 對於三元組中的縮排存在分歧：

 condition
  ? null
  : html `
      < p >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui
        mauris.
      </ p >
    ` ;

如果您喜歡這個規則，只要您將規則配置為不處理與 Prettier 相同的模板，它就可以與 Prettier 一起使用。

ESLint 設定範例：

{
  "rules" : {
    "unicorn/template-indent" : [
      " error " ,
      {
        "tags" : [
          " outdent " ,
          " dedent " ,
          " sql " ,
          " styled "
        ],
        "functions" : [
          " dedent " ,
          " stripIndent "
        ],
        "selectors" : [],
        "comments" : [
          " indent "
        ]
      }
    ]
  }
}

注意：如果您使用"selectors" ，CLI 幫助程式工具無法偵測您的選擇器是否可能導致衝突。

vue/html-自動關閉

該規則需要某些選項。

此規則強制執行元素是否應自關閉。

Prettier 通常會保留您編寫元素的方式：

< div />
< div ></ div >
< MyComponent />
< MyComponent ></ MyComponent >
< svg >< path d = " " /></ svg >
< svg >< path d = " " ></ path ></ svg >

但對於已知的void HTML 元素，Prettier 總是使用自閉合樣式。例如， <img>變成<img /> 。

如果你喜歡這個規則，只要你將html.void設為"any"它就可以與 Prettier 一起使用。

ESLint 設定範例：

{
  "rules" : {
    "vue/html-self-closing" : [
      " error " ,
      {
        "html" : {
          "void" : " any "
        }
      }
    ]
  }
}

其他值得一提的規則

這些規則與 Prettier 並不衝突，但與 Prettier 一起使用時存在一些問題。

無序列

此規則禁止使用 JavaScript 令人困惑的逗號運算子（序列表達式）。這段程式碼並沒有像看起來那樣執行：

 matrix [ 4 , 7 ] ;

Prettier 在上面添加了括號，以明確使用了序列表達式：

 matrix [ ( 4 , 7 ) ] ;

但是，如果表達式序列明確包含在括號中， no-sequences規則允許使用逗號運算子。由於 Prettier 會自動將它們括在括號中，因此您可能永遠不會看到 ESLint 中有關逗號運算子的任何警告。

重構時很容易出現意外的序列表達式。如果您希望 ESLint 捕獲此類錯誤，建議完全使用 no-restricted-syntax 禁止序列表達式（如no-sequences文件中所述）：

{
  "rules" : {
    "no-restricted-syntax" : [ " error " , " SequenceExpression " ]
  }
}

如果您仍然需要在某些邊緣情況下使用逗號運算符，則可以在表達式上方的行上放置// eslint-disable-next-line no-restricted-syntax註解。如果您使用no-restricted-syntax方法，則可以安全地停用no-sequences 。

如果需要，您也可以提供自訂訊息：

{
  "rules" : {
    "no-restricted-syntax" : [
      " error " ,
      {
        "selector" : " SequenceExpression " ,
        "message" : " The comma operator is confusing and a common mistake. Don’t use it! "
      }
    ]
  }
}

貢獻

請參閱 package.json 以了解 eslint-config-prettier 已測試的 ESLint、Prettier 和 ESLint 插件的確切版本。

自這些版本以來是否添加了新規則？我們是否遺漏了任何規則？您是否希望查看排除的插件？打開問題或拉取請求！

如果您想新增對 eslint-plugin-foobar 的支持，請依照下列步驟操作：

首先，在index.js加入規則：

 "foobar/some-rule" : "off"

然後，建立test-lint/foobar.js ：

 /* eslint-disable quotes */
"use strict" ;

// Prettier does not want spaces before the parentheses, but
// `plugin:foobar/recommended` wants one.
console . log ( ) ;

test-lint/foobar.js同時與 eslint-plugin-foobar 和 eslint-plugin-prettier 一起使用時必須失敗 – 直到 eslint-config-prettier 添加到 ESLint 配置中。該文件應根據 Prettier 進行格式化，並且該格式應與插件不一致。

最後，需要在幾個地方提到這個插件：

• 將 eslint-plugin-foobar 新增至package.json中的「devDependencies」欄位。
• 確保.eslintrc.base.js和eslint.base.config.js中至少使用了 eslint-plugin-foobar 中的一條規則。
• 將其新增至此README.md中支援的插件清單。

完成後，執行npm test來驗證您是否正確。它運行其他幾個 npm 腳本：

• "test:prettier"檢查 Prettier 是否已在所有文件上運行。
• "test:eslint"確保在使用 eslint-config-prettier 的排除項時test-lint/中的檔案通過 ESLint。它還會檢查 eslint-config-prettier 本身的程式碼。
• "test:lint-verify-fail"由test/lint-verify-fail.test.js中的測試運行。
• "test:lint-rules"由test/rules.test.js中的測試執行。
• "test:jest"運行單元測試來檢查許多事情：
  • 上面顯示的所有地方都提到了 eslint-plugin-foobar。
  • 沒有未知的規則被關閉。例如，這有助於發現拼字錯誤。
  • CLI 可以正常工作。
• "test:cli-sanity"和"test:cli-sanity-warning"是 CLI 的健全性檢定。

執照

麻省理工學院。