Omaha Code.

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

Visual Studio Code – 15 Extensions

We’ve provided a list of 15 awesome Visual Studio Code extensions that’ll make life easier for developers.

VS Code Editor

Pull Requests

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.

Slack Chat

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.

Deployment

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 can refactor your JavaScript to ES6. It can update imports, convert prototype functions to ES6 classes and more. Anytime you see an ellipsis, you may be able to refactor that code. Check the lightbulb to find out.

CSS Preview

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.

Preview CSS

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.

Activity Bar

To start using breadcrumbs, enable it with the View > Toggle Breadcrumbs command or via the breadcrumbs.enabled setting.

View Breadcrumbs

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:

"npm.enableScriptExplorer": true

Preview Images

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.

View Extension

Cosmos DB

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.

Vetur

The Vetur extension is a Vue tooling for VS Code, powered by vue-language-server.

ESLint

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.

macOS Shortcuts

Visual Studio Code CSS Preview