Must-Have Text Editor Extensions For Web Developers | Blog

The swim through the online marketing waters is not an easy task. Budgets are often limited, there’...

Download

Kontra Agency December 4, 2017

I started writing code in my high school, at first it was very basic in Notepad. When I learned about Notepad++ it changed the way I was typing code. It was much faster and syntax highlight helped to notice a mistake. At the University I started to use Mac OS and I needed a new text editor. From then I prefer Atom text editor, it works on every operating system, so I can use it on my Mac and PC. You can find it at atom.io

About Atom

It’s lightweight text editor developed by GitHub, built using web technologies with great features. Supports most of the modern programming languages, for me most important Html, PHP, CSS and javascript. Atom helps you write code faster with a smart, flexible autocomplete. Also with file system browser, it’s easy to open a single file or a whole project. It’s also fully customizable with packages and themes.

My favourite packages for web developing

#1 Emmet

My absolute favourite package, with a bunch of handy coding features, extra keyboard shortcuts, and features for automating your workflow. And the best feature of all Emmet Abbreviations. By using Emmet abbreviations it’s possible to write complex HTML structures in short text string. E.g. writing the following text string for a simple header into the code editor:

header>div.logo+ul#navigation>li*5>a{Item $}

and after expanding abbreviation by hitting the TAB key will expand to the following HTML structure:

<header>
 <div class="logo"></div>
 <ul id="navigation">
 <li><a href="">Item 1</a></li>
 <li><a href="">Item 2</a></li>
 <li><a href="">Item 3</a></li>
 <li><a href="">Item 4</a></li>
 <li><a href="">Item 5</a></li>
 </ul>
 </header>

Also starting a new project from scratch just by next text string:

html:5

And after hitting TAB key we get:

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 </head>
 <body>

</body>
 </html>

You can find many more snippets at Emmet.

#2 Pigments

Great package when working with hex colours. It scans your CSS file and detects all colour codes and matches with the corresponding background colour as you can see in the following screenshot:

This makes it easy to directly see if the correct colour code is used. For more info visit official github or in atom via install packages.

#3 Autoprefixer

Newer CSS3 properties have prefixes to handle different rendering engines. Not many properties require these prefixes anymore. These are mostly used for the WebKit, Gecko, and Microsoft engines which are grouped together as vendor prefixes.