Eight amazing Atom plugins for rookies Front-end developers
By Anna Branco and Andreina Vargas
Atom is one of the most popular editors among developers, with huge acceptance by both seasoned programmers and students giving their first steps. Even though we are much more closer to the latter, we thought that sharing the little bit of experience we achieved through extensive use of Atom and trials of several different plugins could offer a helping hand for future students.
Thus, this article is focused on novice Front-end developers, for whom we wanted to give our opinion about what we think are the most useful plugins.
First of all, we give a few words about how to install plugins (known as packages) in Atom. The procedure is very straightforward: you just need to open Preferences and them select Install, where you will have a field to write down the plugin name. Atom will return the most close matches and when you have found the one you want, click Install and you are good to go.
The next step is very simple, just open the install packages/Themes by making click in packages, then, click on settings view and select Install Packages/Theme, select Install on the settings menu and type composer-atom-plugin or composer in the Packages search field and you should see the composer-atom-plugin on the list.
Below we have included our rating system based on our opinion of the usefulness of each plugin.
1. Autoclose
Do you get bored about having to close all the tags you open? Have you ever forgotten to close a tag and spent a few hours trying to find out why the heck your perfectly built code wasn’t working? These days are over! You have at your disposal the Autoclose package, which main functionality is… to autoclose (not to hard to guess, eh?:P). With this plugin, whenever you write a <p> tag, for example, it gives you automatically its closing pair </p>.
This is must-have if you want to improve your productivity and never forget to close your opened tags.
Pros: Grants you agility when coding and prevents possible mistakes related to leaving on tag opened.
Cons: You get used to it! And yeah, this is a flaw because you get so used to it that you may lose the habit of closing tags yourself. If you ever have to code without using Autoclose plugin, chances are way higher that you could forget your tags open.
2. Emmet
Have you ever needed to create an HTML list with dozens of items and sighed before starting to type in the same boring <li> a bunch of times? This plugin does the job for you, and much more. Emmet, formerly known as Zen Coding, is an indispensable GO-TO package when it comes to shorthand HTML coding. The main feature in Emmet is the ability to instantly expand simple abbreviations into complex code snippets. It lets you save a huge time by writing the overhead code that is always necessary in order to have correct and sexy-looking HTML.
After you install it (and learn a few useful shortcuts), you are definitely going to ask yourself: “How could I possibly have lived so many years without it?”
Pro: Emmet is a very useful tool that reduces frustration and time while writing HTML.
Cons: Emmet is as useful as you your capacity to memorize the shortcuts it uses. And if you are new in developing HTML content, like us, you don’t practice your HTML writing skills.
3. Linter
Are you someone who types with 100% of accuracy, very keen to details and never make a mistake when coding? If the answer is no, congratulations, you are a normal person and Linter is the package for you. If you skip a “;” on the end of a sentence, or make a typo as “weith” instead of weight, don’t you worry. Linter is here for you; it will raise a flag giving you an alert with the specific line where the error occur and some information about it, so it will be easy to find these snaky errors in you code.
Pros: Fixing errors very easily and real time. There are lots of different types of Linter.
Cons: Install an specific linter for your language and add a .JSON file in you project. Atom get slower. There are lots of different types of Linter.
4. Live Server
Do you feel bored about having to switch to your browser and refreshing your page every time you want to see the changes your make? Live Server might be the answer. It adds a file listener, creating a local server to your files. Thus, when you save your changes the plugin refreshes the http server with the result of your code changes and you can easily preview your work in almost real time.
Pros: The reload capability. You can easily preview your work very quickly.
Cons: You can live without it. You still have to switch the screen to your browser window, and a simple ⌘ Cmd + R will refresh it the same way.
5. Pigments
You always lose time thinking which color is this weird number in your CSS (the hex-color)? Think no more, because with pigments you can see in your CSS a cute bar with the color that you are currently working with and use it in your variables giving you a color guide in you project. It recognizes the main formats of colors reference: hex, rga, rgba and name.
This is one of the most simple and useful Atom plugins. You don’t want to miss it!
Pros: You save time and the look of you atom is prettier :)
Cons: It’s very simple so just use it
6. Preview HTML
Do you feel your needs are not completely fulfilled with Atom Live Server, and feel that you really could benefit from a real time preview inside Atom?
Here is the answer to your prayers. This plugin allows you to preview your HTML page the same moment you code it, without needing to save it or change the application window.
After installing it, for each HTML you want to preview, you just need to have the file opened, click on the menu Packages, then HTML Preview and Enable Preview.
Pros: It does really good on allowing you to preview in real time every change you make on your HTML file, like coding on Codepen, but faster.
Cons: It does not allow real time preview on CSS and JS files. You need to save them first to be able to view their changes on the preview window. Another important thing to consider is that we are so used to saving our work to preview it that we may think it is already saved because we are seeing it done. Be careful not to lose your changes!
7. Teletype
Are you a team player? Do you like — or need — to code together with your teammates but you think it is too boring to have one of you typing while the others group around?
This is your tool! Teletype allows you to create a server and generates a link to share it with your partners. Then all of you can work on the same document together, like Google Docs. You can even share all pages of your project and your colleagues can freely move and edit them. You only have to keep in mind that all changes are saved locally, and as soon you close the server, the other editors would only access their changes after you push it.
Pros: It really helps when you need to work with your team on a single file and you are not available to meet personally to do so — you can work from your own houses. It is also very helpful for students working on group projects where each one can do its part on their own computer.
Cons: It is a little bit tricky to share more than one page of the project. There are some known issues with Linux users that freezes the computer when using it. And it the team is not organized, you may easily bang your heads against each other.
8. TODO-show
Have you ever felt lost when you reopen your project and you couldn’t really remember where you stopped, and what the heck you were doing? If so, Atom’s TODO-show is for you. Writing TODOs is very common when working on early stage projects, with this cool package, you can make the annotations for yourself since it reveals comments scattered through your project containing keywords such as TODO, FIXME, CHANGED, IDEA, BUG, QUESTION and much more. You can easily use its search engine to go right to the tags you’ve placed anywhere through your files, workspace or project.
Pros: It improves your productivity and helps you to keep notes and easily access them. The tags are very useful.
Cons: It is only useful if you remember it. You have to change your coding routine to incorporate tagging TODO items. If you don’t get really used to it, then you will simply forget this package exists and it loses all its meaning.
Obviously, it’s up to you, and how you like to work, which plugins to install and use. We really recommend all these ones since they help you increase productivity and quality. There are many other plugins out there so if you know any others that should be in this list, hit us up with a comment. Thanks for reading!
