如何使用eslint-prettier / prettier插入评论？

Question

我想关闭更漂亮的规则，在其中换行内联注释。我的ESLint规则no-inline-comments已设置为关闭或警告，因此可以正常使用。事实证明，Prettier仍然想换行和内联评论：

我在VSCode中有一个设置，其中ESLint正在处理JS的漂亮语言，而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/zh-CN/rationale.html#comments

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

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

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

香港专业教育学院与几个人交谈，可能甚至不可能吗？不过，这是某处的规则，应该可以忽略。如果有任何其他信息我可以提供，我会的。

Answer 1

\n

\n

ESLint 和 Prettier 都支持内联注释

\n\n
\n

问题不在于格式化程序或 linter，而在于您的“扩展”字段以及其他问题。

\n

\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0\n您使用的配置稍微复杂。您添加了一个协调 ESLint 和 Prettier 的插件，以便可以像单个工具一样使用它们（这很棒）。您还扩展了规则集以遵守非常挑剔的样式指南，并不是说挑剔的样式指南不好，而是样式指南需要以适合您的方式格式化代码。我会开门见山地告诉你……

\n

Air-bnb 的 JavaScript 样式指南不允许内联评论

\n

\n

@see airbnb/javascript GitHub 存储库 \xe2\x86\x92规则：18.3 和 18.4

\n

\n

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

\n

摆脱爱彼迎风格指南

\n

\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0\n显然，对于那些希望能够在代码中编写内联注释的人来说，air-bnb 并不是一个好的选择。就我个人而言，我认为任何像 Airbnb 指南一样严格的风格指南都应该遵循，唯一的原因是在开发一个有很多人为其做出贡献的项目时。

\n

如何知道何时切换样式指南？

\n

\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0\n如果您发现在 ESLint\ 的配置文件中添加了超过 3 或 4 条规则，则这是一个很好的迹象，可能是样式指导了您的使用不适合你。样式指南应该是配置编辑器的一种快速而简单的方法，如果不是，并且您的项目不是小组项目，为什么要使用它呢？

\n
\n
\n

\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0\n对于这个答案，我将建议一个支持内联注释的“扩展”配置，它也是 ESLint\ 的转到规则集。@请参阅下面的片段。

\n

适用于，这可能是自定义样式指南。一个好的圆形底座如下：

\n

**\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0 "extends": ["eslint:recommended"]**

\n

Prettier ESLint 插件

\n

您还扩展了插件推荐的配置，说实话，您需要知道您的规则在哪里，所以您在这里要做的是遵循包文档的建议ESLint-Plugin-Prettier。如果您阅读了软件包README.md文档，它清楚地说明了以下内容：

\n

\n

插件：prettier/recommended 到底是做什么的？嗯，这就是它的扩展：

\n

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

\n\n

\n
\n

上面引用的意思是，引用中的片段与添加...相同。

\n

\xc2\xa0 \xc2\xa0 \xc2\xa0 \xc2\xa0"extends": ["prettier", "plugin:prettier/recommended"]

\n
\n

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

\n

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

\n
\n

现在我们可以配置影响内联评论的规则

\n

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

\n

  "rules": {\n    "no-inline-comments": "off", // Disable the rule that disables inline comments\n    "max-len": [\n      "error",\n      {\n        "code": 80, // Set to what ever you desire\n        "tabWidth": 4, // Set to what ever you desire\n\n\n        /* The two rules below are important, they configure ESLint such that \n           the value you assign to the `"code": 80` field above doesn\'t apply\n           to inline comments. So your inline comment won\'t get chopped at, or      \n           moved if it is too long. Set the following two fields to `true`. */\n\n        "ignoreTrailingComments": true,\n        "ignoreComments": true,\n      }\n    ]\n  }\n

\n
\n
\n

最终eslintrc.json配置

\n

这是您最终应该得到的配置：

\n

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

\n
\n

更漂亮的配置

\n

在你更漂亮的配置中，如果你设置了一个值printWidth

\n

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

\n

prettier 会将您的内联注释移动到另一行，和/或如果它们比分配给 的值更长（更多字符），则将它们分成几部分"printWidth"，因此，如果您不希望您的注释被黑客攻击或移动，请设置printWidth到一个高得离谱的值，如下所示：

\n

  /** @file "./.prettierrc" */\n\n  {\n    "printWidth": 1000\n  }\n

\n

如果您遵循上述说明，您不仅可以通过内联注释的支持来检查/格式化您的代码，而且从现在起您将可以控制您的配置。

\n
\n