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.
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:
<meta charset="UTF-8" />
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 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.
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 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 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.
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.
Do you have a favourite code editor? What are your favourite extensions and why?