Most useful Atom packages for developer

Most useful Atom packages for developer

Atom is an open source text and code editor. It was developed by GitHub. It is written in Less and CoffeeScript and supports for multiple programming languages. Atom was initially released as beta version 1.0 on 25th June 2015. It’s using Chromium and Node.JS to build desktop applications. The developers call it a "hackable text editor for the 21st Century". Atom makes the code writing process speedy. You can customize anything by using its tool without touching config file.

There has a good reason to use Atom by developers because it has huge add-on packages. You can download any package from GitHub or directly from Atom and use in your development process. These packages make Atom to do magical things and make the life of the developers easier.

In this article, you are going to enlist the most useful Atom packages that speed up your development process.

So, let’s explore it-

Linter

Linters run from the command line. Linter is one of the best because it’s fast and less intrusive than some other competitors. linter provides an interface to eslint, it’s used on files with the JavaScript syntax.

Emmet

One of the most important Atom add-ons is the Emmet package. Emmet packages make possible to write HTML and CSS code by using abbreviations.

Highlight Selected

Highlight Selected brings the feature to Atom that can show all other instances when selecting a keyword or variable in Sublime Text or Notepad++.

Language-liquid

Atom is pretty good with out-of-the-box syntax highlighting, but it doesn’t have syntax highlighting for Liquid. This is also a great package to use templating static sites or blogs.

Pigments

The Pigments package is a great help. It scans your file (e.g. CSS file), detects all color codes and displays the color code string with the corresponding background color.

Minimap

The minimap is displaying a condensed view of your code for quick navigation. The minimap is known for the Sublime Text code editor. It gives you a preview of the complete file content on the right side of the code editor window.

Atom-beautify

The atom-beautify package will clean up your code, and make it more readable. It has support for a variety of programming languages, including HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, and more. It will only beautify selected text, otherwise, the beautify command Ctrl + Alt + b, or typing “Beautify” from the Command Palette will beautify the whole file.

Git-Plus

The Git-Plus package provides a bunch of shortcuts to commonly used git actions, without switching to the terminal. You can bring up the git-plus commands by typing cmd + shift + h or ctrl + shift + p.

Ask Stack

The Ask Stack Overflow package allows you to quickly search Stack Overflow and get code samples directly from the Atom editor. Just type ctrl + alt + a or type “Ask Stack” in the Command Palette.

Atom File-Icons

The File Icons package displays specific and meaningful icons next to files in your file-tree, fuzzy-finder, and tabs. Atom only displays filename in the tree view on the left side of the editor window. Adding file icons based on the file extensions makes it easier to find files in the tree and keep the overview. The File Icons package adds icons for the most common file.

Autocomplete-paths

Adds path autocompletion to autocomplete+ depending on scope and prefix. It Supports custom scopes defined by the user and it can easily extendable. The autocomplete-paths package autocompletes require and import statements in the editor.

Color-Picker

Color-picker is an out of the box color picker that can be accessed directly from the color selections in your style-sheets. It will pop up a color picker that will dynamically update your color selection depending on your color selection in the color picker window. It also supports more advanced features when utilized with SASS/LESS that you can try out if you are feeling adventurous.

Advanced-open-file

Advanced Open File is a package for helping Atom users to open files and folders easily. It can also create new files and folders if they don’t exist. You can type in a file name and hit enter to open that file in the editor. If the entered file name is not existing yet, the file is created and opened in the editor for editing as well.

JavaScript Snippets

JavaScript Snippets lets you quickly write a portion of JS source code. With defined abbreviations, you don’t need to write complete code. For instance, just type cl to make log and gi for getElementById. This functionality is similar to Emmet, but it runs on JavaScript code. This Atom package provides many of the JavaScript syntaxes like the function, the console, and the loop.

Less Than-Slash

Less Than-Slash package is a quite simple package. It solely adds the closing HTML tag whenever you type </ into the editor. The package recognizes which tag needs to be closed and adds it automatically. It also ignores empty tags such as <br> and <input> from auto-closing. On the package’s Settings page which is available after installation, you can specify the custom tags you want to be ignored. There’s also a Return cursor option that makes the cursor return to the beginning of the closing tag so that you can rewrite both the opening and closing tags at the same time.

Teletype

With Teletype, you can make collaboration within your team successfully and hassle-free. The teletype was created by the official GitHub team and released to the public in late 2017. It allows developers to share their workspace and code in real time with their team members. Teletype makes concepts such as pair programming, social coding, and distributed development possible in real-life development projects. Teletype introduces the concept of real-time portals that are, in fact, shared workspaces. When one of the developers on the team opens a new portal, their active editor tab becomes the shared workplace. Other developers don’t only see the host’s work but can also actively edit the code in real time. Teletype is a peer-to-peer collaboration tool which means there’s no centralized server involved in the process so that the shared workspace remains confidential.

Hope you like our list and feel free to comment on your favorite Atom package(s). Thank you!

Comments (0)

  • To add your comment please or

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.

Got It!