Airbnb，ESLint，关于开关和表壳缩进的更漂亮的冲突 [英] Airbnb, ESLint, Prettier conflict over Switch and Case indentation

问题描述

我正在设置我的Reaction Redux项目，以便将ESLint与Airbnb配置和更漂亮的配置一起使用。我一直在修改某些内容以符合我的要求，但现在我遇到了Switch&；case语句上的缩进问题，似乎无法修复。

我正在VSCode中编辑我的项目。我单击错误并使用ESLint进行修复，将缩进减少了4个空格，但是之后又出现了更多的错误，要求将所有内容重新缩进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配置中删除了Intents的配置。我删除了此文件：

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

现在它似乎运行正常。我想这是因为它在处理缩进时搞砸了。我只需要更漂亮的配置。

课程：在发布之前通过删除可能导致冲突的配置来测试更多内容。

推荐答案

要确保将其标记为已解决，请执行以下操作：

我只是从ESLint配置中删除了缩进配置。我删除了此文件：

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

现在它似乎运行正常。我想这是因为它在处理缩进时搞砸了。我只需要更漂亮的配置。

课程：在发布之前，通过删除可能导致冲突的配置来测试更多内容。

这篇关于Airbnb，ESLint，关于开关和表壳缩进的更漂亮的冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！