Скачать или смотреть How to Get Emmet to Autocomplete Self-Closing Tags with / in Visual Studio Code

Learn how to configure Emmet in Visual Studio Code to autocomplete HTML self-closing tags like ` br/ ` instead of ` br `. Enjoy cleaner code with this simple adjustment!
---
This video is based on the question https://stackoverflow.com/q/62475036/ asked by the user 'Apollo-Roboto' ( https://stackoverflow.com/u/10101321/ ) and on the answer https://stackoverflow.com/a/62475037/ provided by the user 'Apollo-Roboto' ( https://stackoverflow.com/u/10101321/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to get Emmet to autocomplete self-closing tags with ' / ' in visual studio code

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
The Problem with Autocompleting Self-Closing Tags in Visual Studio Code

If you are a web developer or someone who dabbles in HTML, you are likely familiar with Emmet – the powerful toolkit that speeds up HTML coding with its intuitive autocomplete features. However, when it comes to self-closing HTML tags—such as <br/>, <img/>, and others—some users have encountered a slight annoyance: Emmet tends to autocomplete them as <br> or <img>, removing the desired forward slash at the end of the tag. This can be frustrating for developers who prefer the clear closure that these self-closing tags provide. So, how can you tweak this setting in Visual Studio Code to show self-closing tags as you’d like? Let's dive in!

The Solution: Adjusting Your Emmet Settings

To ensure that Emmet autocompletes self-closing tags with the forward slash (/), you simply need to make a quick adjustment in your settings.json file. Here’s a straightforward guide on how to do this:

Step-by-Step Instructions

Open Visual Studio Code: Start by launching your Visual Studio Code editor.

Access Settings: To navigate to your settings, you can either:

Click on the gear icon (⚙️) in the lower left corner and select Settings,

Or, you can use the keyboard shortcut by pressing Ctrl + , (Windows/Linux) or Cmd + , (Mac).

Open JSON Settings: In the top right corner of the settings tab, you’ll see an icon that looks like a document with a little arrow (Open Settings (JSON)). Click it to open your settings.json file.

Add the Emmet Config: You will need to insert the following code snippet into your settings.json file:

[[See Video to Reveal this Text or Code Snippet]]

Save Changes: After adding the above code, save your changes to the settings.json file. You can do this by pressing Ctrl + S (Windows/Linux) or Cmd + S (Mac).

What This Change Does

Adding the configuration "self_closing_tag": true to your Emmet settings tells Visual Studio Code to consider self-closing tags as valid when they are autocorrected. This means that now, when you type br and press the autocomplete suggestion, it will produce <br/> instead of <br>. This small adjustment can enhance readability and maintain consistency in your code, ultimately providing you with a better coding experience.

Conclusion

With just a few simple steps, you can set up Emmet in Visual Studio Code to autocomplete self-closing tags with ease. This minor adjustment can significantly improve your HTML coding process, making it clearer and more organized. Happy coding and enjoy the benefits of cleaner HTML!