It’s no secret that VS Code is quickly becoming one of the most popular IDEs for web developers. From the comfort of your favorite text editor, you can debug your client-side code, manage your server-side settings, and deploy with ease.
Here are my favorite extensions when it comes to JavaScript development!
VIASFORA
Always stuck while coding for chained LINQ expression? Give some color to your text blocks and differentiate them easily. Viasfora helps significantly.
Source: Visual Studio Marketplace
Viasfora extension enables you to get colorize LINQ syntax, including nested braces, the appearance of control flow, LINQ keywords, and helps in XML improvements.
IMAGE OPTIMIZER
Apps speed and performance have a significant impact on user experience. Being a developer, it is essential to optimize images used in app development. How about having an extension for Visual Studio that does both lossy and lossless optimization quickly.
Source: Visual Studio Marketplace
It is Image Optimizer that you need to download. It helps you to optimize all PNG, GIF, and JPEG files. With Image Optimizer, you simply right-click any file or folder having images and select one of the image optimization buttons. Right now, the extension helps you as options as per your need, such as Best Quality, Best Compression, and Copy base64 DataURL to clipboard.
VISUAL STUDIO SPELL CHECKER
With 4.7/5 rating and thousands of downloads in Visual Studio Marketplace, Visual Studio Spell Checker proved its importance in the developer’s life.
As VS extension, it checks the spelling of comments, plain text, and strings when you type. It also enables you to spell check the entire project and developed solutions. It also supports multiple languages to spell check. The most interesting this is you can train VS Spell Checker to ignore words, such as “App.config.”
CODEMAID
Supporting multiple programming languages, CodeMaid is truly a gem for Visual Studio users. The CodeMaid extension allows you to clean and simplify the code. Moreover, you get the ability to reorganize, visualize, and navigate through code, comment formatting, and lots more things.
ADDNEWFILE
Avoid those lots of right-clicks that you do to create a file with AddNewFile. Download this useful extension and create a file with any file extension, and any folder by merely hitting Shift+F2.
Source: Visual Studio Marketplace
It also allows you to create deeper folder structures, including files that start with a dot ( .gitignore ).
Source: Visual Studio Marketplace
VS COLOR OUTPUT
Imagine you get notified instantly of your mistakes in the development phase and save several hours of effort. VS Color Output now makes it possible for you.
The extension monitors every line sent to the output window and changes its color based on specified rules.
Source: Visual Studio Marketplace
The default patterns will color build errors in red, warnings in yellow/gold and successful build messages in green. Add the extension and start leveraging it from today
PowerShell
PowerShell is a great object-oriented programming language. If you use this programming language, this is a must-use extension offering PowerShell language support for Visual Studio Code.
Key Features:
- Write and debug PowerShell scripts in VS Code’s IDE-like interface
- Works on platforms like Windows, Linux, and iOS
- Provides tools to find variables and cmdlets references
Sublime Text Keymap
Sublime Text is an excellent text editor for coding. If you are used to Sublime Text keyboard shortcuts and want to use them in VS, this extension brings the most popular Sublime Text keyboard shortcuts to Visual Studio code.
Key Features:
- Extension officially released by Microsoft to import keyboard shortcuts
- Imports the popular Sublime Text keyboards shortcuts used in programming
- Brings keyboard shortcuts used on Windows, Linux and Mac
HTML CSS Class Completion
As awesome as CSS is, it’s hard to remember all CSS classes. This extension auto-completes CSS class names as you type, based on the CSS files in your workspace.
Key Features:
Customize the directories where the extension will search for files
Provides manual re-caching for class definition auto completion
Provides support for PHP, Razor, and Jade
View in Browser
If you like viewing your HTML in a browser frequently for feedback as you code, this Visual Studio code extension will help you do it. It renders HTML files in your system’s default browser.
Key Features:
- Provides two options to edit, one from context menu and another from command
- Set your default browser according to your preference
- Supports Mozilla, Chrome, Internet Explorer and Safari
NgBootstrap Snippets
Get NgBootstrap snippets, which consist of Angular and Bootstrap 4 snippets, with this helpful extension.
Key Features:
- Typing ngb gives a quick list of the snippets available
- Unfolds snippets as soon as you press enter
- Provides alerts, dropdown, progressbar and many other snippets
jQuery Code Snippets
jQuery is a powerful JavaScript library. You won’t remember every single function, and with this extension, you don’t need to. jQuery Code Snippets brings a vast library of over 130 jQuery Code snippets to Visual Studio code.
Key Features:
- Provides a quick list of all the snippets after typing ‘jq’
- Sets single or multiple attributes from the matched elements
- Snippets have been added from the 2015 Visual Studio jQuery Snippets
Bower
Bower makes building apps easy with its package management capabilities, providing access to most Bower commands within VS Code. With the Bower Visual Studio Code extension, you can install, uninstall, search for, and update packages effortlessly.
Key Features:
- Interactive Bower command prompts have been built in the IDE
- Write, install and uninstall bower.json and other Bower packs
- Find files according to the files you are editing
MsSQL
MySQL is a very helpful database tool. This extension helps you develop and connect various systems to the database you use, which helps your team access data more efficiently.
Key Features:
- Customizable command shortcuts and extension options
- Allows you to create and manage various connection profiles
- Connects to SQL Data warehouse, Azure SQL Database, and Microsoft SQL Server
- Evaluate scripts and view results in a grid
- Save results to JSON or .csv file format to see in the editor
VScode-Icons
If the simplistic Visual Studio does not appeal to you, this extension adds icons to VS Code, making it more visually appealing and fun to work in. This extension was originally created to enable icons before VS Code began supporting them for files and folders. Now that VS Code does support icons, VScode-Icons aims to provide the most comprehensive set of icons available.
Key Features:
- Provides a complete set of icons to choose from in VS Code
- User can make icons look different and change the extension association at will
- Allows suggestions to add to the growing icon list
Angular 2+ Snippets
For programmers using the new Angular 2+ and need a supporting snippet extension, this Visual Studio extension is the one you need.
Key Features:
- Provides about 89 Angular 2+ snippets (and growing)
- Snippets are updated for versions 2.4.11 and 4.0.0
- Snippets of TypeScript, HTML, ngRx and code examples are available
- Suggests Angular 2 solutions when Angular 1 keywords are entered
TypeScript Hero
TypeScript lets you check and refactor JavaScript code as you type. TypeScript Hero brings this powerful tool to Visual Studio Code, automatically importing your project and libraries to your current file.
Key Features:
- Adds every missing import in one command
- Fixes coding errors with a feature called ‘Light bulb.’
- Sort and organize your imports and remove unused imports
Path Intellisense
If you have a hard time remembering the path of a file, Path Intellisense can help. It auto-completes filenames as you work, saving you both time and energy.
Key Features:
- Autocomplete feature fills in the file path as you type
- Hidden files can be made visible with a simple setting
- Names with dashes are also shown in autocomplete
Angular Files
Scaffolding can be an important first step when building an app, but it can be complex. This Visual Studio extension lets you quickly scaffold Angular file templates.
Key Features:
- Supports non Angular-cli file structure
- Also supports angular-cli.json with different style extensions
- Provides good support for app structure
Auto-Open Markdown Preview
Previewing markdown files in a parallel window can be a pain due to the need to repeatedly type ‘Ctrl + K V’ or ‘Cmd + KV’. With the help of this Visual Studio Code extension, you can get automatic previews of the Markdown files you open.
Key Features:
- Latest version supports Visual Studio code 1.10.0 and higher
- Removes the need to press ‘Ctrl + K V’ for a preview of the Markdown file
- Shows previews next to the Markdown file you open
Angular v4 TypeScript Snippets
Save time when coding using the snippets you get with this Visual Studio code extension, which adds snippets for Angular for TypeScript and HTML.
Key Features:
- Works with Visual Studio 0.10.1 and higher
- Has been updated for Angular v4.0.0 release
- Keyboard shortcuts to activate snippets from within the editor
ESLint
ESLint enables better code quality by bringing the ESLint library to Visual Studio Code. It also allows you to identify and act on patterns in JavaScript.
Key Features:
- Uses ESLint library from the opened workspace folder
- Documentation for ESLint is provided for new ESLint users
- Searches global version of the file if the library doesn’t have one
Bracket Pair Colorizer
If different brackets confuse you, this Visual Studio code extension will help you match brackets with color-coding options. You can define which characters to match as well as preferred colors.
Key Features:
- Allows custom characters in custom brackets to be configured
- List of various colors available even for orphaned brackets
- New brackets can be added or removed from the list
HTMLHint
HTMLHint is a static code analysis tool that can be used with an IDE to improve the quality of code. If you’re looking to use HTMLHint in Visual Studio Code, there’s an extension for that.
Key Features:
- Highlights errors in the HTML file with squiggles
- Reports numbers of errors on status bar for easy viewing
- Provides options to set and define rules for checking
Haskelly
Program using Haskell causally or as an expert using this Visual Studio extension that enables support for Haskell development.
Key Features:
- Supports Haskell and Cabal (.hs and .cabal)
- Code snippets for structures and popular functions
- Provides complete all round support for Haskell developers
- Customizable according to the preference of the user
GITHUB EXTENSION FOR VISUAL STUDIO
Love working with your repositories on GitHub? No need to fret since GitHub Extension for Visual Studio helps you bring back GitHub Flow into Visual Studio. You do not need personal API tokens to connect and collaborate. Numerous useful features and shortcuts save your time and help you to be more efficient. The source code of the extension is freely available on GitHub, or you can download it directly as an extension from the marketplace.
RESHARPER
Need assistance with unit tests and wish to improve code quality faster? Consider ReSharper as your productivity extension.
Source: Visual Studio Marketplace
Whether it be compiler errors, code smells, runtime errors or redundancies, you get intelligent suggestions for corrections right as you type them.
Source: Visual Studio Marketplace
Apart from this, it lets you export and import your unit tests sessions with your team or between your computers.
Source: Visual Studio Marketplace
Continuous code quality analysis for different programming languages is yet another advantage of having this extension in your Visual Studio.
ML.NET MODEL BUILDER
Need to work on Machine Learning Models, but do not have prior ML expertise? You should download ML.NET Model Builder – a simple UI tool for Visual Studio.
Source: Visual Studio Marketplace
Developers avail this simple visual interface to build, train and ship custom machine learning models in their .NET apps. By using this extension, developers also connect their data stored in files or SQL Server and can train the model and generate code for model training and consumption.
Conclusion
Visual Studio Code, also known as VSCode is a free and open source text editor developed by Microsoft for Windows, Linux and macOS. Visual Studio Code is a great place to develop modern web applications using Node.js, PHP, Python or any other language — all from your desktop.