Atom Editor is one of the most popular editor in the coding development industry. So, how could you maximise the used of it. We’ll I will introduce you to some of the best extensions that can help you to speed up you coding process. So, let’s jump to it.
Installing packages in atom is very easy because all available packages can be accessed and installed in the editor’s settings view. Open the settings view by selecting menu item Atom > Preferences:
Emmet is the number one code snippet tool used by front end developers. Emmet helps to create HTML and CSS faster with the use of snippets. It uses abbreviations that expand to valid HTML tags.
How To Use It:
Type “html” then press ENTER. (Note: The double quote is not included when you type the html.)
Voila! You have an HTML5 basic web structure.
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
Here is the Cheatsheet (https://docs.emmet.io/cheat-sheet/) that you can look for, once you’re able to add it to your Atom Editor.
2. Atom Beautify
How To Use It:
Once installed in your Atom Editor. Just go to Packages and find the Atom Beautify > beautify.
Minimap is one of Atom’s most popular packages, displaying a condensed view of your code for quick navigation. The feature enters your subconscious; you won’t think you’re using it, but you’ll miss it when it’s not there:
You can see it at the left-side of the Atom Editor.
By default 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 types:
**Notice the Icon of each file in here.*
In web development you often have to deal with color codes. 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 as you can see in the following screenshot:
This makes it easy to directly see if the correct color code is used.
Atom is a really powerful code editor. By using packages the editor functionality can be extended with many more features. Here, we list down 5 packages that mostly part of our development.