Menu
I use the code live template, the react-native tag auto close with one tag, for example is <View/>, but usually using <View></View>.
Can I set the WebStorm to this style?
782
An opening tag begins a section of page content, and a closing tag ends it. For example, to markup a section of text as a paragraph, you would open the paragraph with an opening paragraph tag <p> and close it with a closing paragraph tag </p> (closing tags always proceed the element with a /).
Tags with opening and closing tags are called container tags, and tags with only one opening tag and no closing tag are called empty tags.
A tag must always be closed by the tag close symbol > (if we ignore certain SGML rules that nominally apply in non-XHTML HTML but were never implemented in browsers). What you mean to ask is whether the elements need to be closed by end tags.
WebStorm brings powerful support for HTML that includes syntax and error highlighting, formatting according to the code style, structure validation, code completion, on-the-fly preview during a debugging session (Live Edit) or in the dedicated preview tab in the code editor, and much more.
One solution to this problem is the creation of a snippet with WebStorm.
snippet in WebStorm?The snippets are code portions that we usually reuse in our code work; that is, that portion of code that contains a pattern to be repeated at any time.
For example, the following is a snippet :
<!doctype html>
<html>
<head lang="es">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
</body>
</html>
Open our WebStorm IDE
](https://i.stack.imgur.com/HKgfq.png)
Go to File> Settings or CTRL+ ALT + S .
Search Editor (1) → Live Templates (2). You can also use seeker (3)
You will find a select (4) to choose which key will expand the snippet.
Below, (5) you will see all existing groups and lives templates (Webstorm already has several factory).
In the part on the right (6) you will see buttons for add (+),delete (-), duplicate orrestore live templates.
Note: You can add groups or live templates. It is advisable to add a group first to organize better.
Once you have created your group (in my case EDgrid), we will create our first Live template by pressing the + symbol (indicated in the previous step).
The first thing we will do is the creation of a new Template Group, in our case we will ponderReact, selected on the group React:
](https://i.stack.imgur.com/Z6CQA.png)
We press Ok.
The next step will be the creation of a new Live Template:
](https://i.stack.imgur.com/30HWt.png)
In the field Abbreviation we enter the name to get the name when we want to create the custom snippet:
In the Description field, insert a personalized description or leave it empty.
In the Template Text field we will introduce
<View>$END$</View>
Next we will define the content to apply in Define:
](https://i.stack.imgur.com/3UK6g.png)
We choose Javascript.
Remember that this can change how your snippet acts in terms of formatting style.
](https://i.stack.imgur.com/xwsGA.png)
](https://i.stack.imgur.com/JD7uZ.gif)
86
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
