atom

Ten essential atom packages for web developers

Github’s atom is getting popular very fast. A lot web developers are slowly moving over from sublime text. These Packages should help make your life easier.

Packages can be installed by doing the following:

  • open the + Install panel in the Settings tab then search for a package by name, or
  • install from the command line using apm install <package-name>.

So knowing how to install the packages. Here are my ten essential packages for web developers.

WordPress Core API Support

wordpress-api

wordpress-api

So you’re a web developers for WordPress? WordPress API, is a great package to use then. It has support up to WordPress 4.1. So, when coding the functions will show up in the snippets menu, it supports widget, wp-config, read, comments a wide range of things find them out here! 

https://atom.io/packages/wordpress-api

Or install it through command line or Terminal.

apm install wordpress-api

 

</ Less Than-Slash

</ Less Than-Slash

if you used sublime text you will be used to closing tags as easy as </ well. This package adds that functionality into atom.io.

https://atom.io/packages/less-than-slash

Or install it through command line or Terminal.

apm install less-than-slash

Beautify

Beautify

Beautify


Beautify will turn messy code into something more presentable, and easy to use. Making web developers job easier.  It supports multiple programming languages but some do require you to install programs before you can use it. So please check out atom here.

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

Or install it through command line or Terminal.

apm install atom-Beautify

Merge Conflicts

merge-conflicts

if you use git then this is a great plugin for you. It will help you fix merge conflicts! There is a great documentation for how to use it on the atom package page.

https://atom.io/packages/merge-conflicts

Or install it through command line or Terminal.

apm install merge-conflicts

Markdown Preview Plus (MPP)

MarkdownPreviewPlus

MarkdownPreviewPlus

This is a fork of the original Markdown-preview that comes with atom.io. This comes with the ability to see the changes in real-time. So that’s why I can recommend this package.

https://atom.io/packages/markdown-preview-plus

Or install it through command line or Terminal.

apm install markdown-preview-plus
apm remove markdown-preview

Emmet

Emmet

Emmet

This a great plugin for writings HTML and CSS ultra fast! But the package also comes with ability to customise snippets, expand abbreviation by tab key and more. Well worth giving it a go if you have never tried before.

ul#emmet-pros>li.emmet-pro*3

will output

<ul id="emmet-pros">
<li class="emmet-pro"></li>
<li class="emmet-pro"></li>
<li class="emmet-pro"></li>
</ul>

https://atom.io/packages/emmet

Or install it through command line or Terminal.

apm install emment

pigments

Pigments

Pigments

pigments is a great package for displaying as a highlight of the hex code.

you can also type into the pallet “Pigments: Find Colors”  now showing the palette you can merge duplicates, sort by color,hex,rgb. then even output the patterns into LESS, SASS and SCSS.

https://atom.io/packages/pigments

Or install it through command line or Terminal.

apm install pigments

Minimap

Minimap

Minimap

Minimap is another great package if you are used to text-editors such as sublime text. It has multiple options, and also support for other packages!

https://atom.io/packages/minimap

Or install it through command line or Terminal.

apm install minimap
apm install minimap-pigments
apm install minimap-linter

sass-autocompile

sass-autocompile

sass-autocompile

If you have recently moved over to using sass, then you find out that you need to compile your code. sass-autocompile is a plugin that compiles it for you. it can compile it into expanded,nested,compacted or minified. Its worth looking into if you just getting into SASS. To install you will need nodeJS.

https://atom.io/packages/sass-autocompile

Or install it through command line or Terminal.

npm install node-sass -g
apm install sass-autocompile

Atom Linter

Linter

Linter

Last but not least Linter, is a top layer API to help you code better and cleaner, with fewer errors. It has packages for all the main languages, so no matter what langue you use the code will have fewer errors and better compatibility.

https://atom.io/packages/Linter

Or install it through command line or Terminal.

apm install linter
apm install linter-csslint
apm install linter-jshint

Bonus – File Icons

File Icons

File Icons

File icons, is a great package to add specific icons to the tree view, fuzzy finder and tabs. You can have it in colour or plain it’s up to you!

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

Or install it through command line or Terminal.

apm install file-icons

Web Developers what do you use?

Is there any key packages that I have missed off list them below in the comments!

Leave a comment!

4 Comments

  1. Pingback: Ten essential atom packages for web developers – Internet and Tecnnology Answers for Geeks

  2. Thank you for the merge-conflicts ! That’s wonderful. By the way you’ve got a little typo error on the emmet apm package.

Next ArticleHow to get a free server and domain as a student