我正在设置我的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。我只需要更漂亮的配置。
课程：在发布前删除可能引起冲突的配置，以进行更多测试。
答案 0 :(得分：2)
我遇到了与上述问题相同的问题，但是我想出了一种解决方法，不仅可以保留“缩进”设置，还可以对其进行调整，从而允许tabWidth被调整随意设置。
首先，我要说明一下，所以我们都在同一页面上，我用于整理/格式化的设置是：
此外，我还配备了以下设备，这些是我使用NPM下载的：
对于使用V.S.代码，你们知道我使用的实际上是简短列表。可以获得各种其他配置，插件和扩展。这里要注意的重要一点是，我使用的是经过验证的真实设置，该设置使Prettier和ESLint可以和谐地协同工作。
话虽如此，即使配置良好，并且所有正确的扩展名，我仍然对上述规则有疑问，就像发布问题的开发人员一样。我知道问题与ESLint的规则有关，以及它们如何在我的.eslintrc.json文件中配置。经过大量研究，并且几乎掌握了ESLint，我发现我是正确的。但是，您需要正确配置一些ESLint规则（3个ESLint规则和1个更漂亮的设置）。同时，您需要确保.prettierrc文件设置与.eslintrc.json文件规则同步。一旦了解了一切，它实际上并没有听起来那么复杂。
首先，您需要确定所需的样式制表符宽度。 （大多数样式指南将制表符宽度设置为（2x空格宽度），但是许多开发人员会将制表符宽度设置为（4x空格宽度。除2x和4x之外的任何东西都被视为忌讳。）
继续打开您的.prettierrc文件（或您使用的任何更漂亮的配置文件的模仿类型），然后根据自己的喜好设置“ tabWidth”，只需确保从此处开始始终保持一致的tabWidth ，因为ESLint需要与漂亮的服务器保持同步。
您的'.prettierrc'文件应类似于以下内容：
{
"printWidth": 90,
"tabWidth": 4,
"useTabs": false,
"trailingComma": "all",
"singleQuote": true,
"semi": true,
"bracketSpacing": false,
}
- 打开您的.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”
- “无标签”规则是一个“必须设置”的规则，不带衬里和格式>可以不同步。
- 您可以根据需要设置“ allowIndentationTabs”，“允许或禁止缩进”选项卡不会有任何作用。
无标签规则应为：
"rules": {
"no-tabs": ["error", {"allowIndentationTabs": true}],
"max-len": [
"error",
{
"code": 90,
"tabWidth": 4,
"ignoreUrls": true
}
],
}
这很重要。它是为了解决开关缩进问题而抛出的，它不能让您控制其他设置，例如设置自己的制表符宽度。 “缩进”规则。
"indent": ["error", 4, {"SwitchCase": 1}],
"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。
答案 1 :(得分：0)
为确保已将其标记为已解决：
我只是从ESLint配置中删除了预期的配置。我删除了此内容：
"indent": ["error", 4, { "SwitchCase": 1 }],
"react/jsx-indent": ["error", 4],
"react/jsx-indent-props": ["error", 4],
现在看来行为正常。我认为这是因为它在尝试处理缩进时弄糟了Prettier。我只需要更漂亮的配置。
课程：在发布前删除可能引起冲突的配置，以进行更多测试。