修复 ESLint：在 WebStorm 上插入 `·`（更漂亮/更漂亮）

Question

对于以下反应代码，我收到以下错误：

ESLint: Insert `·`(prettier/prettier)

没有找到有关此错误的任何文档 - 我该如何解决？

注意：我正在使用 WebStorm - 不确定它是否相关。

Answer 1

这个问题已经有好几年了，但值得更好的答案和解释

PRETTIER/PRETTIER

Prettier/Prettier不是错误，它正是它所说的，它是Prettier。该规则来自您安装的名为eslint-plugin-prettier 的插件。插件和 Prettier/Prettier 规则的作用是通过 ESLint 执行 prettier，或者真正通过 Prettier/Prettier 规则执行。ESLint 能够进行 Linting 和格式化代码，这会导致 Prettier 出现问题，Prettier 也会格式化代码，但确实以一种被描述为“偏差”的方式进行表述。开发人员通常选择同时使用两者，因此他们可以利用 linter 和偏差格式化程序两者提供的功能，这是超出本答案范围的主题。

为了协调 ESLint 和 prettier，“eslint-plugin-prettier”扩展使用Prettier/Prettier规则通过 ESLint 执行 prettier，这样在使用 prettier 进行格式化并使用 ESLint 进行 linting/修复后出现的任何问题都会显示为由更漂亮/更漂亮。这些错误应解释为 Prettier 与 ESLint 之间的冲突，或者 Prettier 与不同 ESLint-Plugin 之间的冲突。一般来说，问题是ESLint和Prettier配置不协调，需要更改配置.prettierrc，或者.eslintrc.*配置。

实际错误

如上所述，实际的错误不是 Prettier/Prettier。消息中出现 Prettier/ prettier 的原因是因为它是报告错误的规则，但实际错误是以下部分：

"A space is required before a closing bracket."

该错误消息引用了另一个插件添加的规则，这可能会导致与当时（4/2020）处于活动状态的更漂亮的规则发生冲突，但该规则已被弃用，有利于此规则：--jsx-bracket-same-line

不过，发生的实际错误更漂亮地说，我的配置不喜欢react/jsx插件规则修复（或格式化）代码的方式。

Prettier 在错误消息中抱怨的 React 插件规则是JSX-tag-spacing。

仅供参考，这就是您遇到的错误的全部内容。您有几个不同的插件，对使用框架、基于语言并嵌入 HTML 的代码库进行 linting。任何类似的情况都需要您微调您的开发环境、linter、调试器以及其他工具。

Answer 2

它要求您插入一个空格...您可以在Preferences | 中启用Other/Spaces/In empty 标签。编辑 | 代码风格 | HTML以在代码自动格式化时添加空格