Eslint AirBNB 有 4 个空格用于缩进

Posted 2023-02-21

【中文标题】Eslint AirBNB 有 4 个空格用于缩进

【英文标题】：Eslint AirBNB with 4 spaces for indent

【发布时间】：2018-07-31 19:21:03

【问题描述】：

我正在配置 eslint，并且正在使用 AirBNB 样式指南。

我想将缩进（应该是 2 个空格）改成 4 个空格。但无论我在 .eslintrc 中做什么，我都无法抑制此错误，因此我可以使用 4 个空格的缩进。

我的代码库中到处都有消息“预期缩进 2 个空格，但发现 4 个。(react/jsx-indent)”。

我正在使用 eslint 4.9.0。我该如何解决这个问题？谢谢。

【问题讨论】：

github上的相关问题github.com/yannickcr/eslint-plugin-react/issues/1141

感谢您的回复，但不幸的是，这是用于缩进道具，而不是用于一般代码。

另一种方法是完全删除这个插件（直到核心团队改善用户体验 - 因为一个额外的空白或缩进，抛出Failed to compile 没有意义）：npm remove @vue/cli-plugin-eslint

【参考方案1】：

好的，所以这相对容易做到，可以通过将以下内容添加到您的 eslint 配置中来实现：

// Indent with 4 spaces
"indent": ["error", 4],

// Indent JSX with 4 spaces
"react/jsx-indent": ["error", 4],

// Indent props with 4 spaces
"react/jsx-indent-props": ["error", 4],

【讨论】：

我应该在哪里添加它？ eslint 配置文件在哪里？

这导致语句（如开关）被展平。例如，case xyz: 将被要求与switch (cond) 处于同一级别。

@OhadR 编辑了答案以反映您的问题

@OhadR 将其添加到 eslint 配置的 rules 属性中，该属性应该是项目根目录中的 .eslintrc 文件（与 package.json 文件相同的文件夹），尽管扩展名为的文件各不相同。它也可以在您的package.json 中。

【参考方案2】：

上面的代码应该添加到 ESlint 配置中的 rules 字段中。

module.exports = 
"extends": "eslint:recommended",
"rules": 
    // enable additional rules
    "indent": ["error", 4],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],

    // override default options for rules from base configurations
    "comma-dangle": ["error", "always"],
    "no-cond-assign": ["error", "always"],

    // disable rules from base configurations
    "no-console": "off",

[Source - 参见使用“eslint:recommended”]

【讨论】：

这似乎比 OP 要求的要多。

这是对@OhadR 提出的关于这些规则应该放在哪里的问题的回答。这是 ESlint 配置的示例。

【参考方案3】：

由于接受的答案不完整并且该答案的编辑队列已满，我添加了以下补充：

要简单地禁用 2-space ident 规则，将以下行添加到 esling 配置文件的 rules 属性：

"indent": "off",

要覆盖规则（可能是您想要的）要检查 4 个空格而不是 2 个空格，请添加以下行：

"indent": ["error", 4],

应该是这样的：

// eslintrc.js
module.exports = 
  "extends": [
    "eslint:recommended",
    "airbnb",
  ],
  "rules": [
    "indent": ["error", 4],
  ],
;

ESLint 配置位置

您的 eslint 配置可能在以下任何文件中：

.eslintrc.js .eslintrc.cjs .eslintrc.yaml .eslintrc.yml .eslintrc.json .eslintrc 或者它可能在您的package.json 中，在"eslintConfig" 属性中。

更多关于 eslint 配置：https://eslint.org/docs/user-guide/configuring