Learning at Work Week #2 – Atom: 17 must have packages!
17 May 2016 |
Hao Dong | About a 5 minute read
I started using Atom a few of months ago, and it quickly became my main text-editor. I used to be a Sublime Text fan before Atom, I loved how customisable and lightweight it is. Luckily, Atom inherited all of that, and made it even better in my opinion. This blog will talk about some cool packages (aka plugins) I have discovered in the past few months which have helped me considerably!
It is a nightmare working with code where the indentation and line breaks are all broken. We often need to spend time fixing badly formatted code, it could be to make it more readable or align it with existing code for the purpose of consistency. Either way, it is a real headache and a good way to waste time. But worry no more, this package will solve your problems for you. Copy some badly formatted code, then “beautify” it using a shortcut or through the menu. Then the code will be beautifully formatted! This package also supports many languages.
Ever find yourself constantly switching between projects? If yes, then this package will be perfect for you. All you need to do is open up a project, then save it. Then the next time you need to switch between a project, simply choose it from the list of projects you have saved. This is definitely one of the top packages that I would recommend to anyone.
I work on multiple machines (both my work laptop and my home desktop). So before I discovered this package switching between them caused a lot of pain. With this package, it handled all the config/settings synchronisation and made my life so much easier. When you make a change, they are saved to a gist on your Github account and these changes will be synced with the other machines when you open Atom on them.
When writing HTML, Atom doesn’t automatically match your tags. For example, type `<div>` one might expect the corresponding `</div>` tag to be added as well. But it is not supported out of the box, and this package does exactly that. I personally find this very useful and makes writing HTML much faster.
flex-tool-bar & tool-bar
Both of these two packages work well together and creates a customisable toolbar as the name indicates. The functionality here is almost endless! Plus adding a new button to the toolbar is super simple.
This is a very powerful feature of Sublime Text, as it allows you to highlight all the instances of a word by double clicking on it. Now it has been ported over to Atom!
When editing complex functions or files, it is very easy to get lost in the many levels of indentation. This package shows a white line to help to identify the scope of indentation.
linter & linter-jshint
If you worked with CSS before then you know the pain of looking at a hex code CSS value and having to find out its colour by using another tool. Pigments will show the colours in the current document. It takes the hex codes, RGB colours, or even just the word such as “blue”. There are different views too, I personally like seeing the colour as a dot (see more on the package page).
minimap & minimap-highlighted-selected & minimap-pigments
The Minimap package was the most iconic feature on Sublime Text. Rather than showing a scroll bar, which does not make navigating through the document any easier, it shows a zoomed out version of the current document. You can click to jump to sections, or drag the highlighted area to scroll up and down. Since it is a zoomed out version of the current document you can see all of syntax highlighted as well.
Minimap-highlighted-selected shows highlighted keyword or search results appearing on the minimap. Similarly, minimap-pigments will show the colours on the minimap.
I hope you found this blog post useful. If you have not used Atom before, I would strongly recommend that you give it a try! Let me know in the comments section below if there are any other plugins I haven’t mentioned that you enjoy using!Read More From This Author
React Native Engineer (London)
Champion software quality and technical vision for AND and our clients, work on large-scale projects and help junior and mid developers grow in their roles.
Technologies you will be using
Tech Lead (Reading)
Bring your expert tech knowledge to the table to influence the direction of projects, whilst coaching and your team through engineering best practices.I'm Interested
DevOps Lead (Reading)
Bring your delivery expertise to the table, leading the pack as ambassador on operational requirements, influencing and continuous development.I'm Interested