使用 JSX Harmony 时，如何让 WebStorm 调整结束标签的缩进以匹配其父标签？

Posted 2023-02-21

【中文标题】使用 JSX Harmony 时，如何让 WebStorm 调整结束标签的缩进以匹配其父标签？

【英文标题】：How can I make WebStorm adjust the indentation of closing tags to match their parent when using JSX Harmony?

【发布时间】：2016-01-23 08:55:54

【问题描述】：

我正在尝试从 Visual Studio 2015 切换到 IntelliJ WebStorm 10.0.4。

在谷歌搜索后，我发现我需要将 javascript 语言切换到 JSX Harmony 才能使 JSX 语法正常工作。

现在，我发现结束标签的缩进变得非常痛苦。

例如，如果我编写以下内容，当我关闭<div> 标记时，它会将其放在下一行的缩进级别。这很好，但我希望一旦我完成标签，它会自动调整到与其匹配的开始标签相同的缩进级别。这是 Visual Studio 2015 中的行为。

'use strict';

var React = require('react');

var MyComponent = React.createClass(
    render: function () 
        return (
            <div>
                </div> //The indentation is wrong here after completing the tag.
        );
    
);

module.exports = MyComponent;

我知道我可以使用 Ctrl + Alt + L 重新格式化代码，但我不想一直这样做。

我尝试过打开和关闭 JSLint 和 JSHint，但它们似乎不能很好地支持 JSX。我也尝试过使用 ESLint，但它似乎有点问题，而且，也没有解决这个问题（应该吗？）。

我是否配置错误？ 有没有办法在 WebStorm 中配置这种行为？

【问题讨论】：

这实际上阻止了我升级和使用 webstorm 进行我的反应工作。

【参考方案1】：

我认为有两种解决方案：

简单的方法是输入<div，然后IDE 会显示选项。你选择“div”这个词，就完成了。

另一种方法是在 WebStorm 首选项中生成“实时模板”。您可以使用 sn-p 而不是输入那么多。您也可以稍后谷歌“如何使用实时模板”。