Airbnb、ESLint、Prettier 关于 Switch 和 Case 缩进的冲突

Question

我正在设置我的 React Redux 项目，以将 ESLint 与 Airbnb 配置和 Prettier 结合使用。我一直在按照我想要的方式修改某些东西，但现在我遇到了 switch 和 case 语句上的缩进问题，我似乎无法修复。

我正在 VSCode 中编辑我的项目。我单击错误并使用 ESLint 修复，将缩进减少 4 个空格，但随后 Prettier 出现了更多错误，要求将所有内容重新缩进 4 个空格。

我想改变的一件关键事情是缩进：我想为制表符使用 4 个空格，并相应地调整我的设置。我对 switch/case 缩进没有强烈的看法（从 switch 缩进的情况更可取，但无论如何），我只是不想得到错误。

我已经安装：

prettier
eslint
eslint-config-airbnb
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react
eslint-import-resolver-webpack
eslint-config-prettier
eslint-plugin-prettier

我的.eslintrc.json文件的相关部分：

prettier
eslint
eslint-config-airbnb
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react
eslint-import-resolver-webpack
eslint-config-prettier
eslint-plugin-prettier

中的其他设置package.json（需要正确设置标签宽度）：

{
    "extends": ["airbnb", "prettier", "prettier/react"],
    "plugins": ["react", "prettier"],
    "rules": {
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [".js", "jsx"]
            }
        ],
        "prettier/prettier": "error",
        "indent": ["error", 4, { "SwitchCase": 1 }],
        "react/jsx-indent": ["error", 4],
        "react/jsx-indent-props": ["error", 4],
        "class-methods-use-this": 0,
        "no-else-return": 0,
        "no-plusplus": [2, { "allowForLoopAfterthoughts": true }],
        "no-param-reassign": 0
    },

和代码，注释指出哪些行出错（这是针对 Hangman 游戏的）：

  "prettier": {
    "tabWidth": 4
  }

我第一次尝试{ "SwitchCase": 1 }让它工作是添加到 ESLint 配置文件。这降低了错误（其数目是几乎整个块），但仍存在错误。我无法弄清楚冲突究竟在哪里。

[更新] 令我永远的耻辱的是，我相信我发现了这个问题。我只是从 ESLint 配置中删除了意图的配置。我删除了这个：

"indent": ["error", 4, { "SwitchCase": 1 }],
"react/jsx-indent": ["error", 4],
"react/jsx-indent-props": ["error", 4],

现在它似乎表现正常。我认为这是因为它在尝试处理缩进时搞砸了 Prettier。我只需要 Prettier 的配置。

教训：通过在发布之前删除可能导致冲突的配置来进行更多测试。

Answer 1

为了确保这被标记为已解决：

我只是从 ESLint 配置中删除了缩进配置。我删除了这个：

"indent": ["error", 4, { "SwitchCase": 1 }],
"react/jsx-indent": ["error", 4],
"react/jsx-indent-props": ["error", 4],

现在它似乎表现正常。我认为这是因为它在尝试处理缩进时搞砸了 Prettier。我只需要 Prettier 的配置。

教训：通过在发布之前删除可能导致冲突的配置来进行更多测试。

Answer 2

我遇到了与上面问题中提到的相同的问题，但是我想出了如何以一种不仅可以保留“缩进”设置而且可以对其进行调整的方式来解决它，从而可以像您一样设置 tabWidth喜欢。

首先我要注意，所以我们都在同一页面上，我用于 linting/格式化的设置是：

1. 源代码编辑器：VS Code
2. Linting 实用程序：ESLint
3. 自以为是的格式化程序：Prettier
4. 风格指南：AirBnB

此外，我还配备了以下内容，我使用 NPM 下载：

5. eslint-plugin-prettier
6. eslint-config-prettier
7. eslint-config-airbnb

对于那些在使用 VS Code 时熟悉 linting 的人，你们知道我使用的实际上是短名单。可以获取各种其他配置、插件和扩展。这里要注意的重要一点是，我使用的是经过验证的真实设置，它允许 Prettier 和 ESLint 和谐地协同工作。

话虽如此，即使拥有良好的配置和所有正确的扩展，我仍然对上述规则有疑问，与发布问题的开发人员相同。我知道问题与 ESLint 的规则有关，以及它们是如何在我的 .eslintrc.json 文件中配置的。经过大量研究，并接近掌握 ESLint，我发现我是对的。但是，您需要正确配置一些 ESLint 规则（3 个 ESLint 规则和 1 个更漂亮的设置）；同时你需要确保你的 .prettierrc 文件设置与你的 .eslintrc.json 文件规则同步。一旦你理解了这一切，它实际上并不像听起来那么复杂。

步骤 #1 知道你想要什么 tabWidth 并在 .prettierrc 中设置它

• 首先，您需要确定您想要的标签宽度样式。（大多数样式指南将标签宽度设置为 (2x Space-Width)，但许多开发人员会将那里的设置更改为 (4x Space-Width)。除 2x 和 4x 之外的任何事情都被视为禁忌。）

• 继续并打开您的 .prettierrc 文件（或您使用的任何漂亮的配置文件的 mimetype），然后根据您的喜好设置 'tabWidth'，只需确保从这里开始使用一致的 tabWidth，因为 ESLint 需要与漂亮同步。

您的“.prettierrc”文件应该类似于：

{
    "printWidth": 90,
    "tabWidth": 4,
    "useTabs": false,
    "trailingComma": "all",
    "singleQuote": true,
    "semi": true,
    "bracketSpacing": false,
}

第 2 步：在 .eslintrc.json 中设置“max-len”规则**

• 打开您的 .eslintrc.json 文件（或您使用的任何版本的 ESLint 配置文件 mime-type），并在 eslintrc.json 的 rules 属性中设置“max-len”规则。默认情况下，该规则不在文件中，因此您必须将其写入。要了解如何操作，请查看我在下面创建的示例。
• 确保 ESLint 的“max-len”规则中的“tabWidth”属性与 .prettierrc 文件中的“tabWidth”设置保持完全相同的值。
• 这里还有一些其他规则选项，正确设置也很重要。第一个，'code'，设置每行可以容纳的最大字符数，也就是（max-line-length）。当设置了“code”时，ESlint 将不允许超过“code”设置的字符数。问题是您绝对必须确保 .prettierrc 文件中的“printWidth”设置（您可能必须写入）设置为与 .eslintrc.json max 中“code”属性的值相同的值-len 规则。
• “ignoreUrls”可以以任何一种方式设置，并通过保留“error”这个词来确保规则确实抛出错误。

这是我在 ESLint 中的 max-len 规则的示例

"rules": {
    "max-len": [
        "error",
        {
            "code": 90,
            "tabWidth": 4,
            "ignoreUrls": true
        }
    ],
}

参见上面的 .prettierrc 示例，查看如何设置“printWidth”

第 3 步：ESLint 的“无标签”规则

• “无标签”规则是“必须设置”，没有它您的 linting 和格式设置 > 可以不同步。
• 您可以根据需要设置“allowIndentationTabs”，允许或禁止缩进标签不会产生任何影响。

无标签规则应该是什么样的：

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

    "max-len": [
        "error",
        {
            "code": 90,
            "tabWidth": 4,
            "ignoreUrls": true
        }
    ],
}

第 4 步：ESLint 的“缩进”规则，迄今为止本次讨论中最重要的规则

说真的，这一点很重要。它是为了解决 switch 缩进问题而被抛弃的，它不能让你控制其他设置，比如设置你自己的选项卡宽度。“缩进”规则。

• 首先通过将错误设置为错误来确保缩进处于活动状态，您也可以将其设置为警告，但最好将其设置为错误，以便更漂亮地知道立即修复它。下一个设置是缩进的宽度，它必须与 .prettierrc 文件中的 tabWidth 和“max-len”ESLint 规则中的值完全相同。

"indent": ["error", 4, {"SwitchCase": 1}],

• 括号中的最后一个设置“SwitchCase”可能会令人困惑。一开始没有人向我解释这些，所以我不得不自己弄清楚，这让我有点搞砸了。“SwitchCase”设置的数字与之前的 4 不同。前面的 4 是“缩进”规则的初始设置，可以像这样独立：

"indent": 4; // throws error
// or
"indent": ["warn", 4] // Throws warning, which is somtimes less annoying than an error

因此，请务必注意，您在“缩进”规则中看到的值 4 是缩进的空格数。这让我相信“SwitchCase”之后的 1 表示 switch 关键字大小写将缩进多少个空格。

例子：

switch(x){
    case 1:
        break;
}

但这不是它的工作原理。规则“SwitchCase”设置的数字告诉编辑器将关键字“case”缩进多少次。因此，如果“缩进”规则设置为 4，而“SwitchCase”规则设置为 4，那么 ESLint 将期望缩进为 4x4=16。在一天结束时，ESLint 实际上会期望超过 16 个，因为 ESLint 将承担 switch 语句所在的不同级别块的所有缩进，这最终导致 ESLint 期望缩进 24-36 个空格， 太疯狂了。

“SwitchCase”需要设置为 1。

"rules": {
    "indent": ["error", 4, {"SwitchCase": 1}],
    
    "no-tabs": ["error", {"allowIndentationTabs": true}],

    "max-len": [
        "error",
        {
            "code": 90,
            "tabWidth": 4,
            "ignoreUrls": true
        }
    ],
}

如果你设置了所有适合你的规则

如果它仍然不起作用，请尝试从一个干净的石板开始，删除您的 .eslintrc.json 文件，并创建一个新的 eslintrc.json 文件，然后重新构建它。您不应该使用新的 .prettierrc 文件重新开始。

总结

Prettier 想要缩进所有不知情的东西。因此，如果 tabWidth 设置为 4，并且在 ESlint 中 tabWidth & indent 设置为 4，那么每个块都会缩进 4 个空格，这样更漂亮，不多也不少。

最初的整个问题是，样式指南经常要求关键字大小写不要缩进，因此在设置 ESLint 时，这就是您在初始化 ESLint 时安装的 NPM 配置所配置的内容。但是，这不适用于更漂亮的。

这个答案比我想象的要长得多。让 Prettier、ESLint 和 VS Code 和谐地协同工作是一项非常复杂的任务，尤其是对于初学者来说。我在这个 AST 堆栈之上使用 Babel（我把这个词变成了哈哈，你还能叫它什么？）。如果您希望能够 lint 包含 TC39 ECMAScript Stage-3 Proposals 的文档，这包括诸如私有成员、静态方法等功能，那么您将需要使用 configure ESLint 来使用 Babel 的解析器。