VS Code has become popular since its initial release in 2015. Released 1 year after Adobe Brackets and a year before Atom. The battle of the text editors began to rival Commercial software Sublime Text. VS Code was designed to be a next-generation Code editor built on top of the Electron Framework. Its lightweight functionality and its extensible features make it fully compatible with the majority of programming languages. Microsoft has also made it cross-platform so it supports Windows, Mac, and Linux. It can even run as a portable app.
Finding the right code editor can be a tedious task. Whether or not you have multiple Code Editors installed for different projects. For example, you might prefer PyCharm (which is technically an IDE) for working with Python or Atom for working with PHP or WordPress. Whatever choice you make is entirely up to you. There is no harm in trying new things. If you have a negative experience to start with, if it is buggy etc, then wait and try it after a few releases. Open Source software relies on developers working together to make improvements so progress can be slow and steady at times. Check out the following extensions available on the marketplace to extend your VS Code.
Does what it says on the tin. The beautify extension extends the built-in beautifier to make your JavaScript, JSON, CSS, Sass, and HTML code look better.
Prettier is an alternative to beautify, above. I don’t recommend that you install both together, however, I find prettier better at formatting Vue files.
A quick development live-server to view your HTML Files. Featuring live browser reload, HTTPS support, SVG support, hotkeys and more.
Adds full HTML5 markup tags including snippets and information regarding their use.
A VS Code colour picker and palette which opens up in a side view and adapts to the width of your theme.
It supports CSS-Colors, HEX, RGBa and HSLa and Google Material Design palette. Other features allow you to convert between colour values and insert using the VS Code’s IntelliSense widget.
Indented Sass syntax highlighting, autocomplete and Formatter for VS Code.
A customisable VS Code Extension that helps you to compile/transpile your SASS/SCSS files to CSS files. Its features include being able to export your CSS file in several ways, ie. expanded, compact, compressed or nested with a .css or .min.css extension. It has support for autoprefix and uses the live-server extension, above, to reload. All can be controlled by a quick status bar control.
Add Javascript and CSS libraries to your HTML files easily through an extensive and editable list of CDN links.
Coding style formatter for CSS, Less, SCSS or Sass which organises your code into beautiful and consistent stylesheets.
More Info
Web accessibility over the past few years has become an important addition to any website. Ths promising extension will highlight and give you hints of elements that you should consider changing. At the time of writing this extension is still in its infancy but will look forward to seeing how it progresses.
This VS Code extension contains ES6 code snippets for JavaScript which also supports the following languages and their file extensions.
If you use a terminal frequently you will find entering the same command, repeatedly, tedious. This extremely useful utility which allows you to save and display shell command snippets. You can save snippets in an individual project or global commands which you can use in all of your projects.
Easily organise, manage and switch between projects using project manager for VS Code. Other features include saving the current workspace, adding favourites, opening projects in a new window.
Visual Studio Live Share enables you to collaboratively edit and debug with others in real-time, regardless of what programming languages you’re using or app types you’re building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more! Developers that join your sessions receive all of their editor context from your environment (e.g. language services, debugging), which ensures they can start productively collaborating immediately, without needing to clone any repos or install any SDKs.
With over 1.9 million installs Path Intellisense is a Visual Studio Code timesaving extension that autocompletes filenames.
This extension quickly searches your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane and highlights them in open files. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.
Easily open and view SVG files in Visual Studio Code.
Generate and insert placeholder images into your HTML in Visual Studio Code using various 3rd party services like Unsplash, placehold.it, LoremFlickr and more. Choose image width, height, text and colours
Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc.
A Visual Studio Code extension to convert the current editor selection from JSON to CSV, and vice versa.
This Visual Studio Code extension allows you to show, edit and CSV data inside with this simple editor
This is far from an exhaustive list of the most popular extensions but with so many to pick from I hope you have found some that will be of use. Let me know your thoughts on your favourite extensions and the reasons why you have chosen them.
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