如何在使用eslint-prettier/prettier时支持行内注释？

Question

我想关闭Prettier中的一个规则，即在行内注释处换行。我的ESLint规则no-inline-comments已设置为关闭或警告状态，因此已得到处理并运作正常。结果发现，Prettier仍然希望在行内注释处换行：

我在VSCode中设置了ESLint处理JS的prettier，而Prettier扩展程序则处理其他所有语言。我还使用了airbnb-base。以下是我的相关配置：

.eslintrc.json：

{
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "rules": {
    "no-console": 0,
    "no-plusplus": 0,
    "no-inline-comments": "off",
    "no-undef": "warn",
    "no-use-before-define": "warn",
    "no-restricted-syntax": [
      "warn",
      {
        "selector": "ForOfStatement",
        "message": "frowned upon using For...Of"
      }
    ]
    // "line-comment-position": ["warn", { "position": "above" }]
  },
  "env": {
    "browser": true,
    "webextensions": true
  }
}

VSCode settings.json：

  // all auto-save configs
  "editor.formatOnSave": true,
  // turn off for native beautifyjs
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": ["js"],
  "prettier.trailingComma": "es5"
}

我知道你可以在想要忽略的内容上方使用// eslint-disable-next-line prettier/prettier，但显然我不想每次都设置它。你可以在我的图片中看到它被注释掉了。

通常情况下，最好将注释放置在自己的行上，而不是在行尾。建议使用// eslint-disable-next-line代替// eslint-disable-line。

https://prettier.io/docs/en/rationale.html#comments

我不确定在这种情况下是否有用：

注意：虽然可以通过ESLint配置文件向Prettier传递选项，但不建议这样做，因为编辑器扩展（如prettier-atom和prettier-vscode）将读取.prettierrc，但不会从ESLint中读取设置，这可能导致体验不一致。

https://github.com/prettier/eslint-plugin-prettier#options

我已经与一些人交谈过了，可能根本不可能吗？不过，这是某个规则，应该可以被覆盖。如果有其他信息我可以提供，我会的。

- kinghat

---

我很乐意为此提供解决方案，自从您发布帖子以来，您是否找到了更多信息？ - gotjosh

很抱歉告诉您，我还没有找到解决方案。:( - kinghat

这似乎是一个未解决的问题。 - Developer107

有更新了吗？使用 prettier 的 plugin-ruby 会破坏内联的 rubocop:disable 规则。 - coisnepe

我也遇到了同样的问题，目前还没有解决方法 :/ - Prince Singh

Answer 1

---

ESLint和Prettier都支持内联注释

---

问题不在格式化程序或linter上，而是在于你的"extends"字段，还有其他问题。

你正在使用一个稍微复杂的配置。你添加了一个插件，将ESLint和Prettier进行了协调，以便它们可以像一个单一工具一样使用（这很棒）。你还扩展了规则集，以符合非常挑剔的样式指南，这并不是说挑剔的样式指南不好，但样式指南需要以适合你的方式来格式化代码。我会直接说明问题，并告诉你...

Air-bnb的JavaScript样式指南不允许内联注释

@see airbnb/javascript GitHub Repo → Rules: 18.3 & 18.4

当你使用规则集时，你需要知道它的作用。上面的链接将带您进入Air-bnb JS风格指南的官方文档。该文档可能已经包含了足够的信息让您自己回答这个问题。现在你知道了，如果之前不知道的话。

摆脱Air-bnb风格指南

显然，对于想要能够在代码中编写内联注释的人来说，air-bnb并不是一个好选择。就我个人而言，我认为只有在参与贡献的人很多的项目上才应该遵循像air-bnb这样严格的风格指南。

如何知道何时切换风格指南？

如果您发现您向ESLint的配置文件添加了3或4条以上的规则，那么这是一个很好的指示，表明您使用的风格指南可能不适合您。风格指南应该是配置编辑器的快速简便方法，如果不是，并且您的项目不是团队项目，为什么要使用它呢？

对于这个答案，我建议使用支持内联注释的“extends”配置，并且这也是 ESLint 的默认规则集。 @请参见下面的代码片段。

适用于可能是自定义样式指南的工作。一个好的基础是以下内容：

**        "extends": ["eslint:recommended"]**

Prettier ESLint 插件

您还扩展了插件推荐的配置，老实说，您需要知道自己的规则所在位置，因此您在这里要做的就是遵循 ESLint-Plugin-Prettier 包的文档建议。如果您阅读该包的 README.md 文档，它清楚地说明如下：

Exactly what does plugin:prettier/recommended do? Well, this is what it expands to:

 {
   "extends": ["prettier"],
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": "error",
     "arrow-body-style": "off",
     "prefer-arrow-callback": "off"
   }
 }

---

上面引用的意思是，引用中的片段与添加以下内容相同... "extends": ["prettier", "plugin:prettier/recommended"]

因此，您应该使用以下配置：

  {
    "extends": ["eslint:recommended", "prettier"],
    "plugins": ["prettier"],
    "rules": {
      "prettier/prettier": "error",
      "arrow-body-style": "off",
      "prefer-arrow-callback": "off"
    }
  }

现在我们可以配置影响行内注释的规则了

这是.eslintrc.json文件中的"rules"字段。不要添加此配置，只需查看。

  "rules": {
    "no-inline-comments": "off", // Disable the rule that disables inline comments
    "max-len": [
      "error",
      {
        "code": 80, // Set to what ever you desire
        "tabWidth": 4, // Set to what ever you desire


        /* The two rules below are important, they configure ESLint such that 
           the value you assign to the `"code": 80` field above doesn't apply
           to inline comments. So your inline comment won't get chopped at, or      
           moved if it is too long. Set the following two fields to `true`. */

        "ignoreTrailingComments": true,
        "ignoreComments": true,
      }
    ]
  }

最终的 eslintrc.json 配置

这是您应该得到的配置：

  {
    "extends": ["eslint:recommended", "prettier"],
    "plugins": ["prettier"],
    "rules": {
      "prettier/prettier": "error",
      "arrow-body-style": "off",
      "prefer-arrow-callback": "off",
      "no-inline-comments": "off",
      "max-len": [
        "error",
        {
          "code": 80,
          "tabWidth": 4,
          "ignoreTrailingComments": true,
          "ignoreComments": true
        }
      ]
    }
  }

PRETTIER 配置

在你的 Prettier 配置中，如果你为 printWidth 设置了一个值

  {
    "printWidth": 80, // <-- as shown here
  }

prettier 会将你的内联注释移动到另一行，或者在它们超过 "printWidth" 的值时将它们分成几个部分。因此，如果你不想让你的注释被切割或移动，请将 printWidth 设置为一个非常高的值，例如下面所示：

  /** @file "./.prettierrc" */

  {
    "printWidth": 1000
  }

如果您按照上述说明操作，不仅可以使用支持内联注释的代码检查/格式化工具，而且从此时起，您将掌控自己的配置。

- JΛYDΞV

---

一个风格指南应该是配置你的编辑器的快速简便方式，如果不是这样，并且你的项目不是团队项目，为什么要使用它呢？为了你和未来团队的利益、为了练习或者遵循流行的风格指南，这些都是使用风格指南的原因。 - None