【问题标题】：Make the tags closed in pairs with WebStorm使用 WebStorm 使标签成对闭合
【发布时间】：2017-09-05 17:27:35
【问题描述】：

我使用code live模板，react-native标签自动关闭一个标签，例如<View/>，但通常使用<View></View>。

我可以将 WebStorm 设置为这种样式吗？

【问题讨论】：

不确定我是否关注您...您希望 WebStorm 在 JSX 中生成自闭合标签 (<View/>) 而不是 <View></View>？ youtrack.jetbrains.com/issue/WEB-25937在2017.1.2修复
我正在学习 react jsx。我希望 webstorm 生成标签（，而不是单个）
嗯.. 不是吗？请问您能详细说明您的问题吗？你到底做了什么？
这里有同样的问题。当我输入<V 并使用WebStorm 自动完成时，它会生成<View/> 而不是<View></View>。我尝试过的所有其他 React Native 元素也是如此，例如 Text、Card... 但大多数时候我会期待扩展元素。
我正在使用 WebStorm 进行 React 开发，这让我发疯了（例如，react-bootstrap 列总是自动关闭到 ...）。有没有人找到一种方法来配置某个标签是否应该自动关闭或创建一对标签？

标签： javascript react-native webstorm

【解决方案1】：

解决方案

此问题的一个解决方案是使用 WebStorm 创建 snippet。

什么是 WebStorm 中的 `snippet`？

snippets 是代码部分，我们通常在代码工作中重用它们；也就是说，包含要随时重复的模式的那部分代码。

比如下面是一个sn -p：

<!doctype html>
<html>
<head lang="es">
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>

</body>
</html>

如何实现？

创作

打开我们的 WebStorm IDE
转到File> Settings 或 CTRL+ ALT + S 。
搜索Editor(1)→Live Templates(2)。你也可以使用seeker(3)
你会找到一个选择(4)来选择哪个键将展开sn-p。
- 默认是tab（最舒服）。
下面，(5)，您将看到所有现有的组和生活模板（Webstorm 已经有几个工厂）。
在右侧 (6) 部分，您将看到add (+)、delete (-)、duplicate 或restore 实时模板的按钮。

注意：您可以添加组或实时模板。建议先添加一个组以便更好地组织。

实施

一旦您创建了您的群组（在我的例子中是 EDgrid），我们将通过按 + 符号创建我们的第一个 Live 模板（如上一步所示）。

我们要做的第一件事是创建一个新的Template Group，在我们的例子中，我们将思考React，在组React中选择：

我们按Ok。

下一步将创建一个新的Live Template：

在Abbreviation字段中我们输入名称来获取我们要创建自定义sn-p时的名称：
在Description 字段中，插入个性化描述或将其留空。
在Template Text字段我们会介绍
```
<View>$END$</View>
```

接下来我们将在Define中定义要应用的内容：

我们选择Javascript。

注意

请记住，这会改变您的 sn-p 在格式化样式方面的行为。

测试

【讨论】：

【解决方案2】：

我在使用 IntelliJ 时遇到了同样的问题。

我已经更新到新版本（2018）并解决它。

【讨论】：

解决方案

什么是 WebStorm 中的 snippet？

如何实现？

创作

实施

注意

测试

什么是 WebStorm 中的 `snippet`？