Skip to main content

Must Have Extensions to install on every Atom, Brackets & VS Code

0

When it comes to open source code editors we are spoilt for choice.  Do you go for Brackets, Atom or Visual Studio Code as an alternative to using a paid for software? Do you install all and use them for different projects?  Here is a list of extensions or packages that enhance the use of your code editor more.

Atom Packages

Emmet

Improve your HTML and CSS workflow with Emmet The code expansion shortcut tool has a full-featured version available for both Atom and Brackets. There is also 3rd party support for Visual Studio Code. It will take a while to get the hang of it but the amount of time it saves in the long run.

Using Atom on Mac, as an example, by simply entering ! followed by shift+ cmd+E it will expand to:

Beautify & Minify

In order to keep your code neat and organised a beautifier is a must. Fortunately, Brackets, Atom and Visual Studio Code all have extensions to help structure your code.

Visual Studio Code

Furthermore, if you don’t have the software, such as CodeKit, to automatically minify your JS and CSS files then you might want to consider a minifying extension to do the job.
Brackets Minifier is available for Brackets. Minify is available for Atom and ESC6-CSS-minify for Code.

File Icons

Having icons displayed along with their associated file types is handy for the visually minded. VSCode Icons has had over 8 Million installs for Code. File Icons for Atom has been installed over 5 Million times. Custom Work for Brackets also adds a tab for all active documents.

CDN Viewer

Ever used a CDN but couldn’t remember its URL? Access the majority of CDN’s through an extension. Quickly insert hosted CDN libraries, such as jQuery, Font Awesome etc with CDN List for Code, Brackets CDN Panel or CDN Libs for Atom.

Minimap

Another useful extension for the visually minded. Minimap allows you to view a preview of the source code from inside the editor. Visual Studio Code has one built into the editor. The feature is activated with an extension for Atom and Brackets.

Code Runner

If you frequently test code being able to test code out in your editor is a big bonus. Thankfully code has an extension available which lets you test for languages like C, C++, Python, PHP, JavaScript, Ruby and many more. Script is the most popular Atom Package with over a million installs. Atom Runner supports JavaScript, CoffeeScript, Ruby, Python, Go, Bash and PowerShell.

There are 2 Brackets extensions one of which is a Windows Only extension that supports Java, JavaScript, CoffeeScript, Python, PHP, Perl and Ruby. Brackets Runscript supports JS, Python, PHP, Ruby and Perl.

Diff Tool

Occasionally you might need to highlight the differences between 2 versions of the same file. Atom has the most feature-rich package with customisable settings and it works with the minimap package.
Brackets and Code have basic extensions that get the job done when needed.

Debugging/Linters

Avoiding errors in your code is just as important as writing clean readable code. Linters are available for the majority of programming languages. Both Atom and Code have a built-in linter and there is also an additional one available as a package for Atom.

The Interactive Linter extension for Brackets works on your code in realtime, displaying errors as you type.

Live Reload

Hitting refresh on your browser is something of the past. Now we have live servers with live reload capacity which injects the code changes directly into the browser without a full refresh. Atom Live Server is a simple development static server with keyboard shortcuts to stop/start and change the port.    Similarly, with over a million installs Live Server for Code is a development server for both dynamic and static files.

Brackets includes a pre-installed static server.

Conclusion

Do you have a favourite code editor? What are your favourite extensions and why?

Topics: