10 Most Useful Atom Packages for Web Developers

Have you given Atom a try? It’s a relatively new text editor created by GitHub. It’s quickly won the hearts of many users, offering the ability to manage GitHub projects and numerous other advantages. The best part? It’s completely free! Atom comes with a few built-in packages like integration with Git and tree-view, but as a web developer, you’ll definitely want to add more.

In this post, I’ll share with you a selection of must-have packages for web developers. Some will help you keep your code organized while others will improve your file management directly within Atom. Let’s dive into the 10 packages you shouldn’t miss.

Color Picker

Hey there! So, listen up. This cool package I’ve got for you is called Color Picker – and let me tell you, it lives up to its name. It’s all about selecting colors, and guess what? It’s super duper easy! Just right-click and choose ‘Color Picker’ or, if you prefer, you can press CMD/CTRL + SHIFT + C. Easy peasy, right?

Now, here’s the thing. Color Picker works like magic when your cursor is hovering over some text on CSS/SASS/LESS files. You know, those special files that deal with all things style-related. It’s designed to work with a bunch of different color formats. We’re talking about HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3, VEC4, and even color variables on SASS or LESS. Pretty impressive, huh?

But hold up, because there’s more! Color Picker doesn’t just let you select colors. It’s also got this awesome ability to convert between different color formats. So, if you ever need to switch things up, this package has got your back.

Emmet

Have you heard of Emmet? It’s a super helpful plugin that you can install in your text editor, no matter which one you use. It has some really cool features that make writing HTML, CSS, Sass/SCSS, and LESS a breeze. One of the best things about Emmet is its ability to expand abbreviations and wrap code with abbreviations. This means you can work faster and more efficiently. Let me give you an example: if you’re writing HTML and you type “p>a.mylink” and then press the TAB key, Emmet will automatically give you the complete HTML tag. How awesome is that? And don’t worry if you’re new to Emmet, there’s a Cheat Sheet that will help you quickly learn its abbreviation syntax.

Minimap

If you’re someone who’s used to Sublime Text, chances are you’re familiar with the handy mini preview on the right side window. It comes in handy when you need to quickly scroll through long source codes that don’t fit within the window height. Well, guess what? You can have that same feature in Atom with the help of Minimap. It lets you add a mini preview window to your Atom interface, and you can even customize its position, turn code highlights on or off, and more. Plus, Minimap comes with some handy plugins like color highlighter that add extra functionality.

But that’s not all. Atom also has a nifty package called Beautify that can work wonders for your messy code. It supports a wide range of programming languages, including HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, and SQL. It’s super easy to use too! Just install the Beautify package, right-click, and choose “Beautify editor contents” or go to Packages > Atom Beautify > Beautify. In no time, your code will be tidied up and much easier to read. It’s like a magic wand for messy code!

Atom Linter: The One-Stop Shop for Linting

Hey there! Have you heard about Atom Linter? It’s like a big family of plugins that help you with linting in different programming languages. Pretty cool, right? It’s got your back whether you’re working with JavaScript, CoffeeScript, CSS / SASS / SCSS / LESS / STYLUS, Ruby, or Python. And guess what? There could even be multiple plugins for one language! For example, JavaScript has JSHint, JSCS, and JSXHint, just to name a few.

But here’s the deal: first, you need to install the Atom Linter main package. Once you’ve got that, you can start rocking the specific linter for your chosen language. Let’s say you’re all about JavaScript and you’ve decided to go with JSHint for your linter. To get it, just open up your Terminal and type in $ apm install linter-jshint. Easy peasy!

File Icons: A Visual Delight

File Icons are a handy feature that give filenames a visual boost by adding icons that represent their file type. Whenever you open a file in tab or tree view, these icons come alive, making your file browsing experience more appealing. The best part is that you can customize these icons to your liking. Want to add your own unique icon? No problem. Want to change the color? Easy peasy. Just head over to the packages/file-icons/styles directory and tweak the LESS files. The default icon options include eight vibrant colors and three distinct styles – light, medium, and dark.

JavaScript Snippets

JavaScript Snippets allows me to quickly write a portion of JavaScript code. Instead of having to write the entire code word for word, I can use predefined abbreviations. For example, I can simply type “cl” to automatically generate “console.log” or “gi” to generate “getElementById”. This feature is similar to Emmet, but it specifically works with JavaScript code. This Atom package includes many JavaScript syntax features such as functions, console commands, and loops.

CSS Comb

CSS Comb helps me ensure that my CSS code is consistently formatted and looks clean and organized. I can choose from pre-made sorting preferences based on Yandex, Zen, or CSSComb itself. Alternatively, I can create my own sorting rules based on my personal preference. After installing this package, I can easily format my CSS code by pressing CTRL + ALT + C or accessing the formatting option from the context menu via “Packages > CSS comb > Comb”.

Git Plus

I love using Git Plus because it lets me work with Git directly in the Atom editor. With Git Plus, I can do things like making commits, checking out branches, pushing and pulling changes, and much more, all without leaving the editor. It’s really convenient.

To use all the features of Git Plus, you need to set up your user name and email in your Git configuration file. This will ensure that everything works smoothly. Once you’ve done that, you can access all the Git commands by opening the palette with CMD + SHIFT + H or by going to Package > Git Plus.

Another great package that I find really useful is Remote Edit. It allows me to view and edit my remote files right within the editor, without needing any external FTP applications. It’s so convenient!

To get started with Remote Edit, all I have to do is create a new host. I can do this by going to the Packages menu, selecting Remote Edit, and then choosing Add New Host. From there, I just need to enter my login information for the host.

Once I’ve added a host, I can easily browse my remote files by pressing CTRL + ALT + B. This brings up a list of registered hosts, and I can choose the one I want to access. From there, I can see all my remote files and make any necessary edits. It’s really handy!