Article

Learning at Work Week #2 – Atom: 17 must have packages!

17 May 2016 | Hao Dong | About a 5 minute read
Tags: Academy, atom, Code, Developers, Development, Learning, Learning at Work Week, Open Source, Product Developers, software development


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!

atom-beautify

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.

https://atom.io/packages/atom-beautify

project-manager

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.

https://atom.io/packages/project-manager

sync-settings

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.

https://atom.io/packages/sync-settings

uglify

This package is the opposite of atom-beautify, it is designed to minify JavaScript files.

https://atom.io/packages/uglify

autoclose-html

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.

https://atom.io/packages/autoclose-html

file-icons

This package doesn’t add much functional value, instead it will assign the relevant icon to each file depending on their file type. For example, if it is a JavaScript file, then you will see the JS logo. This just makes it easier to browse files in a project when using the Tree View.

https://atom.io/packages/file-icons

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.

https://atom.io/packages/flex-tool-bar

https://atom.io/packages/tool-bar

highlight-selected

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!

https://atom.io/packages/highlight-selected

indent-guide-improved

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.

https://atom.io/packages/indent-guide-improved

javascript-snippets

This package can help JavaScript developers code faster by typing simple short commands which generates snippets of code (there is a whole list of them on the package page). My common used ones are: “cl” which prints out `console.log()`, “for” loops and etc.

https://atom.io/packages/javascript-snippets

linter & linter-jshint

It is always a good idea to follow best practices when coding. This is especially true for JavaScript, since it is a dynamic typed (and very forgiving) language. Browsers can execute code with errors in them, and thus it will not be detected during development. However, this makes the code base extremely unstable for additional changes. In my opinion everyone should be using some kind of linter for any language they are working with. In this case, linter-jshint is the best one for JS.

https://atom.io/packages/linter

https://atom.io/packages/linter-jshint

pigments

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).

https://atom.io/packages/pigments

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.

https://atom.io/packages/minimap

https://atom.io/packages/minimap-highlight-selected

https://atom.io/packages/minimap-pigments

 

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

Share this blog post

Related Articles

Careers

We’re looking for bright, dynamic people to join our team!

Discover More Roles