Publishing Extensions

06 Aug.,2024

 

Publishing Extensions

Publishing Extensions

Once you have made a high-quality extension, you can publish it to the VS Code Extension Marketplace so others can find, download, and use your extension. Alternatively, you can package an extension into the installable VSIX format and share it with other users.

For more information, please visit EXTENTOOL.

This topic covers:

  • Using vsce, the CLI tool for managing VS Code extensions
  • Packaging, publishing and unpublishing extensions
  • Registering a publisher necessary for publishing extensions

vsce

vsce, short for "Visual Studio Code Extensions", is a command-line tool for packaging, publishing and managing VS Code extensions.

Installation

Make sure you have Node.js installed. Then run:

npm install -g @vscode/vsce

Usage

You can use vsce to easily package and publish your extensions:

$

cd

myExtension

$ vsce package

# myExtension.vsix generated

$ vsce publish

# <publisher id>.myExtension published to VS Code Marketplace

vsce can also search, retrieve metadata, and unpublish extensions. For a reference on all the available vsce commands, run vsce --help.

Publishing extensions

Note: Due to security concerns, vsce will not publish extensions that contain user-provided SVG images.

The publishing tool checks the following constraints:

  • The icon provided in package.json may not be an SVG.
  • The badges provided in the package.json may not be SVGs unless they are from trusted badge providers.
  • Image URLs in README.md and CHANGELOG.md need to resolve to https URLs.
  • Images in README.md and CHANGELOG.md may not be SVGs unless they are from trusted badge providers.

Visual Studio Code uses Azure DevOps for its Marketplace services. This means that authentication, hosting, and management of extensions are provided through Azure DevOps.

vsce can only publish extensions using Personal Access Tokens. You need to create at least one in order to publish an extension.

Get a Personal Access Token

First off, follow the documentation to create your own organization in Azure DevOps. In the following examples, the organization's name is vscode, you should use your new organization name as appropriate. Note that the organization's name doesn't necessarily have to be same as your publisher name.

  1. From your organization's home page (for example: https://dev.azure.com/vscode), open the User settings dropdown menu next to your profile image and select Personal access tokens:

  2. On the Personal Access Tokens page, select New Token:

  3. In the Create a new personal access token modal, select the following details for the token:

    • Name: any name you want for the token
    • Organization: All accessible organizations
    • Expiration (optional): set the desired expiration date for the token
    • Scopes: Custom defined:
      • click Show all scopes link below the Scopes section
      • in the Scopes list, scroll to Marketplace and select Manage scope

  4. Click Create.

    You'll be presented with your newly created Personal Access Token. Copy it to the safe location, you'll need it to create a publisher.

Create a publisher

A publisher is an identity that can publish extensions to the Visual Studio Code Marketplace. Every extension needs to include a publisher identifier in its package.json file.

To create a publisher:

  1. Go to the Visual Studio Marketplace publisher management page.

  2. Log in with the same Microsoft account you used to create the Personal Access Token in the previous section.

  3. Click Create publisher in the pane on the left.

  4. In the new page, specify the mandatory parameters for a new publisher - identifier and name (ID and Name fields respectively):

    • ID: the unique identifier for your publisher in Marketplace that will be used in your extension URLs. ID cannot be changed once created.
    • Name: the unique name of your publisher that will be displayed in Marketplace with your extensions. This can be your company or brand name.

    Below is an example of publisher identifier and name for the Docker extension:

  5. Optionally, fill out the rest of the fields.

  6. Click Create

  7. Verify the newly created publisher using vsce. In your terminal, run the following command, and when prompted, type the Personal Access Token created in the previous step:

    vsce login

    <

    publisher id

    >

    https://marketplace.visualstudio.com/manage/publishers/

    Personal Access Token

    for

    publisher

    '<publisher id>'

    :

    ****************************************************

    The Personal Access Token verification succeeded

    for

    the publisher

    '<publisher id>'

    .

Once verified, you are ready to publish an extension.

Publish an extension

You can publish an extension in two ways:

  1. Automatically, using vsce publish command:

    vsce publish

    If you haven't already provided your personal access token with the vsce login command above, vsce will ask for it.

  2. Manually, using vsce package to package the extension into the installable VSIX format and then uploading it to the Visual Studio Marketplace publisher management page:

Review extension installs and ratings

The Visual Studio Marketplace publisher management page gives you access to each extension's Acquisition Trend over time, as well as Total Acquisition counts and Ratings & Reviews. To see the reports, click an extension or choose More Actions > Reports.

Auto-increment the extension version

When publishing an extension, you can auto-increment its version number by specifying the SemVer-compatible number or version (major, minor, or patch) to increment. For example, to update an extension's version from 1.0.0 to 1.1.0, you would specify:

vsce publish minor

or

vsce publish 1.1.0

Both commands will first modify the extension's package.json version attribute and then publish it with the updated version.

Note: If you run vsce publish in a git repo, it will also create a version commit and tag via npm-version. The default commit message will be the extension's version, but you can supply a custom commit message using the -m flag. (The current version can be referenced from the commit message with %s).

Unpublishing extensions

You can unpublish an extension from the Visual Studio Marketplace publisher management page by clicking More Actions > Unpublish:

Once unpublished, the extension's Availability status is changed to Unpublished and it will no longer be available for download from both the Marketplace and Visual Studio Code:

Note: When you unpublish an extension, the Marketplace will preserve the extension statistics.

Removing extensions

You can remove an extension in two ways:

  1. Automatically, using vsce with the unpublish command:

    vsce unpublish

    <

    publisher id

    >

    .

    <

    extension name

    >

  2. Manually, from the Visual Studio Marketplace publisher management page by clicking More Actions > Remove:

In both cases, you will be prompted to confirm the removal by typing the extension name. Note that the removal action is irreversible.

Note: When you unpublish an extension, the Marketplace will remove any extension statistics. You may want to update your extension rather than unpublish it.

Deprecating extensions

You can just deprecate an extension or deprecate in favor of another extension or a setting. The deprecated extension will be rendered with a dimmed strikethrough text in the UI:

Each deprecated extension has a yellow warning icon in the bottom right corner of the extension tile (see the screenshot above). When hovering over the extension tile, you can see deprecation details next to this icon, whether:

  • The extension was deprecated without any alternatives:

  • The extension was deprecated in favor of another extension:

  • The extension was deprecated in favor of a setting:

VS Code will not automatically migrate or uninstall already installed deprecated extensions. If a deprecated extension has an alternative extension, or a setting, VS Code will show a Migrate button to help you quickly switch to the specified alternative:

To mark your extension as deprecated, please leave a comment in the Deprecated extensions discussion thread.

Note: For now, extensions are not rendered as deprecated in the Marketplace. This functionality will be available later.

Packaging extensions

You can choose to package your extension if you want to:

  • Test it on your VS Code instance.
  • Distribute it without publishing it to the Marketplace.
  • Share it with others privately.

Packaging means creating a .vsix file that contains your extension. This file can then be installed in VS Code. Some extensions publish .vsix files as a part of their GitHub releases.

For extension authors, to package an extension, run the following command in your extension's root folder:

vsce package

This command will create a .vsix file in your extension's root folder. For example, my-extension-0.0.1.vsix.

For users, to install a .vsix file in VS Code:

  1. Go to the Extensions view.
  2. Click Views and More Actions...
  3. Select Install from VSIX...

or

in your terminal, run the following command:

# if you use VS Code

code --install-extension my-extension-0.0.1.vsix

# if you use VS Code Insiders

code-insiders --install-extension my-extension-0.0.1.vsix

Your extension folder

To load an extension, you need to copy the files to your VS Code extensions folder .vscode/extensions. Depending on your operating system, this folder has a different location:

  • Windows: %USERPROFILE%\.vscode\extensions
  • macOS: ~/.vscode/extensions
  • Linux: ~/.vscode/extensions

Visual Studio Code compatibility

When authoring an extension, you must specify the versions of VS Code your extension is compatible with. To do this, use the engines.vscode property inside package.json:

{

"engines"

: {

"vscode"

:

"^1.8.0"

}

}

  • A value of 1.8.0 (without caret) means that your extension is compatible only with VS Code 1.8.0.
  • A value of ^1.8.0 means that your extension is compatible with VS Code 1.8.0 and onwards, including 1.8.1, 1.9.0, etc.

You can use the engines.vscode property to ensure the extension only gets installed for clients that contain the API you depend on. This mechanism plays well both with Stable and Insiders releases.

For example, imagine that the latest Stable version of VS Code is 1.8.0. During the development of version 1.9.0, a new API was introduced and made available in the Insider release through the version 1.9.0-insider. If you want to publish an extension version that benefits from this API, you should indicate a version dependency of ^1.9.0. In this way, your new extension version will only be available on VS Code >=1.9.0 (in other words, users with the current Insiders release). Users with the VS Code Stable will only get the update when the Stable release reaches version 1.9.0.

Advanced usage

Marketplace integration

You can customize how your extension looks in the Visual Studio Marketplace. See the Go extension for an example.

Here are some tips for making your extension look great on the Marketplace:

  • Add a README.md file to the root of your extension with the content you want to show on the extension's Marketplace page.

    Note: If you have a repository property in your package.json that points to a public GitHub repository, vsce will automatically detect it and adjust relative links accordingly, using the main branch by default. You can override this with the --githubBranch flag when running vsce package or vsce publish. You can also set base URLs for links and images with the --baseContentUrl and --baseImagesUrl flags.

  • Add a LICENSE file to the root of your extension with the information about the extension's license.

  • Add a CHANGELOG.md file to the root of your extension with the information about the history of the changes for your extension.

  • Add a SUPPORT.md file to the root of your extension with the information about how to get support for your extension.

  • Set the banner background color on the Marketplace page by specifying the corresponding hex value via the galleryBanner.color property in package.json.

  • Set an icon by specifying a relative path to a 128x128px PNG file included in your extension via the icon property in package.json.

See more information in Marketplace Presentation Tips.

Verify a publisher

You can become a verified publisher by verifying ownership of an eligible domain associated with your brand or identity. Once your publisher is verified, the Marketplace will add a verified badge to your extension details.

To verify a publisher:

  1. Go to the Visual Studio Marketplace publisher management page.

  2. In the pane on the left, select or create a publisher you wish to verify.

  3. In the main pane, select the Details tab.

  4. In the Details tab, under the Verified domain section, type an eligible domain.

    Note: Notice an asterisk (*) next to Details tab title after you start typing. Just like in VS Code, this indicates that you have unsaved changes. For the same reason, the Verify button is disabled yet.

  5. Select Save and then Verify.

    A dialog window will appear, providing you with instructions about adding a TXT record to your domain's DNS configuration.

  6. Follow the instructions to add the TXT record to your domain's DNS configuration.

  7. Select Verify in the dialog window to validate that the TXT record has been successfully added.

    Once your TXT record has been validated, the Marketplace team will review your request and let you know the result within 5 business days. The validation includes, but is not limited to: domain, website and extensions content eligibility, legitimacy, trust and positive reputation. New publishers will need a consistent track record demonstrating these for at least 6 months.

If validation is passed, you will see the corresponding badge next to your publisher name in the Visual Studio Marketplace publisher management page:

Notes:

  • Any changes to the publisher display name will revoke the verified badge.
  • Any future Terms of Use or above mentioned validation violations from the publisher will revoke the verified badge.

Eligible domains

Eligible domains meet the following criteria:

  • You must be able to manage the DNS configuration settings and add a TXT record.
  • It is not a subdomain ({subdomain}.github.io, {subdomain}.contoso.com, or similar).
  • It must use an HTTPS protocol.
  • It must be able to respond with an HTTP 200 status to a HEAD request.

Extension pricing label

You can opt-in to show a pricing label on your extension's Marketplace page to indicate that it is Free or Free Trial.

To show a pricing label, add the pricing property to your package.json. For example:

{

"pricing"

:

"Free"

}

Allowed values are: Free and Trial (case-sensitive). When the pricing property is not specified, the default value is Free.

Note: Make sure to use the vsce version >= 2.10.0 when publishing your extension for the pricing label to work.

You can opt-in to sponsorship to give your users a way to support your work.

To show a sponsor link, add the sponsor property to your package.json. For example:

"sponsor"

: {

"url"

:

"https://github.com/sponsors/nvaccess"

}

Note: Make sure to use the vsce version >= 2.9.1 when publishing your extension for sponsorship to work.

The sponsor link will appear on your extension's page in Marketplace and VS Code in the extension details header:

We hope this will allow our users to fund the extensions that they depend on to improve the extension's performance, reliability, and stability.

Using .vscodeignore

You can create a .vscodeignore file to prevent some files from being included in your extension's package. This file is a collection of glob patterns, one per line. For example:

**

/

*

.ts

**

/tsconfig.json

!

file.ts

You should ignore all files not needed at runtime. For example, if your extension is written in TypeScript, you should ignore all **/*.ts files, like in the example above.

Note: Development dependencies listed in devDependencies will be automatically ignored, so you don't need to add them explicitly.

Want more information on Extension Tools? Feel free to contact us.

Pre-publish step

You can add a pre-publish step to your manifest file, which will be called every time the extension is packaged. For example, you may want to invoke the TypeScript compiler at this stage:

{

"name"

:

"uuid"

,

"version"

:

"0.0.1"

,

"publisher"

:

"someone"

,

"engines"

: {

"vscode"

:

"0.10.x"

},

"scripts"

: {

"vscode:prepublish"

:

"tsc"

}

}

Pre-release extensions

Users can install pre-release versions of extensions in VS Code or VS Code Insiders to regularly get the latest extension version before the official extension release.

To publish a pre-release version, pass the --pre-release flag to the vsce package or vsce publish commands:

vsce package --pre-release

vsce publish --pre-release

We only support major.minor.patch for extension versions, semver pre-release tags are not supported. So, if you publish a major.minor.patch-tag release to the Marketplace, it will be treated as major.minor.patch, and the tag will be ignored. Versions must be different between pre-release and regular releases. That is, if 1.2.3 is uploaded as a pre-release, the next regular release must be uploaded with a distinct version, such as 1.2.4. Full semver support will be available in the future.

VS Code will automatically update extensions to the highest version available, so even if a user opted-into a pre-release version and there is an extension release with a higher version, the user will be updated to the released version. So, we recommend that extensions use major.EVEN_NUMBER.patch for release versions and major.ODD_NUMBER.patch for pre-release versions. For example: 0.2.* for release and 0.3.* for pre-release.

If extension authors do not want their pre-release users to be updated to the release version, we recommend always incrementing and publishing a new pre-release version before publishing a release version to make sure that the pre-release version is always higher. Note that while pre-release users will be updated to a release version if it is higher, they still remain eligible to automatically update to future pre-releases with higher version numbers than the release version.

Pre-release extensions are supported after VS Code version 1.63.0, so all pre-release extensions should have the engines.vscode value in their package.json set to >= 1.63.0.

Note: Extensions that already have a separate standalone pre-release extension should reach out to the VS Code team to enable the automatic uninstall of the outdated separate extension and install the pre-release version of the main extension.

Platform-specific extensions

You can publish your extension's VSIX package for each platform (Windows, Linux, macOS) VS Code is running on. We call such extensions platform-specific.

Starting with version 1.61.0, VS Code looks for the extension package that matches the current platform.

Platform-specific extensions are useful if your extension has platform-specific libraries or dependencies, so you can control the exact binaries that are included in a platform package. A common use case is the use of native node modules.

Platform-specific extensions are published as separate packages containing platform-specific content. You can specify the target platform by passing the --target flag. If you don't pass this flag, that package will be used as a fallback for all platforms that have no platform-specific package.

The currently available platforms are: win32-x64, win32-arm64, linux-x64, linux-arm64, linux-armhf, alpine-x64, alpine-arm64, darwin-x64, darwin-arm64 and web.

If you want a platform-specific extension to also support running in the browser as a web extension, it must target the web platform when publishing. The web platform respects the browser entry point in the package.json. To disable the extension capabilities that are not supported in the web, we recommend using when clauses in the package.json instead of shipping separate package.json for the web platform or removing parts of the VSIX that do not work in the web.

Publishing

Starting from version 1.99.0, vsce supports a --target parameter that allows you to specify the target platform while packaging and publishing a VSIX.

Here's how you can publish a VSIX for the win32-x64 and win32-arm64 platforms:

vsce publish --target win32-x64 win32-arm64

Alternatively, you can also use the --target flag when packaging to create a platform-specific VSIX. For example, to package a VSIX for the win32-x64 platform and then publish it:

vsce package --target win32-x64

vsce publish --packagePath PATH_TO_WIN32X64_VSIX

Continuous integration

Managing multiple platform-specific VSIXs might get overwhelming, so we suggest automating your extension's build process with continuous integration (CI) tooling. For example, you can use GitHub Actions to build your extensions. Our platform-specific extension sample can be used as a starting point for learning: its workflow enables the common scenario of using platform-specific extension support to distribute native node modules as dependencies across all supported VS Code targets.

Next steps

  • Extension Marketplace - Learn more about VS Code's public Extension Marketplace.
  • Testing Extensions - Add tests to your extension project to ensure high quality.
  • Bundling Extensions - Improve load times by bundling your extension files with webpack.

Common questions

The Visual Studio Marketplace does not allow an extension package to have more than 10 keywords in the package.json. Keep the number of keywords/tags to less than 10 to avoid this error.

I get 403 Forbidden (or 401 Unauthorized) error when I try to publish my extension?

One easy mistake to make when creating the PAT (Personal Access Token) is to select a specific organization instead of All accessible organizations in the Organizations field dropdown. Another possible mistake is incorrect scope - you should set the Authorized Scopes to Marketplace (Manage) for the publish to work.

I can't unpublish my extension through the vsce tool?

You may have changed your extension ID or publisher ID. You can also manage your extensions directly via the Visual Studio Marketplace publisher management page. For example, update or unpublish.

Why does vsce not preserve file attributes?

Note that when building and publishing your extension from Windows, all the files included in the extension package will lack POSIX file attributes, namely the executable bit. Some node_modules dependencies rely on those attributes to function properly. Publishing from Linux and macOS works as expected.

Can I publish from a continuous integration (CI) build?

Yes, see the Automated publishing section of the Continuous Integration topic to learn how to configure Azure DevOps, GitHub Actions, and GitLab CI to automatically publish your extension to the Marketplace.

I get "ERROR The extension 'name' already exists in the Marketplace" error when I try to publish my extension?

The Marketplace requires the extension name to be unique for every extension. If an extension with the same name already exists in the Marketplace, you will get the following error:

ERROR The extension 'name' already exists in the Marketplace.

The same rule applies for the display name of an extension.

What package managers are supported?

You can either use npm or yarn v1 to manage your extension's dependencies.

I need help with my VS Marketplace account or support in publishing an extension?

You can reach out to the VS Marketplace support team by signing in at Manage Publishers & Extensions and clicking on the &#;Contact Microsoft&#; link at the top right.

Top Visual Studio Code Extensions: 50 Powerful Tools

Top Visual Studio Code Extensions: 50 Powerful Tools

Microsoft&#;s Visual Studio Code provides developers with a robust marketplace packed with useful tools and extensions that make VS Code even more functional and customizable to meet every developer&#;s needs. New extensions are added regularly, and you can find tools, libraries of snippets, and just about anything else you could want to streamline the development process. In fact, Stackify Prefix has its own code extension in the Marketplace &#; the easiest and most powerful .NET profiler you&#;ll find.

Extensions are a vital part of the Visual Studio Code experience.  We decided to take a little tour of the other offerings in the Marketplace to come up with a list of 50 most helpful, must-try extensions (in addition to Stackify Prefix, which we, of course, consider a must-have) for any Visual Studio Code enthusiast. All of the following 50 extensions are free, although some require you to have other programs or services installed. We hope you&#;ll find some great ideas in this list of tools.

Try Stackify&#;s free code profiler, Prefix, to write better code on your workstation. Prefix works with .NET, Java, PHP, Node.js, Ruby, and Python.

By the way, a few of these extensions are TypeScript related. If you aren&#;t familiar with it, check out our article about TypeScript vs JavaScript.

If you&#;re doubtful about your TypeScript quality, verify it with this Visual Studio code extension, which integrates the tslint linter for TypeScript language into VS Code.

Key Features:

  • Checks the quality of your static TypeScript code
  • Analyzes the whole project or a particular section of your code
  • Allows you to auto fix errors when scanning lines of code
  • Supports automated fixing of warnings
  • Requires tslint (installed globally or locally)

A Visual Studio code extension that automatically finds parses and provides you with code actions and code completions for every import you have, Auto Import works with TypeScript and TSX.

Key Features:

  • Easily scans code in large projects
  • Import status bar show you the number of imports available
  • Merge imports from the same location

Docker is one of the hottest trends in development today, and if you use Visual Studio Code, you don&#;t want to miss out. This is the official Docker extension to help you create dockerfiles and add syntax highlights, commands, and snippets to them.

Key Features:

  • Makes creating and launching containerized applications easy
  • Automatically generates dockerfile and docker-compose.yml
  • Dockerfile and docker-compose commands are built into the command palette
  • Syntax highlighting and hover tips
  • Snippets and linting for dockerfile files

Keyboard shortcuts don&#;t just save time but enable you to maintain your flow as you code. They&#;re very popular with Visual Studio users, and this extension makes it possible to use your favorite VS keyboard shortcuts in VS Code.

Key Features:

  • Provides the traditional Visual Studio keyboard shortcuts
  • Easy to add your custom shortcuts
  • Brings shortcuts of Windows, Linux, and Mac to Visual Studio code
  • Find all keyboard shortcuts in the extension&#;s contribution list

Maintain a consistent coding style with this Visual Studio code extension. Even if your teams use multiple IDEs and editors, consistency is achievable with EditorConfig for VS Code. Internally, EditorConfig uses the editorconfig npm package, one of the few EditorConfig cores available. Check out the main EditorConfig site here.

Key Features:

  • Official release by EditorConfig for Visual Studio
  • Define styles for indenting, tabs, and where lines begin and end
  • Text editor plugins for editors to read and follow defined style rules
  • Uses editorconfig npm package

Evernote is one of the most popular note taking apps. It can be used to improve the quality and efficiency of your coding with the Evermonkey extension. This handy Visual Studio Code extension enables Markdown support for Evernote, following the same principles as Sublime Text but with a faster experience.

Key Features:

  • Provides support for Evernote in Visual Studio Code
  • It caches data locally to avoid repetitive net requests for a faster experience
  • UI design updates to be added to improve viewing

Get React and Redux snippets using ES6 for JavaScript to help you structure components with this simple, yet helpful VS Code extension.

Key Features:

  • Provides snippets using JavaScript
  • Quick access to snippets by pressing Ctrl+Space
  • Assists with boilerplate as well

Chrome maintains the most market share among browsers, and it&#;s widely used by developers thanks to its robust marketplace of tools and tricks for simplifying developers&#; lives. This VS Code extension assists you in debugging your JavaScript in Chrome, offering several helpful, time-saving features.

Key Features:

  • Works with other targets that support Chrome debugging protocol
  • Sets breakpoints even on source files when source maps are enabled
  • Debugs script tags and eval scripts as they add added
  • Locals pane, watches, and console

JSHint is a great tool to quickly spot errors with your JavaScript code. If you&#;re used to JSHint, you&#;ll also want to use it in Visual Studio Code, and this extension makes it simple and easy. You can check out the JSHint website here.

Key Features:

  • Uses the default JSHint configuration as described on their site
  • All files are included in this extension by default
  • Allows you to exclude specific files and folders from the review
  • Option to disable JSHint for specified workspaces

Write great C# code for .NET Core with this extension, powered by OmniSharp. It even debugs your code and supports a variety of operating systems. VS Code aims to be a useful tool for cross-platform C# development, and in fact, many Unity game developers use VS Code rather than the MonoDevelop IDE, making this C# extension a particularly useful tool for many developers.

Key Features:

  • Supports debugging and lightweight development tools for .NET Core
  • Editing support for C# including syntax highlighting, IntelliSense, Go to Definition, Find All References, and more
  • C# debugger available on Windows, Mac, and many Linux operating systems

If you have trouble parsing TODOs in the working files of your project, this Visual Studio code extension can help. It lets you parse multi-line TODOs and makes your workflow a lot more actionable.

Key Features:

  • TODO counter is available in the status bar of your current document
  • The counter provides list of all available TODOs
  • Option to parse single and multiple TODOs at once
  • Supports any programming language

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

Use this Visual Studio code extension to add code snippets of Angular (v2 or higher), TypeScript or HTML to your editor. It&#;s an incredibly easy-to-use extension that streamlines coding productivity.

Key Features:

  • Adds Angular version 2 and up, TypeScript or HTML code snippets
  • Multiple snippets provided in the description for both TypeScript and HTML
  • Instantly improve productivity in Angular 2 and up with these snippets

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

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

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

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 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 Visual Studio jQuery Snippets

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

Git is the most popular version control system today. It enables distributed version control for modern web apps. Sometimes, you want to be able to re-trace your code to its previous versions and restore that version. The Git History extension gives you the complete Git history, including a history of inline files, all within Visual Studio Code.

Key Features:

  • Shows history in graphs and charts according to your preference
  • Get multiple history graphs to create a comparison
  • Keyboard shortcuts are provided for quick and easy history viewing

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

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

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 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
  1. 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

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

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

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 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

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

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

Tired of endlessly scrolling through your code, or using a &#;Ctrl + F&#; to find that exact line of code you need to fix? This Visual Studio code Bookmarks extension makes creating and jumping through code easy and smooth.

Key Features:

  • Set bookmarks anywhere in your code for easy access later
  • Autocomplete feature makes navigating to your bookmarks easy
  • Bookmarks are saved on your current project in sessions
  • Bookmarks are restored on reopening the file

Get the Office UI Fabric Snippets support to create HTML document with this Visual Studio code extension. It has many UI elements that can be easily added to your code.

Key Features:

  • Supports UI Fabric 3.0.0 Beta 2
  • Lists available after typing Fabric while coding
  • Provides overall change to the HTML document
  • Breadcrumbs, buttons, callouts, date picker and label are some of many snippets available

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

Use snippets of UI Bootstrap to code your Angular project using this Visual Studio Code extension. In HTML or JavaScript files, simply start typing uib- and Angular UI Bootstrap Snippets provides autocompletions.

Key Features:

  • Autocomplete feature to make finding snippets easy
  • Quickly toggle through different highlighted placeholder by pressing tab
  • Can be added to any JavaScript or HTML file

You may be happy with things that just work, and don&#;t feel the urge to keep updating to the latest version of a framework. If that sounds like you, and you&#;re still using Angular 1, you&#;ll love this extension. It provides snippets for Angular 1 for both JavaScript and TypeScript.

Key Features:

  • Provides snippets for JavaScript and TypeScript
  • Provides snippets for users of Angular 1
  • Quick and easy search for snippets
  • Keyboard shortcuts to streamline your workflow

Many enterprise applications rely on Java. If you&#;re having trouble with developing or editing in Java in Visual Studio Code, this VS code extension will make your life easier by providing language support via Eclipse JDT Language Server, which utilizes Eclipse JDT, M2Eclipse and Buildship.

Key Features:

  • Provides Java support through Eclipse JDT server language
  • Shows status of language tools on lower right corner
  • Provides details about failures in language coding
  • Supports Maven, Gradle and Eclipse
  • Code completion, code navigation, highlights, formatting, snippets and more
  1. Azure Functions Tools

Microsoft Azure is one of the most popular cloud services used by developers and Ops teams to host and manage applications. Azure Functions is a powerful tool that lets you implement code based on event triggers, and the Azure Functions extension makes this possible in Visual Studio Code.

Key Features:

  • Includes JSON IntelliSense for host and function
  • Provides shortcut to quickly activate Intellisense
  • Works on Visual Studio code 1.11.0 and higher

Apache Cordova is a popular mobile development framework. This Cordova extension assists in integrating commands, code-hinting and debugging for Apache Cordova within VS Code.

Key Features:

  • Command palette finds errors in code and debugs them
  • Uses Intellisense to work around plugin APIs
  • Works smoothly with any project based on Cordova
  • Added support for the Ionic framework

A favorite text editor of many programmers, Vim is now emulated in Visual Studio Code. This Vim extension makes writing and editing code easier.

Key Features:

  • Multiple code commands combinations
  • Possess a versatile command remapping capability
  • Multiple Vim commands can be followed by multiple cursors

React Native is the popular mobile development framework open sourced by Facebook. This Reach Native extension lets you edit, develop, debug and integrate commands for React Native, providing a development environment for React Native projects.

Key Features:

  • Creates an environment to support mobile project development
  • Use command palette to debug and quickly run commands
  • Use IntelliSense to browse parameters for React Native APIs

If you&#;re programming with PHP and are looking for an extension to help you debug your PHP code, PHP Debug is the VS Code extension you need, offering a variety of features to streamline development and ensure bug-free code.

Key Features:

  • Acts as an adapter between VS code and XDebug
  • Connects to remote debuggers as well
  • Allows user to set breakpoints according to their preference (line, conditional, and function breakpoints)
  • Break on entry or on uncaught exceptions and errors / warnings / notices
  • Supports multiple, parallel requests
  • Runs as CLI or without debugging

Code Runner is an extension that enables you to run any language&#;s code snippets in Visual Studio Code, with support for every popular programming language including both legacy languages and those that have gained popularity in recent years such as Clojure, Objective-C, Rust, Racket, AutoHotkey, AutoIt, and many others.

Key Features:

  • Provides an Output Window to check the output of a snippet
  • Supports a wide range of programming languages like C++, PHP, Clojure, Racket, Python and much more
  • Custom commands

Generating and adding random data directly into your project, this Visual Studio extension does exactly what its name suggests. It uses the ChangeJS library and was inspired by the Random extension for Atom.

Key Features:

  • Configures names, years, numbers, etc.
  • Multiple commands can be accessed and worked
  • Quick install and launch option

Apart from Jenkins, Travis is a widely known and used CI platform. Checking the build status of your code during the build stage is key. This Visual Studio code extension enables you to check your project&#;s Travis CI status without leaving VS Code.

Key Features:

  • Small status indicator present in the status bar for convenience
  • Update status and open in Travis are two default commands
  • Uses a combination of repository/username to find test

This simple, useful Visual Studio code extension provides you with the option of wrapping the codes you select in HTML brackets.

Key Features:

  • Wraps single or multiple inline selections
  • Quick wrap shortcuts available
  • Supports spaces and tabs for indentation

If you&#;re looking for a tool to help you see the Git Blame to view the revision history for your code, this Visual Studio code extension does just that. It appears in your status bar for easy access.

Key Features:

  • Shows git blame information for selected lines
  • Git blame information pings in the status bar
  • Reduced text size for visibility

Reactjs is a popular open source UI framework released by Facebook. For the developers using Reactjs, this Visual Studio code extension provides snippets in ES6 syntax.

Key Features:

  • Supports languages like JavaScript, TypeScript and React
  • Based on the bable-sublime-snippet package
  • View already-installed snippets or add new snippets

Github Gist is a nifty way to share code and other pieces of text. With the Settings Sync extension, you can sync snippets, themes and other extensions across different machines using Gist.

Key Features:

  • Single click upload and download
  • Supports anonymous, Gist and Github account token to log in
  • Synchronizes settings, snippets, extensions and themes

Switching between projects can become tiresome, slowing down your progress. This Visual Studio code extension makes the navigation process seamless, allowing you to multitask like a pro.

Key Features:

  • Makes projects within Visual Studio easily accessible, and easy to switch between
  • Scans projects and differentiates them according to code used
  • Automatically caches the projects after scanning

These are a few of the many more extensions available in the Visual Studio Marketplace. Each extension serves a particular purpose in helping you program. They perform a variety of tasks like enabling you to add snippets, navigate through projects, use different programming language and add other features. We hope this list helps you and you find the extension you have been searching for and opens up your mind to the ways you can extend Visual Studio Code to simplify and supercharge your development.

Are you interested in learning more about telescopic tools? Contact us today to secure an expert consultation!