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
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>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.
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 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.
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 VS Code has an extension available that 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 VS 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 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.
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 include a static server.
Conclusion
Do you have a favourite code editor? What are your favourite extensions to install and why?
Discover more from WorldOWeb
Subscribe to get the latest posts sent to your email.