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.
Why Choose VS Code?
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.
Web Development
Beautify
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
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.
Live Server
A quick development live-server to view your HTML Files. Featuring live browser reload, HTTPS support, SVG support, hotkeys and more.
HTML Snippets
Adds full HTML5 markup tags including snippets and information regarding their use.
Color Manager
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.
Sass
Indented Sass syntax highlighting, autocomplete and Formatter for VS Code.
Live Sass Compiler
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.
CDN List
Add Javascript and CSS libraries to your HTML files easily through an extensive and editable list of CDN links.
CSScomb
Coding style formatter for CSS, Less, SCSS or Sass which organises your code into beautiful and consistent stylesheets.
More Info
Web Accessibility
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.
JavaScript (ES6) Code Snippets
This VS Code extension contains ES6 code snippets for JavaScript which also supports the following languages and their file extensions.
- JavaScript (.js)
- TypeScript (.ts)
- JavaScript React (.jsx)
- TypeScript React (.tsx)
- Html (.html)
- Vue (.vue)
CommandList
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.
General Tools
Project Manager
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.
Live Share
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.
Path Intellisense
With over 1.9 million installs Path Intellisense is a Visual Studio Code timesaving extension that autocompletes filenames.
TODO Tree
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.
SVG Viewer
Easily open and view SVG files in Visual Studio Code.
Placeholder Images
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
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.
JSON to CSV
A Visual Studio Code extension to convert the current editor selection from JSON to CSV, and vice versa.
Simple CSV Editor
This Visual Studio Code extension allows you to show, edit and CSV data inside with this simple editor
Conclusion
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.
Discover more from WorldOWeb
Subscribe to get the latest posts sent to your email.