Loading Image

Almost there...

Loading Image

Loading...

Atom plugins that I use to speed up development of websites

The Atom Text Editor by GitHub is truly amazing. Not only does it come bundled with a lot of pre-installed plugins that already make the development of websites fast but they also allow you install third party plugins directly from within Atom. Here is a list of plugins that I use and recommend.
Michael Jacobsen
8 February 2017 - 10:00
Category: Web
Atom Text Editor Plugins
atom-beautify

This plugin developed by Glavin001 allows you to quickly beautify your code. If you have the tendency to simply start writing your code and skip to the next line without using tabbing (pressing the tab key to indent your code), you can highlight the section you want to beautify or simply not highlight anything, open the Command Palette and run the "Beautify Editor". This is will then quickly beautify your code.

View Plugin

atom-minify

This plugin developed by armin-pfaeffle allows you to quickly minify your JS and CSS files. Minifying your JS and CSS code has the advantage of reducing the loading time of your website. In the past one had to look for minification options online or write one's own script but know you can do that from within Atom. This plugin also has the option to automatically minify your files when you save them.

View Plugin

autoclose-html

This plugin developed by mattberkowitz will automatically add the closing tag when you completed the open tag. We all know the problem of forgetting to close off our tags and then wondering why our entire website breaks or a certain doesn't look like it is supposed to and it end up being a missing closing tag. With this plugin it is a problem of the past.

View Plugin

color-picker

This plugin developed by thomaslindstrom is quite useful as it makes the choosing of colors and getting the correct color codes really fun and easy. I personally don't use it a lot but I can see myself having use of it in the future. You simply right with your mouse inside you code and select "Color Picker" and an interface will show. Here you will then have the option to choose or specify your color and select the format in which the color code should be shown.

View Plugin

file-icons

This plugin developed by file-icons adds file extension icons and colors to your files. This plugin doesn't really improve anything in the sense of development speed but it doesn't make it easier to identify file types and it just look nice.

View Plugin

minimap

This plugin developed by atom-minimap add a preview of the full source code of your file. It is basically a small extra section on either the left or right of the code you are currently working on to give you an easy to see overview of your code. It is ideal if you quickly want to go to a certain section of your code without having to scroll all the way.

View Plugin