Question

我正在设置我的React Redux项目以在Airbnb配置和Prettier中使用ESLint。我一直在按照自己的意愿修改某些内容，但是现在我遇到了开关和案例语句缩进的问题，这些问题似乎无法解决。

我正在用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文件的相关部分：

{
    "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
    },

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

  "prettier": {
    "tabWidth": 4
  }

代码，并带有注释，指出哪些行出现错误（这是适用于Hangman游戏）：

    switch (action.type) {
        case GUESS_LETTER:
            return Object.assign(
                {},
                state,
                state.guessWord.includes(action.guessLetter)
                    ? addCorrectGuess(
                          state.rightLetters.slice(), // <-- error here!
                          action.guessLetter, // <-- error here!
                          state.guessWord // <-- error here!
                      ) // <-- error here!
                    : addWrongGuess(
                          state.wrongLetters.slice(), // <-- error here!
                          action.guessLetter // <-- error here!
                      ) // <-- error here!
            );

我要使该工作正常进行的第一个尝试是将{ "SwitchCase": 1 }添加到ESLint配置文件中。这减少了错误的数量（几乎是整个模块的），但是仍然存在错误。我不知道冲突到底在哪里。

[更新]令我永远感到羞耻的是，我相信我发现了问题所在。我只是从ESLint配置中删除了预期的配置。我删除了此内容：

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

现在看来行为正常。我认为这是因为它在尝试处理缩进时弄糟了Prettier。我只需要更漂亮的配置。

课程：在发布前删除可能引起冲突的配置，以进行更多测试。

Answer 1

我遇到了与上述问题相同的问题，但是我想出了一种解决方法，不仅可以保留“缩进”设置，还可以对其进行调整，从而允许tabWidth被调整随意设置。

首先，我要说明一下，所以我们都在同一页面上，我用于整理/格式化的设置是：

源代码编辑器：V.S。代码
Linting实用程序：ESLint
自以为是的格式化程序：更漂亮
样式指南：AirBnB

此外，我还配备了以下设备，这些是我使用NPM下载的：

eslint-plugin-prettier
eslint-config-prettier
eslint-config-airbnb

对于使用V.S.代码，你们知道我使用的实际上是简短列表。可以获得各种其他配置，插件和扩展。这里要注意的重要一点是，我使用的是经过验证的真实设置，该设置使Prettier和ESLint可以和谐地协同工作。

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

步骤1：知道所需的tabWidth并在.prettierrc中设置

首先，您需要确定所需的样式制表符宽度。（大多数样式指南将制表符宽度设置为（2x空格宽度），但是许多开发人员会将制表符宽度设置为（4x空格宽度。除2x和4x之外的任何东西都被视为忌讳。）

继续打开您的.prettierrc文件（或您使用的任何更漂亮的配置文件的模仿类型），然后根据自己的喜好设置“ tabWidth”，只需确保从此处开始始终保持一致的tabWidth ，因为ESLint需要与漂亮的服务器保持同步。

您的'.prettierrc'文件应类似于以下内容：

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

步骤2：在.eslintrc.json **中设置“最大长度”规则

打开您的.eslintrc.json文件（或您使用的任何版本的ESLint配置文件mime-type），然后在eslintrc.json的rules属性中设置“ max-len”规则。默认情况下，该规则不在文件中，因此您必须将其写入。要查看操作方法，请查看我在下面创建的示例。

请确保ESLint的“ max-len”规则中的“ tabWidth”属性与.prettierrc文件中的“ tabWidth”设置具有完全相同的值。

这里还有一些其他规则选项对于正确设置也很重要。第一个'code'设置每行可容纳的最大字符数，又名（ max-line-length ）。设置了“代码”后，ESlint不允许输入的字符数超过设置的“代码”。要注意的是，您绝对必须确保可能要写入的.prettierrc文件中的“ printWidth”设置与.eslintrc.json max中的“ code”属性的值设置为相同的值。 -len规则。

“ ignoreUrls”可以设置为任意一种，并通过保留“错误”一词来确保规则确实引发了错误。

以下是我在ESLint中使用max-len规则的示例

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

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

步骤3：ESLint的“禁止使用标签”规则

“无标签”规则是一个“必须设置”的规则，不带衬里和格式>可以不同步。
您可以根据需要设置“ allowIndentationTabs”，“允许或禁止缩进”选项卡不会有任何作用。

无标签规则应为：

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

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

第4步：ESLint的“缩进”规则，这是迄今为止该讨论最重要的规则

这很重要。它是为了解决开关缩进问题而抛出的，它不能让您控制其他设置，例如设置自己的制表符宽度。 “缩进”规则。

首先通过将error设置为error来确保缩进处于活动状态，您也可以将其设置为warn，但最好将其设置为error，这样更漂亮的方法可以立即进行修复。下一个设置是缩进的宽度，该宽度必须与.prettierrc文件中的tabWidth和“ max-len” ESLint规则中的tabWidth相同。

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

括号中的最后一个设置“ SwitchCase”可能会造成混淆。起初没有人向我解释这些，所以我不得不自己弄清楚，这使我有些困惑。 “ SwitchCase”设置为的数字与前面的数字不同。之前出现的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文件。

总结

漂亮的人希望缩进所有不知情的东西。因此，如果在ESlint中将tabWidth设置为4，并将tabWidth＆indent设置为4，那么每个块都将缩进4个漂亮的空格，不要多也不少。

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

这个答案比我想象的更长。要使Prettier变得更漂亮，ESLint和VS Code和谐地协作是一项非常艰巨的任务，尤其是对于初学者。花的工作是值得的。唯一可比较的其他棉绒/格式是Jet-brains，恕我直言。如果您想为雇主或付费工作制作具有专业外观的文档，并且希望使用VS Code进行处理，那么重要的是您可以启动并运行ESLint＆Prettier。

Answer 2

为确保已将其标记为已解决：

我只是从ESLint配置中删除了预期的配置。我删除了此内容：

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