Airbnb, ESLint, конфликт Преттиера из-за отступа Switch и Case - PullRequest
0 голосов
/ 23 мая 2019

Я настраиваю свой проект React Redux для использования ESLint с конфигами Airbnb и Prettier. Я изменил некоторые вещи так, как я хочу, но теперь я столкнулся с проблемой с отступами в операторах switch и case, которую я не могу исправить.

Я редактирую свой проект в VSCode. Я нажимаю на ошибки и исправляю их с помощью ESLint, уменьшая отступ на 4 пробела, но затем от Prettier появляется больше ошибок, прося переопределить все еще на 4 пробела.

Одной из ключевых вещей, которые я хотел изменить, были отступы: я хотел использовать 4 пробела для вкладок и соответственно скорректировал свои настройки. У меня нет четкого мнения об использовании отступа / регистра (отступы от коммутатора предпочтительнее, но неважно), я просто не хочу получать ошибки.

Я установил:

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.

Урок: проверьте больше, удалив конфигурации, которые могут вызывать конфликт перед публикацией.

1 Ответ

0 голосов
/ 03 июня 2019

Чтобы убедиться, что это помечено как решенное:

Я просто удалил конфигурацию для намерений из конфигурации ESLint. Я удалил это:

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

А теперь, похоже, ведет себя нормально. Я предполагаю, что это потому, что это портит Преттир при попытке обработать отступы. Мне нужна была только конфигурация для Prettier.

Урок: протестируйте больше, удалив конфигурации, которые могут вызывать конфликт перед публикацией.

...