IntelliJ在编写JSX时如何打开自动{}答案

【问题标题】：IntelliJ how to turn of automatic { } when writing JSXIntelliJ在编写JSX时如何打开自动{}
【发布时间】：2018-11-19 20:43:54
【问题描述】：

我正在 IntelliJ 中使用 React，但遇到了一个烦人的问题。在编写 JSX（例如在 Render 中）时，当我按下回车键/自动完成属性时，IntelliJ 会自动插入两个 {}。

例如写如下JS代码时：

const SomeCompenent = () => {
    return (
        <div className="someClassName">
    )
};

IntelliJ 自动写入className={}

这有点假设我总是要使用需要 {} 语法的道具。但是，它使用所有不必要的 {} 降低了代码 (imo) 的可读性。

我在文件 -> 设置 -> 编辑器 -> 常规 -> 智能键中尝试了一些不同的设置，但无济于事。

希望有人能够提供帮助。

【问题讨论】：

我不确定 IntelliJ 但我会提到它在 Webstorm 中的情况，因为它可能是相同的。如果你转到设置 -> 编辑器 -> 代码样式 -> HTML，底部有一个配置选项，上面写着“为 JSX 属性添加”。您可以将其设置为引号、大括号、基于类型（它将使用 PropTypes 中设置的内容）或无。
谢谢，可惜IntelliJ的HTML/XML下没有这样的选项

标签： javascript reactjs intellij-idea jsx

【解决方案1】：

IntelliJ 仍然没有在 UI 中公开 JSX 属性样式，但事实证明您可以手动编辑配置文件。这在 IntelliJ Ultimate 2020.3 中对我有用：

将代码样式方案切换为存储在项目中。
在/.idea/codeStyles/FoobarSchemeName.xml打开配置文件。
在JSCodeStyleSettings 下添加<option name="JSX_ATTRIBUTE_VALUE" value="Based on type" /> 条目以默认为" 而不是{ 用于字符串道具，或者value="None" 既不附加" 也不附加{。
重新启动 IntelliJ。仅仅重新打开项目对我来说是不够的。

如果您缺少JSCodeStyleSettings，请按如下方式添加：

<component name="ProjectCodeStyleConfiguration">
  <code_scheme name="Project" version="173">
    <JSCodeStyleSettings version="0">
      <option name="JSX_ATTRIBUTE_VALUE" value="Based on type" />
    </JSCodeStyleSettings>
  </code_scheme>
</component>

【讨论】：