Top 10 Atom Packages for Web Developers

Did you try the Atom? Even though it hasn’t got ancient yet, a lot of people are already in love with it. It is a text editor produced by GitHub which offers a variety of advantages, and the best part about is that it's free to use. Atom accompanies with a bunch of built-in packages, like the integration with Git and tree-look. But to make the most of your development, other packages are necessarily needed.

Below are listed the names of some packages which are a must if you’re a web developer or aspire to be one. A few of them are helpful as it helps you organize your messy code, and there are others through which you can have better access to your files without even quitting Atom. So, let’s get started with the list.

1. Color Picker

As you must have guessed by its name, this one allows you to choose colors and is as simple as, right-click and choosing ‘Color Picker’. If that’s too easy, then you can even access it by pressing CMD/CTRL+SHIFT+C. It works when the cursor is on the text on CSS/SASS/fewer files that holds one of the following color formats: HEX, Hexa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4, or color variable on SASS or LESS. It also provides accessibility to change between the formats which can be quite helpful at times.

See Also: - The Best Python Programming Blog: Catonmat.net Relook

2. Emmet

Emmet is the generalized plugin that you have to install no matter what your text editor environment is. The most prominent feature of Emmet is of expanding abbreviations and then wrapping with acronyms. This enables you to work extremely efficiently when writing HTML, CSS, Sass / SCSS and fewer syntaxes.

3. Minimap

If you are used to writing in Sublime Text, you might be knowing the mini prelook on the right-side window. This feature as the name suggests provides an interface which enables you to quickly scroll through those source codes that are too long to fit in the window height. With Minimap, you have the privilege to set the position to be on the left or right, turn on/off code highlights, and much more. This package accompanies with some other plugins that help in extending its functionality like the color highlighter.

4. Beautify

Beautify helps you to convert your messy code into more clean and readable format. It has tremendous support for various programming languages as the likes of CSS, HTML, JavaScript, PHP, Python, Java, C, C ++, C #, Objective-C, Ruby, CoffeeScript, Typescript, and SQL. After installing this package, right-click it and tap on ‘Beautify editor contents’, or by going through Packages>Atom Beautify>Beautify.

5. Atom Linter

Atom Linter brings you a variety of linting plugins for almost all the major languages, giving the top-level API for linters. The linters are available for JavaScript, CoffeeScript, CSS / SASS / SCSS / LESS / STYLUS, Ruby, Python. There are also more than one plugins available for one particular language like JSHint, JSCS and JSXHint for JavaScript.

See Also: - Browserling: A Gift to All The Web Developers
After you have installed the main package, you have got to install the specific linter for language that you are working on.

6. File Icons

File Icons is also self-explanatory as it adds icons to a specific filename depending on the data type. It will provide drastic visual improvements when you are opening a file on a tab or in a tree look. The file icons can be customized: you are allowed to add your icon and modify the color through the LESS files in the packages/file-icons/styles directory. The default icon is available in 8 colors and three variants (light, medium and dark).

7. JavaScript Snippets

JavaScript Snippets allows you to write a chunk of JS source code quickly. With pre-defined abbreviation, you won’t have to write down code word by word, e.g. just type in cl to make console.log and gi for getElementById. This package can be compared to Emmet, but it runs on JavaScript code. This Atom package provides lots of the JavaScript syntaxes like the function, the console, and the loop.

See Also: - Top 8 Best Offline Java Decompilers For Developers

8. CSS Comb

CSS Comb will make your stylesheet code formatted uniformly, looking nice and pretty. You can also access pre-made sorting preferences based on Yandex, Zen, or even CSSComb itself, or you are alsolutions allowed to choose your preference and set the rules. After installation, the process of getting sorted can be started by holding down the CTRL + ALT + C keys or from the context menu by going through Packages > CSS comb > Comb.

9. Git Plus

Git Plus enables you to keep working with Git without closing the Atom editor. Inside the editor, you can make a Git commit, checkout, push/pull, diff and other git commands. You will have to setup your user.name and user.email on your git config file to make all the functions work. To have accessibility overall git commands, you can open up the palette with CMD + SHIFT + H or just choose Package > Git Plus.

See Also: - Top 10 Offline Java Compilers For Both Beginners & Experts

10. Remote Edit

Remote Edit enables you to see and edit your remote files without as much as leaving the editor or by using other FTP applications. To start, create a new host first, then add through menu Packages > Remote Edit > Add New Host and just put in the login information. Now you are easily able to browse to your remote files. You can also press CTRL+ALT+B to look up for registered host and see the files.