Atom is an open-source code editor for web development. It is said to be a hackable text editor meaning you can customize almost anything in it for your specific needs. I have been using Atom for web development for quite a while now and I am really impressed with the customizations and features that I get in it. One of the main pros about Atom is that it has a huge ecosystem of packages (like extension or plugins in other text editors). Using them makes life easier and fun.
So, let me list out some of the awesome packages that I use in Atom for web development.
Emmet
Emmet is one of my favorites when it comes to designing the basic HTML structure of a webpage. This package has a list of shortcuts to different tags in HTML. So, for instance, you want to create a division with a class name of “my-division”, all you have to do in Emmet is just type .my-division and hit the Tab key on your keyboard. It will expand to the following:
<div class=”my-division”> </div>
Now, this was just a simple shortcut used most commonly. You can technically create the HTML structure of your whole webpage in a single line in Emmet. I cannot explain every shortcut in this article. You can check out this video to learn more about Emmet.
You can download the package for the Atom code editor here.
Atom-Beautify
Atom-Beautify is an important package if you are working on a pretty big project. When there are hundreds of lines of code in your file, there is a huge probability that some of the tags may not be aligned properly. This can create confusions most of the times. Sometimes you are required to work on someone else’s design and it may not be aligned correctly.
In those cases all you need is Atom-Beautify. Once you install it, it aligns the whole document with just a shortcut key. You can also set it up to beautify the document every time you save the file.
You can download Beautify here.
Atom-Live-Server
Atom-live-server is an amazing package which displays the changes you make in your Atom text editor right on the browser live. Once you install the package, go to the Packages menu and in atom-live-server click on Start Server. It will start a local server and run your project on it. And whenever you save the file, the result gets displayed on the browser live. It can be pretty handy for quick designing.
You can download it here.
Minimap
Minimap is also a pretty useful package which shows your whole document in a small pane on the right or the left of your window. This way you get an idea of where your different design elements are placed in the document. You can even scroll up and down using the minimap itself. There are a plethora of different customizations you can do in this package.
You can install it from this link.
File-Icons
File-icons can come in handy when you are working with a whole lot of different file types in your project. It changes the icons of all the filetypes so that you can know the type of the file (whether it is an HTML, CSS, JavaScript, etc) it is. There are icons for pretty much all the files you need with developing for the web.
You can download it here.
Pigments
Pigments helps you a lot when it comes to colors. When you type value of color in your CSS, pigments will automatically display the color to you. There are different options as to how it should be shown. What I usually do is set the Marker Type to native-dot. So, when you type color in CSS, it will show a dot with the color on the same line.
You can download pigments from this link.
Conclusion
It is always important to save your time in development by letting the packages do the extra tasks for you. You can use the above packages in the Atom code editor and test them out. There are a lot of other awesome packages for Atom. These are just some of the common ones that I use every day. Let me know in the comments below if you liked these packages and if you have any more recommendations please feel free to comment. Thanks for reading.
Happy Coding.