How to have Atom close HTML tags by itself?


#1

So i’ve been using Atom for a few days now learning web development and I think a few things that we could use to make it a little better is when I make a tag like

or whatever, it automatically creates a end tag for me.


#2

https://atom.io/packages/autoclose-html is quite popular.


#3

Some people also find the Emmet system to be a productivity enhancement (you type an abbreviation, like div.logo, press tab and it expands into one or more full tags). It can do a lot of things.


#4

Hi, thanks for the help.
If I may ask, what are some other useful packages that I could use? Like, quality of life or something that could speed up my workflow?


#5

I use project-viewer all the time (though if you want a dropdown instead of a fixed panel, go with project-manager). I use process-palette to create command line instructions and have some of them bound to buttons on flex-tool-bar so that I can type something like npm install --save react-player and press a button to issue it without having to open my shell at all. atom-commander is ideal for the way I like to use FTP and SFTP. Then there are the cosmetic packages, like file-icons, rainbow-tabs, and multirow-tabs. minimap and pigments are so core that I don’t even think about them until I open Atom on a new computer and they’re not there.

Those are the ones that I would immediately install if I had Atom on a new computer, even if I was only going to be using it for a short time.


#6

A forum usage note:
Posts can be formatted with Markdown code. It is best to mark the code segments you share (like your HTML) to be ignored by the Markdown formatting. There are two mechanisms you can use:

  1. Use the </> button in the post popup window.

  2. Mark the code as…

```HTML
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6> 
```

For more tips and tricks: My Habits for Writing Clearly on Discuss