Posted in apps
11:35 pm, October 13, 2020

My Favourite Atom Packages (Plugins) 2020

I did a list for this last year, updating it again for this year, i will add and remove packages as i change them. This is just my personal preferences for atom as i usually code in js css html and php with a small amount of aspx. Listed in no particular Order.

I kept loosing packages when i reinstalled atom until i found the package sync-settings, you can add a gist to your github account and link the package there where it will keep a backup of all of your atom settings incase you want to restore it on another pc or re-install which is nice. 

You can also browse through all the packages and sort them by downloads if you want to see the most installed ones.


very useful for syncing your settings and plugins and even themes between different atoms, keeps a copy in a git gist for easy linking in all


you can preview a html file you are editing, it loads it in another pane so when you update the html file and save it it auto reloads the preview very handy!

Access it with: CTRL+SHIFT+H


Edit remotely files on your ftp/sftp(ssh) server without a project. All your connection information will be encrypted.

Very useful for directly editing files on ftp servers directly into atom.


Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom.

Makes your code much more Beautiful!


Automates closing of HTML Tags


Assign file extension icons and colours for improved visual grepping


Highlights the current word selected when double clicking


A package to display colors in project and files.

This one detects hex codes or rgb(a) codes and adds the colour to them good addition to the next colour picker plugin. 

It show the colours inline like the following example:


Right click or press CMD-SHIFT-C/CTRL-ALT-C to open it.

Loads a colour picker from the editor, just highlight the colour and press the above key combo to load it saves loading into gimp or chrome and using that colour picker. 

Save Workspace

not yet tested this one, but thought it might be good as when starting up atom, it takes a few minutes to get back to where you were before.


View Statistics
This Week
This Month
This Year

No Items Found.

Add Comment
Type in a Nick Name here
Search Articles
Search Articles by entering your search text above.

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕


Random Quote
Don't look to be the next Facebook, try to solve a real problem instead.
Random CSS Property


The list-style-image CSS property sets an image to be used as the list item marker.
list-style-image css reference