When it comes to open-source code editors we are spoilt for choice. Do you go for Brackets, Atom or Visual Studio Code editors 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 to install on Visual Studio Code, Atom & Brackets. These extensions will enhance the use of your code editor making you super productive.
Top Extensions to Install
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:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html>
Beautify & Minify
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.
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.
Ever used a CDN but couldn’t remember its URL? Access the majority of CDNs 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.
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.
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 VS Code have basic extensions that get the job done when needed.
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 VS Code editors 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 real-time, displaying errors as you type.
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 include a static server.
Do you have a favourite code editor? What are your favourite extensions to install and why?