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.
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.
If you are used to writing in Sublime Text, you might be knowing the mini preview 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.
5. Atom Linter
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 view. 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).
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 always 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.
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.