javascript - 使用 WebStorm 使标签成对闭合

标签 javascript react-native webstorm

我使用代码实时模板,react-native 标签自动关闭一个标签,例如 <View/> , 但通常使用 <View></View> .

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

最佳答案

解决方案

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

什么是 snippet在 WebStorm 中?

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

例如,下面是一个片段:

<!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

    ![A1124](A112_images/A1124.png)

  • 转到 File> Settings CTRL+ ALT + S

  • 搜索 Editor (1)Live Templates (2) .您也可以使用 seeker (3)

  • 您会找到一个选择 (4)选择哪个键将展开代码段。

    • 默认是tab(最舒服)。
  • 下面,(5)你会看到所有现有的组和生活模板(Webstorm 已经有几个工厂)。

  • 在右侧 (6) 的部分,您将看到 add 的按钮(+), delete (-), duplicaterestore实时模板。

    注意:您可以添加组或实时模板。建议先加个群更好的整理。

实现

一旦您创建了您的组(在我的例子中是 EDgrid),我们将通过按 + 符号(在上一步中指示)来创建我们的第一个 Live 模板。

我们要做的第一件事是创建一个新的 Template Group ,在我们的案例中,我们将考虑 React , 入选上团React :

![A112](A112_images/A112.png)

我们按Ok .

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

![A1121](A112_images/A1121.png)

  • 在现场Abbreviation当我们要创建自定义代码段时,我们输入名称以获取名称:

  • Description字段,插入个性化描述或将其留空。

  • Template Text我们将介绍的领域

    <View>$END$</View>
    

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

![A1123](A112_images/A1123.png)

我们选择 Javascript .

注意事项

请记住,这会改变您的代码段在格式样式方面的表现

![A1122](A112_images/A1122.png)


测试

![GIF](A112_images/gif.gif)

关于javascript - 使用 WebStorm 使标签成对闭合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43327068/

相关文章:

javascript - React Native 属性未传递给子组件

webstorm - 如何在 webstorm 中从 tslint.json 导入代码格式设置?

javascript - 如何使箭头函数异步?

javascript - 无法连接到数据库 : Error getaddrinfo ENOTFOUND db db:3306

javascript - 在 chrome 中禁用第三方 cookie 时,FB.getLoginStatus 未返回正确状态

react-native - 当在 native 中输入超过 6 个字符时,如何更改 textInput 文本中的字体大小?

javascript - JavaScript 版本的 WebStorm 编辑器出错

javascript - 如何在 WebStorm 中激活 p5js 的自动完成功能?

javascript - 使用 jQuery 从对象标签中选择 ChildElement

javascript - Javascript 中的函数名称(e)