Я настраиваю свой проект 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.
Урок: проверьте больше, удалив конфигурации, которые могут вызывать конфликт перед публикацией.