Atom is a favourite text editor of choice for coding. I spent a long time with sublime text, until I bit the bullet to try something new. Obviously with all the extra new features, and nicer way to handle customisations and so on, I wanted to share some add-ons (known as packages) I use to make the best of my coding experience. Here are some atom packages to improve workflow drastically.
Atom Beautify
https://atom.io/packages/atom-beautify
This nifty package will allow you to format the page you’re working on, to get rid of uneven spacing, tabs and so on. I use it mostly for PHP and HTML, but works well with a lot of languages. It has a ton of options with the ability to beautify the code automatically on file save. It also works nicely with specific linting requirements. Being able to format the code you’re working on quickly, will make you be a less stressed developer!
Emmet
https://atom.io/packages/emmet
If you haven’t tried emmet then you’re seriously missing out. It’s probably one of the best atom packages to improve workflow. It allows writing in shorthand to allow for faster coding in CSS & HTML, which follows a similar format to how CSS is written. For example…div.container > div > h2
…would create a h2 element wrapped in two DIVs (one having a class of ‘container’). It’s lots of fun to see it in action, and a great package to improve workflow. Visit https://emmet.io/ to find out more about how to use it.
File Icons
https://atom.io/packages/file-icons
This adds colours and appropriate icon images for your directory tree. It makes browsing your files a bit easier at a glance.
Highlight Selected
https://atom.io/packages/highlight-selected
This is handy if you want to view all instances of a particular word in a file. Double click a word, and all instances that match will be highlighted for quick reference. It’s more handy than you realise.
Pigments
https://atom.io/packages/pigments
This package will colour in your hex codes and colour references on the fly in your current file. It’s much better than using comments to annotate the colours you’re using.
Minimap
https://atom.io/packages/minimap
This adds a preview, scrollable sidebar of your code view. You can scroll with it too. Very helpful for at a glance full page code viewing.
Minimap Highlight Selected
https://atom.io/packages/minimap-highlight-selected
This is basically ‘highlight selected’ but applied to the minimap. Genius.
Minimap Pigments
https://atom.io/packages/minimap-pigments
Same deal here, but with the pigments package. Self explanatory.
Pinned Tabs
https://atom.io/packages/pinned-tabs
I’m always pinning my browser tabs for future reference (and to prevent accidental closure). That function is added to atom via this package, and it’s super useful in the context of coding. This was something that was very useful in sublime text.
Sort Lines
https://atom.io/packages/sort-lines
A basic function, albeit very powerful. It sorts any selected text, by a couple of defined options (usually alphabetically ascending). You use it by just highlighting the text you want to sort, and pressing F5. Just don’t do it on a page where you have nothing selected!