Kilt and Code
Kilt and Code

Visual Studio Code is a code editor that has me falling head over heels for full stack development all over again. Visual Studio’s younger sibling, Visual Studio Code is built using the Electron framework, is open source and was recently announced as the default development environment at Facebook. It’s no surprise that it’s now the most popular development environment according to the Stack Overflow Developer Survey 2019. Controversially, it’s predicted to be on track to replace Visual Studio one day.

VSCode in Stack Overflow Developer Survey 2019

I was hesitant to install Visual Studio Code in the beginning. If it’s built on Electron, it’s essentially a web app, right? HTML, CSS and JavaScript under the hood. How could that be worth using over the heavyweight that is Visual Studio? Where as Visual Studio is known as the ‘heavyweight’ for Microsoft centric development, Visual Studio Code couldn’t be more different. Visual Studio Code adopts the slimline approach of .NET Core; only including the essentials and enabling the user to tailor their experience to specific requirements.

Extensions for Visual Studio Code

With the help of the developer community as well as the Visual Studio Marketplace, a user can install extensions to enhance the features available in Visual Studio Code. In addition to features, extensions can also be useful for enabling Visual Studio Code to support programming languages such as TypeScript, Python, Java, Ruby, Go, PHP, Objective-C and many more.

Visual Studio Code extensions

As much as I was hesitant to use Visual Studio Code, I was reluctant to install too many extensions. Why? I was happy to use one or two to get the job done and didn’t want to bloat my code editor with extensions I never used. What changed my mind? I was investigating a defect in TypeScript and after a few hours I was tearing my hair out! I asked a kind developer on my team to pull the feature-branch to their development environment and within 2 minutes they had identified the issue. I was amazed! One of their installed extensions (TSLint) had highlighted the issue and suggested a quick fix.

As I began exploring more extensions, I thought I’d share those I came across that are worth installing and may save you those crucial few hours in your development time.

Please note: If you have any suggestions for an extension that is missing from this list, please let me know at @kiltandcode and I’ll update this article.

JavaScript, TypeScript & Node

Icon Title Author Description
ESLint ESLint Dirk Baeumer Integrates ESLint JavaScript into VS Code
JavaScript Booster JavaScript Booster Stephan Burguchev Boost your productivity with advanced JavaScript refactorings and commands
JS Refactor JS Refactor Chris Stead Automated refactoring tools to smooth your development workflow
node-readme node-readme bengreenier A vscode extension to view javascript module documentation in editor
npm Intellisense npm Intellisense Christian Kohler Visual Studio Code plugin that autocompletes npm modules in import statements
Debugger for Chrome Debugger for Chrome Microsoft Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol
Debugger for Firefox Debugger for Firefox Firefox DevTools Debug your web application or browser extension in Firefox

Visual Enhancements

Icon Title Author Description
Bracket Pair Colorizer 2 Bracket Pair Colorizer 2 CoenraadS A customizable extension for colorizing matching brackets
Indenticator Indenticator SirTori Highlights your current indent depth
Path Intellisense Path Intellisense Christian Kohler Visual Studio Code plugin that autocompletes filenames
XML XML Red Hat XML Language Support by Red Hat
Beautify Beautify HookyQR Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code
vscode-icons vscode-icons VSCode Icons Team Add useful icons based on file types to the Explorer view


Icon Title Author Description
GitLens - Git supercharged GitLens - Git supercharged Eric Amodio Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more
GitHub Pull Requests GitHub Pull Requests GitHub This extension allows you to review and manage GitHub pull requests in Visual Studio Code


Icon Title Author Description
Capitalize Viable lab Capitalize titles according to The Chicago Manual of Style
Markdown All in One Markdown All in One Yu Zhang All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
Code Spell Checker Code Spell Checker Street Side Software Spelling checker for source code
Word Count Word Count Microsoft Word count for Markdown documents
Paste Image Paste Image mushan Paste image directly from clipboard to Markdown


Icon Title Author Description
GistPad GistPad Live Share Contrib VS Code extension for managing and sharing code snippets, notes and interactive samples using GitHub Gists
Todo Plus Todo Plus Azad Ratzki Create and manage TODO comments with enhanced functionality
Partial Diff Partial Diff Ryuichi Inagaki Compare (diff) text selections within a file, across files, or to the clipboard
Permute Lines Permute Lines earshinov Reverse, Unique, Shuffle lines as in Sublime Text


Icon Title Author Description
PowerShell PowerShell Microsoft Develop PowerShell scripts in Visual Studio Code!
SQL Server (mssql) SQL Server (mssql) Microsoft Develop Microsoft SQL Server, Azure SQL Database and SQL Data Warehouse everywhere
IIS Express IIS Express Microsoft This allows you to run the current folder as a website in IIS Express