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.
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> 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.
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.
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.
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?
Welcome to Hot Web Dev November 2024, featuring the latest technology and web development news.… Read More
Welcome to Hot Web Dev October 2024, featuring the latest technology and web development news.… Read More
In this tutorial, you’ll build a fun and interactive guessing game using Svelte 5, the… Read More
Welcome to Hot Web Dev September 2024, featuring the latest technology and web development news.… Read More
The JavaScript guessing game tutorial is a simple beginner's project. It features modern JavaScript syntax… Read More
If you have been following the monthly Hot Web Dev magazine you will find the… Read More