Visual Studio Code | 15 Useful Extensions
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. VS Code is free and available on Linux, macOS, and Windows.
Visual Studio Code – 15 Extensions
We’ve provided a list of 15 awesome Visual Studio Code extensions that’ll make life easier for developers.
- Pull Requests
- Angular 7 Snippets
- Slack Chat
- Share Localhost
- Refactor to ES6
- CSS Preview
- Toggle Activity Bar
- Cosmos DB
- Bracket Pair Colorizer
The Github Pull Requests extension from Github allows you to view and interact with your Pull Requests directly from within VS Code.
Angular 7 Snippets
This extension offers TypeScript and HTML snippets and code examples for Angular 2,4,5,6 & 7.
The Slack Chat extension for VS Code embeds a chat window in the editor. This is useful for chatting during Live Share sessions. It also has the added benefit of being able to start a Live Share session with the “/live share” command. Slack Extension
Share Your Localhost
VS Code Live Share enables you to share any TCP process on your computer with people who are currently connected to your Live Share session. Choose “Share Server” from the Command Palette and select a port to share.
App Service is Azure’s Platform as a Service (PaaS) that let’s you deploy and scale web, mobile, and API apps. Use the Azure App Service extension for VS Code to quickly create, manage, and deploy your websites.
Refactor To ES6
VS Code has built-in support for editing style sheets in CSS .css, SCSS .scss and Less .less. In addition, you can install an extension for greater functionality.
Toggle Activity Bar
This extension can create command sequence as one command and bind a key. Also pass arguments to commands by defining a command sequence with args parameter.
To start using breadcrumbs, enable it with the View > Toggle Breadcrumbs command or via the breadcrumbs.enabled setting.
NPM Script Explorer
View and run all of the available npm scripts in your package.json file by enabling the NPM Scripts viewlet. Add the following line to your User Settings file:
The Image Preview Extension shows image preview in the gutter and on hover. Additionally, the Image Preview Extension provides inline previews for images included HTML file types.
The Cosmos DB extension for VS Code puts Mongo DB database access right inside of the editor.
Bracket Pair Colorizer
The Bracket Pair Colorizer extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.
The ESLint extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version.
Visual Studio Code – Toggle Sidebar Focus
Use ⌃/⌘+ 0 to set focus to the Sidebar and ⌃/⌘+ 1 to set it to the editor.
On a Mac, you can use ⌃/⌘+ ⇣ to select a file in the Sidebar Explorer with your keyboard, while on Windows, simply press the enter key.