eslint config prettier
1.0.0
关闭所有不必要或可能与 Prettier 冲突的规则。
这使您可以使用您最喜欢的可共享配置，而不会让它的风格选择妨碍您使用 Prettier。
请注意，此配置仅关闭规则，因此只有将其与其他配置一起使用才有意义。
安装 eslint-config-prettier：
npm install --save-dev eslint-config-prettier
将 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 ,
] ;最后，运行 CLI 帮助工具来查找配置的"rules"部分中的问题。
使用 eslint-plugin-prettier？查看 eslint-plugin-prettier 的推荐配置。
eslint-config-prettier 不仅会关闭核心规则，还会自动关闭这些插件中的一些规则：
注意：您可能会在互联网上找到指南，说您还应该扩展诸如
"prettier/react"之类的内容。从 eslint-config-prettier 8.0.0 版本开始，您需要扩展的只是"prettier"！这包括所有插件。
通过平面配置，您可以决定插件名称！例如：
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
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
就像 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（平面配置），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 禁用了一些规则，但在某些情况下实际上可以启用这些规则。
--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 涉及：
使用各种标签、功能和注释。
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 帮助程序工具无法检测您的选择器是否可能导致冲突。
该规则需要某些选项。
该规则强制执行元素是否应自关闭。
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 进行格式化，并且该格式应与插件不一致。
最后，需要在几个地方提到该插件：
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"运行单元测试来检查许多事情："test:cli-sanity"和"test:cli-sanity-warning"是 CLI 的健全性检查。 麻省理工学院。
