Vs code extensions

Extensions Capabilities Overview

Visual Studio Code offers many ways for extensions to extend its capabilities. It can sometimes be hard to find the right Contribution Points and VS Code API to use. This topic splits extension capabilities into a few categories. Each category describes:

However, we also impose restrictions upon extensions to ensure the stability and performance of VS Code. For example, extensions cannot access the DOM of VS Code UI.

Common Capabilities

Common Capabilities are core pieces of functionality that you can use in any extension.

Some of these capabilities include:

Theming

Theming controls the look of VS Code, both the colors of source code in the editor and the colors of the VS Code UI. If you’ve ever wanted to make it look like you’re coding the Matrix by making VS Code different shades of green, or just wanted to create the ultimate, minimalist grayscale workspace, then themes are for you.

Extension Ideas

Declarative Language Features

Declarative Language Features adds basic text editing support for a programming language such as bracket matching, auto-indentation and syntax highlighting. This is done declaratively, without writing any code. For more advanced language features, like IntelliSense or debugging, see Programmatic Language Features.

Extension Ideas

Programmatic Language Features

Programmatic Language Features add rich programming language support such as Hovers, Go to Definition, diagnostic errors, IntelliSense and CodeLens. These language features are exposed through the vscode.languages.* API. An extension can either use these API directly, or write a Language Server and adapt it to VS Code using the VS Code Language Server library.

Although we provide a listing of language features and their intended usage, nothing prevents you from using these API creatively. For example, CodeLens and Hovers are a great way to present additional information inline, while diagnostic errors can be used to highlight spelling or code style errors.

Extension Ideas

Workbench Extensions

Workbench Extensions extend the VS Code Workbench UI. Add new right-click actions to the File Explorer, or even build a custom explorer using VS Code’s TreeView API. And if your extension needs a fully customized user interface, use the Webview API to build your own document preview or UI using standard HTML, CSS, and JavaScript.

Extension Ideas

Debugging

You can take advantage of VS Code’s Debugging functionality by writing Debugger Extensions that connect VS Code’s debugging UI to a specific debugger or runtime.

Extension Ideas

On the other hand, VS Code also offers a set of Debug Extension API, with which you can implement debug-related functionality on top of any VS Code debugger, in order to automate users’ debugging experience.

Extension Ideas

UX Guidelines

To help make your extension fit seemlessly into the VS Code user interface, refer to the UX Guidelines, where you’ll learn the best practices for creating extension UI and conventions for following the preferred VS Code workflows.

Restrictions

There are certain restrictions we impose upon extensions. Here are the restrictions and their purposes.

No DOM Access

Extensions have no access to the DOM of VS Code UI. You cannot write an extension that applies custom CSS to VS Code or adds an HTML element to VS Code UI.

At VS Code, we’re continually trying to optimize use of the underlying web technologies to deliver an always available, highly responsive editor and we will continue to tune our use of the DOM as these technologies and our product evolve. To ensure that extensions cannot interfere with the stability and performance of VS Code, and that we can continue to improve the DOM of VS Code without breaking existing extensions, we run extensions in an Extension Host process and prevent direct access to the DOM.

Extension Marketplace

Increase the power of Visual Studio Code through Extensions

The features that Visual Studio Code includes out-of-the-box are just the start. VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. VS Code’s rich extensibility model lets extension authors plug directly into the VS Code UI and contribute functionality through the same APIs used by VS Code. This article explains how to find, install, and manage VS Code extensions from the Visual Studio Code Marketplace.

Browse for extensions

You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ).

This will show you a list of the most popular VS Code extensions on the VS Code Marketplace.

Each extension in the list includes a brief description, the publisher, the download count, and a five star rating. You can select the extension item to display the extension’s details page where you can learn more.

Note: If your computer’s Internet access goes through a proxy server, you will need to configure the proxy server. See Proxy server support for details.

Install an extension

To install an extension, select the Install button. Once the installation is complete, the Install button will change to the Manage gear button.

Find and install an extension

For example, let’s install the popular TODO Highlight extension. This extension highlights text like ‘TODO:’ and ‘FIXME:’ in your source code so you can quickly find undone sections.

In the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ), type ‘todo’ in the search box to filter the Marketplace offerings to extensions with ‘todo’ in the title or metadata. You should see the TODO Highlight extension in the list.

Select the Install button, and VS Code will download and install the extension from the Marketplace. When the installation is complete, the Install button will be replaced with a Manage gear button.

To see the TODO Highlight extension in action, open any source code file and add the text ‘TODO:’ and you will see the text highlighted.

The TODO Highlight extension contributes the commands, TODO-Highlight: List highlighted annotations and TODO-Highlight: Toggle highlight, that you can find in the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ). The TODO-Highlight: Toggle highlight command lets you quickly disable or enable highlighting.

The extension also provides settings for tuning its behavior, which you can find in the Settings editor ( ⌘, (Windows, Linux Ctrl+, ) ). For example, you might want the text search to be case insensitive and you can uncheck the Todohighlight: Is Case Sensitive setting.

If an extension doesn’t provide the functionality you want, you can always Uninstall the extension from the Manage button context menu.

This has been just one example of how to install and use an extension. The VS Code Marketplace has thousands of extensions supporting hundreds of programming languages and tasks. Everything from full featured language support for Java, Python, Go, and C++ to simple extensions that create GUIDs, change the color theme, or add virtual pets to the editor.

Extension details

On the extension details page, you can read the extension’s README and review the extension’s:

If an extension is an Extension Pack, the Extension Pack section will display which extensions will be installed when you install the pack. Extension Packs bundle separate extensions together so they can be easily installed at one time.

Extensions view filter and commands

You can filter the Extensions view with the Filter Extensions context menu.

There are filters to show:

You can sort the extension list by Install Count or Rating in either ascending or descending order. You can learn more about extension search filters below.

Through this context menu you can control extension updates, enable or disable all extensions, and use the Extension Bisect utility to isolate problematic extension behavior.

Search for an extension

You can clear the Search box at the top of the Extensions view and type in the name of the extension, tool, or programming language you’re looking for.

For example, typing ‘python’ will bring up a list of Python language extensions:

Manage extensions

VS Code makes it easy to manage your extensions. You can install, disable, update, and uninstall extensions through the Extensions view, the Command Palette (commands have the Extensions: prefix) or command-line switches.

List installed extensions

Uninstall an extension

To uninstall an extension, select the Manage gear button at the right of an extension entry and then choose Uninstall from the dropdown menu. This will uninstall the extension and prompt you to reload VS Code.

Disable an extension

If you don’t want to permanently remove an extension, you can instead temporarily disable the extension by clicking the gear button at the right of an extension entry. You can disable an extension globally or just for your current Workspace. You will be prompted to reload VS Code after you disable an extension.

Extensions remain disabled for all VS Code sessions until you re-enable them.

Enable an extension

Similarly if you have disabled an extension (it will be in the Disabled section of the list and marked Disabled), you can re-enable it with the Enable or Enable (Workspace) commands in the dropdown menu.

Extension auto-update

Update an extension manually

If you have extensions auto-update disabled, you can quickly look for extension updates by using the Show Outdated Extensions command that uses the @outdated filter. This will display any available updates for your currently installed extensions. Select the Update button for the outdated extension and the update will be installed and you’ll be prompted to reload VS Code. You can also update all your outdated extensions at one time with the Update All Extensions command. If you also have automatic checking for updates disabled, you can use the Check for Extension Updates command to check which of your extensions can be updated.

Recommended extensions

You can see a list of recommended extensions using Show Recommended Extensions, which sets the @recommended filter. Extension recommendations can either be:

See the section below to learn how to contribute recommendations for other users in your project.

Ignoring recommendations

To dismiss a recommendation, select on the extension item to open the Details page and then select the Manage gear button to display the context menu. Select the Ignore Recommendation menu item. Ignored recommendations will no longer be recommended to you.

Configuring extensions

VS Code extensions may have very different configurations and requirements. Some extensions contribute settings to VS Code, which can be modified in the Settings editor. Other extensions may have their own configuration files. Extensions may also require installation and setup of additional components like compilers, debuggers, and command-line tools. Consult the extension’s README (visible in the Extensions view details page) or go to the extension page on the VS Code Marketplace (click on the extension name in the details page). Many extensions are open source and have a link to their repository on their Marketplace page.

Command line extension management

You can see the extension ID on the extension details page under the Marketplace Info.

Extensions view filters

The Extensions view search box supports filters to help you find and manage extensions. You may have seen filters such as @installed and @recommended if you used the commands Show Installed Extensions and Show Recommended Extensions. Also, there are filters available to let you sort by popularity or ratings and search by category (for example ‘Linters’) and tags (for example ‘node’). You can see a complete listing of all filters and sort commands by typing @ in the extensions search box and navigating through the suggestions:

Here are the Extensions view filters:

These filters can be combined as well. For example: Use @installed @category:themes to view all installed themes.

If no filter is provided, the Extensions view displays the currently installed and recommended extensions.

Sorting

You can sort extensions with the @sort filter, which can take the following values:

Categories and tags

Extensions can set Categories and Tags describing their features.

Note that you must surround the category name in quotes if it is more than one word (for example, category:»SCM Providers» ).

Tags may contain any string and are not provided by IntelliSense, so review the Marketplace to find helpful tags.

Install from a VSIX

If you’d like to learn more about packaging and publishing extensions, see our Publishing Extensions article in the Extension API.

Workspace recommended extensions

A good set of extensions can make working with a particular workspace or programming language more productive and you’d often like to share this list with your team or colleagues. You can create a recommended list of extensions for a workspace with the Extensions: Configure Recommended Extensions (Workspace Folder) command.

An example extensions.json could be:

which recommends a linter extension and a code formatter extension.

.

VS Code prompts a user to install the recommended extensions when a workspace is opened for the first time. The user can also review the list with the Extensions: Show Recommended Extensions command.

Next steps

Here are a few topics you may find interesting.

Common questions

Where are extensions installed?

Extensions are installed in a per user extensions folder. Depending on your platform, the location is in the following folder:

Whenever I try to install any extension, I get a connect ETIMEDOUT error

You may see this error if your machine is going through a proxy server to access the Internet. See the Proxy server support section in the setup topic for details.

Can I download an extension directly from the Marketplace?

Some users prefer to download an extension once from the Marketplace and then install it multiple times from a local share. This is useful when there are connectivity concerns or if your development team wants to use a fixed set of extensions.

To download an extension, navigate to the details page for the specific extension within the Marketplace. On that page, there is a Download Extension link in the Resources section, which is located on the right-hand side of the page.

Once downloaded, you can then install the extension via the Install from VSIX command in the Extensions view command dropdown.

Can I stop VS Code from providing extension recommendations?

Yes, if you would prefer to not have VS Code display extension recommendations in the Extensions view or through notifications, you can modify the following settings:

The Show Recommended Extensions command is always available if you want to see recommendations.

Can I trust extensions from the Marketplace?

The Marketplace runs a virus scan on each extension package that’s published to ensure its safety. The virus scan is run for each new extension and for each extension update. Until the scan is all clear, the extension won’t be published in the Marketplace for public usage.

The Marketplace also prevents extension authors from name-squatting on official publishers such as Microsoft and RedHat.

If a malicious extension is reported and verified, or a vulnerability is found in an extension dependency:

The Marketplace also provides you with resources to make an informed decision about the extensions you install:

If you do see an extension that looks suspicious, you can report the extension to the Marketplace with the Report Abuse link at the bottom of the extension More Info section.

Top 40+ VSCode Extensions for Developers in 2022

Ilana Brudo | 13 min read | December 2, 2021

Table of contents

When crafting code, a productive workspace involves more than just finding the right code editor. Out of the box, VS Code is made for developers by developers. According to the 2021 StackOverflow survey, 71.06% of all respondents use Visual Studio Code as the IDE of choice.

The thing that makes VS Code so popular is the number of extensions available in the Marketplace. With over 30,000 extensions in circulation, the options feel almost limitless – and overwhelming at the same time.

According to WakaTime, a time tracking tool for programmers, Visual Studio Code clocked in over 18 million hours in 2020 of dev work. In addition, Visual Studio Code accounted for 46% of the total time tracked across all the editors used by developers.

Which extensions should you choose? Which extensions are the best for productivity? Code versioning? Aesthetics? Formatting and linting? If you want it, there’s probably an extension somewhere in the Marketplace.

Here are 40+ VS Code extensions – curated, sorted, and categorized to help you increase your productivity and make you more effective as a developer.

Productivity

With over half a million downloads in VS Code marketplace, GraphQL is an up-and-coming plugin extension to watch. GraphQL itself is also growing in popularity and implementation, which means that if you ever encounter it for your next project, GraphQL extension on VS Code is a must-have.

This plugin is maintained by the official GraphQL foundation, which means that it is actively supported and maintains the latest implementation.

Start a free trial
Tabnine is more than just an auto-complete – it is a unique predictive AI-powered code completion that increases your productivity the more you use it.

With this setup, you can have a machine running in the cloud, centralizing your workflow to a single source and there is no need to have source code on the machine you’re working on.

The best part of Settings Sync is that it is entirely free, open-source, and has over 2 million installs under its belt.

We’ve all been there – trying to hunt down tag pairs, especially when there are nests, <>, and logic conditions – only to throw our hands up in frustration because of how manual it is. Auto Rename Tag saves both time and developer sanity.

CSS Peek is a VS Code extension that lets you go to the CSS definition and symbol in the workspace with just a few simple clicks.

Sponsored by TabNine, this time-saving extension is enjoyed by developers and has been installed over 9 million times.

It comes with built-in Kubernetes syntax support and has five core features – validation, document outlining, auto-complete, over support to show descriptions if provided by the schema, and formatter.

Aesthetics Productivity Workflow

With an extensive set of folders and file icons, you can be sure that all your coding needs are visually categorized, making it easy for you to access what you need promptly.

This means that if you have multiple brackets, it is easily color matched for our convenience and code productivity.

Through color, Peacock makes it easy to identify workspaces. All you have to do is open up a VS Code workspace, press F1 to open the command palette, type Peacock, and choose from the predefined colors for your editor.

It supports your standard CSS, SASS, LESS, post CSS, stylus, and XML.

Supporting major icon fonts such as Creative Commons Icon Fonts, Font Logos, and Bootstrap Glyphicons, the Icon Font plugin is a productivity must-have.

This VS Code extension compiles/transpile your SASS and SCSS files to CSS files in real-time with automated live reloading without the need to do anything extra.

Code, Versioning, and Collaboration

Sometimes, the process of dealing with git in the console can be overwhelming. GitLens reduces the mental load of trawling through git files in a console by moving them into our workspaces.

Features like “Enter Flow Mode” can help you protect your time and track development metrics to see your coding metrics as a statistical trend.

Formatting and Linting

Supported types are alerts, queries, TODOs, and highlights. It is also extensible through the comment styling that you may need for other things.

Debugging

This VS Code plugin has helped over 3 million installed users catch spelling errors before they become problematic in the coding workflow.

Language-specific

JavaScript is everywhere, and ES7, React, Redux & GraphQL Snippets cover almost everything you need to get started with modern app development efficiently. This plugin extension makes a great alternative to any other JavaScript-based code snippets that you might already be using.

You don’t have to download all the plugins to have a productive workspace. All you need is a few of the above in each category to get started and cut your coding time down by reducing the amount of code you manually type.

Additional components and tools

Visual Studio Code is a small download by design and only includes the minimum number of components shared across most development workflows. Basic functionality like the editor, file management, window management, and preference settings are included. A JavaScript/TypeScript language service and Node.js debugger are also part of the base install.

If you are used to working with larger, monolithic development tools (IDEs), you may be surprised that your scenarios aren’t completely supported out of the box. For example, there isn’t a File > New Project dialog with pre-installed project templates. Most VS Code users will need to install additional components depending on their specific needs.

Commonly used components

Here are a few commonly installed components:

You’ll find the components above mentioned often in our documentation and walkthroughs.

VS Code extensions

You can extend the VS Code editor itself through extensions. The VS Code community has built hundreds of useful extensions available on the VS Code Marketplace.

The extensions shown above are the current most popular on Marketplace. Click on an extension tile above to read the description and reviews of the extension.

Additional tools

Visual Studio Code integrates with existing tool chains. We think the following tools will enhance your development experiences.

20 расширений VS Code, которые вам понравятся

Перевод статьи «20 VS Code Extensions You’ll Actually Use».

Я просмотрел несколько статей, посвященных расширениям VS Code. Должен сказать, не все эти расширения произвели на меня хорошее впечатление, однако я все же отобрал несколько и пополнил список используемых мной плагинов.

Я думаю, эти расширения будут полезны для любого фронтенд-разработчика, который хочет по максимуму использовать возможности Visual Studio Code. Некоторые из расширений в моем списке относятся к самым рекомендуемым, так что они наверняка у вас уже есть, но какие-то, возможно, будут для вас новостью.

Легкость чтения

Beautify – облегчает чтение HTML, CSS и JS путем де-минимизации и применения подходящих отступов в вашей ужасной разметке.

Better Comments – создание более дружественных к человеку комментариев в вашем коде. Я использую его все время. В нашей команде разработчиков это обязательное расширение.

Bookmarks – помогает перемещаться по вашему коду, легко и быстро передвигаясь между важными позициями. Я использую это расширение в связке с MetaGo, чтобы не задействовать мышь при написании кода.

MetaGo – для быстрого перемещения курсора и выделения при помощи клавиатуры. Это расширение навсегда изменило мой подход к использованию VS Code. Серьезно.

Guides – теперь вам не нужно закрывать и открывать заново все элементы для определения их вложенности. Этот инструмент особенно хорошо работает с уже упомянутым Beautify и Rainbow Brackets, о котором говорится ниже.

Rainbow Brackets – подсвечивает текущий набор скобок, в котором вы находитесь, а для лучшего определения местоположения еще и расцвечивает прочие скобки в другие цвета. Это прекрасное расширение VS Code для JS-разработчиков.

Image Preview – предоставляет возможность предпросмотра изображения при наведении курсора. Это позволяет легко проверить, на правильное ли изображение поставлена ссылка.

Более быстрое написание кода

CSS Peek – вдохновением для этого расширения послужила похожая фича Brackets – CSS Inline Editors. Теперь одна из моих любимых функций Brackets есть и в VS Code.

Stylelint – мы контролируем наш JS на соответствие стандартам, так почему же не делать того же с LESS/SASS/CSS? Отличный инструмент для быстрой чистки небрежно написанного CSS.

Live Sass Compiler – конечно, у вас есть Gulp, Webpack, NPM, Grunt, но иногда вам нужно компилировать/транспилировать ваши SASS/SCSS файлы в файлы CSS в режиме реального времени, с «живой» перезагрузкой браузера. Для этого и нужен Live Sass Compiler.

Live Server – лучший локальный сервер разработки с функцией живой перезагрузки для статических и динамических страниц (даже PHP!).

Version Lens – обновление зависимостей до последней версии для определенного package.json.

Красивые скриншоты

Polacode – подсвечивает код и делает действительно красивый снимок с цветами вашей темы. Отлично подходит для создания руководств или документации, где вы хотите приложить примеры кода.

Множественные экземпляры

Settings Sync – позволяет синхронизировать настройки, сниппеты, темы, иконки файлов, запуск, сочетания клавиш, рабочие окружения и расширения между несколькими экземплярами VS Code. Я использую это расширение для синхронизации всего вышеперечисленного на моем ноутбуке, рабочем и домашнем компьютерах. А делается все с помощью всего двух команд.

Надеюсь, эти расширения пригодятся вам в вашей ежедневной работе с VS Code! Если знаете и другие полезные плагины, поделитесь в комментариях.

20 Best VSCode Extensions To Improve Your Productivity

Extensions to your IDE are invaluable to speed up your work without reducing the quality of your output. Considering Visual Studio Code is the most popular IDE, here are 20 VSCode extensions that will make you a more productive developer. These extensions mostly apply for web developers, but there are some general-purpose extensions that will benefit everyone else too.

Here are the VSCode extensions we’ll cover:

Settings Sync

Before you start installing extensions left and right, it’s good to know of the existence of Settings Sync. It allows you to sync pretty much everything you customize on VSCode to Github, from settings to keyboard shortcuts to other VSCode extensions.

This way, you’ll have access to your preferred IDE from whichever device you want, instead of having to program from a vanilla VSCode environment on new devices or having to manually set up everything again.

Live Server

This is one of my favorite extensions. Live Server launches a local development server with a live reload feature both for static and dynamic pages.

Every time you save your code, you’ll instantly see the changes reflected in the browser. You’ll be much faster at spotting errors and it’s much easier to do some quick experiments with your code.

You also don’t need any source code on your local machine, because the extension runs commands and other extensions directly on the remote machine.

Prettier

Prettier is an opinionated code formatter that works particularly well if you have multiple people working on a single project, because the extension enforces a consistent style.

You can set it up so it formats your code every time you save it, significantly reducing the amount of time you need to spend formatting your code.

Bracket Pair Colorizer

The clue’s in the title, but Bracket Pair Colorizer gives the opening and closing brackets matching colors, making it much easier to know which brackets belong together.

Custom bracket characters can also be configured, and you can add a background color to the active scope too.

Auto Rename Tag

While VSCode inherently highlights matching tags and immediately adds closing tags whenever you type an opening tag, Auto Rename Tag automatically renames tags that you change.

The extension works for HTML, XML, PHP, and JavaScript, and removes the need to change your tag names twice.

edit: a few people in the comments have mentioned that Auto Rename Tag is quite buggy, so proceed with care.

GitLens

GitLens supercharges the Git capabilities of Visual Studio Code. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time (among lots of other features).

GitLens is a highly customizable extension. If you don’t like a particular setting, you can easily turn it off in settings.

Git History

Similar to GitLens, Git History is a VSCode extension that gives a visual of the git log. No longer should you look through git log in the terminal.

The extension is quite comprehensive as well. It allows you to compare branches, commits, and files across commits. You can also look up Github avatars, which is quite neat.

CSS Peek

This extension is invaluable for front-end developers. Inspired by a similar feature in the IDE Brackets, CSS Peek allows you to extend your HTML and ejs file to show CSS/SCSS/LESS code within the source code.

It also allows you to quickly jump to the right CSS code if you know the class or ID name.

JavaScript Code Snippets

While VSCode includes built-in JS IntelliSense, JS Code Snippets enhances that experience by adding a slew of import/export triggers, class helpers, and method triggers.

The extension supports JS, TypeScript, JS React, TS React, HTML, and Vue. In the VSCode Marketplace, code snippets for other flavors, such as Angular, are also readily available.

Peacock

Here’s a cute one. Peacock allows you to change the color of your Visual Studio Code environment, so you can quickly identify which instance you’ve just switched to.

Colorize

Sticking with colors, Colorize instantly visualizes CSS colors in your CSS/SASS/Less/. files. This makes it very easy to see at a glance which colors you’re using where.

Code Spell Checker

Although it isn’t life-threateningly important, I prefer my code to have no spelling errors. Code Spell Checker underlines words that it doesn’t recognize in its dictionary files.

The extension is available in many different languages and supports jargon such as medical terms.

Debugger for Chrome

Developed by Microsoft, Debugger for Chrome allows you to debug your JS code in VSCode. Contrary to debuggers in other IDEs, it’s surprisingly smooth.

You can set breakpoints, step your way through the code, debug scripts added dynamically, and more.

Icon Fonts

Icon Fonts offers snippets for a variety of icon fonts, including the popular Font Awesome v5 icon pack.

For those of you not using VSCode, this package is also available for Atom and Sublime Text.

Turbo Console Log

The Turbo Console Log extension automates the process of creating a meaningful log message. It makes debugging much easier, because you’ll have some useful console output to figure out what went wrong.

TODO Highlight

I confess. I’ve been guilty of writing TODOs in my comments to then totally forget about them. TODO Highlight makes them stand out much more.

You can toggle the highlights and can also list all the highlighted annotations and reveal them from the corresponding file.

vscode-icons

You wouldn’t think icons make a big difference, but they really do (for me, at least). VSCode-icons adds a splash of color and cute little icons to your IDE that I’ve come to love.

Regex Previewer

Regular expressions can be quite the puzzle to get right. Regex Previewer gives you a side document that matches your regex.

The extension gives multiple examples to match, so it becomes much easier to quickly and accurately write a regex for a variety of use cases.

Bookmarks

Although VSCode has line numbers, Bookmarks allows you to add bookmarks to your code, helping you quickly navigate and easily jump back and forth.

Additionally, it allows you to select regions of code between bookmarked code, which is quite useful for something like log file analysis.

These were 20 VSCode extensions to improve your programming productivity without impinging on quality. If you enjoyed this article and think others can benefit from it as well, feel free to share it on social media using the buttons at the top of the page.

Рассказ о 33 расширениях для VS Code, об их разработке и об управлении ими

Автор материала, перевод которого мы сегодня публикуем, создал 33 расширения для VS Code. Он решил поделиться с теми, кому нравится этот редактор, методикой разработки и поддержки расширений. Кроме того, он кратко рассказал о своих проектах. Возможно, вы найдёте среди них что-нибудь такое, что вам пригодится.

Как писать расширения

Я стремлюсь к продуктивной работе и люблю автоматизацию, поэтому я выработал чётко организованный процесс разработки расширений для VS Code. Расскажу об основных составных частях этого процесса.

▍Инструменты

Я написал очень простой инструмент, который помогает быстро начинать работу над новыми проектами, используя шаблон. Соответствующая утилита работает так:

▍Шаблон

Вот как я, пользуясь шаблоном template-vscode-extension, приступаю к разработке нового расширения для VS Code.

Создание нового проекта

Если вы планируете заняться разработкой расширений для VS Code, я посоветовал бы вам создать собственный шаблон, возможно, взяв за основу мой.

▍Полезная документация

В процессе разработки я всегда держу под рукой документацию по API VS Code. Поначалу работать с этим документом, представляющим собой огромную страницу, не особенно удобно, но если вы уделите некоторое время на то, чтобы бегло его просмотреть, если поймёте, какие API вам доступны, пользоваться им будет комфортно. В целом, могу отметить, что меня набор доступных API вполне устраивает.

И, кстати, если вы хотите разрабатывать расширения для VS Code, вам будет крайне полезно почитать этот раздел документации.

▍О разработанных мной расширениях

Я разрабатываю расширения для решения различных задач, о них мы поговорим ниже. Кроме того, некоторые из этих расширений помогают мне разрабатывать другие расширения.

Мои расширения

Как я уже говорил, я стремлюсь к продуктивности, поэтому многие мои расширения направлены на повышение производительности труда. Я стараюсь не заниматься постоянным изобретением велосипеда, пытаюсь добиваться чёткого разделения функций различных расширений для того, чтобы их совместное использование не вызывало бы проблем.

Не знаю, хорошо это или плохо, но мне нравится создавать расширения для VS Code. К тому же, поток задач, которые можно автоматизировать, не иссякает. Именно поэтому я, после того, как написал первое расширение, сделал второе, потом третье, дойдя, в итоге, до тридцать третьего.

Сейчас я в двух словах расскажу о моих расширениях. Подробности о них вы можете найти на их страницах.

▍Расширения для создания расширений

№1. Debug Manager

Расширение Debug Manager позволяет запускать отладку, даже из терминала, без необходимости создания задач или конфигурационных файлов. Я создал это расширение из-за того, что мне не хотелось засорять репозитории ненужными файлами (да и кто, например, пользуется задачами?). Я полагаю, что запуск отладчика из терминала — это возможность настолько полезная, что её стоило бы включить в сам VS Code.

Запуск отладчика из терминала

№2. StatusBar Debugger

Расширение StatusBar Debugger добавляет средства управления отладкой в строку состояния программы. Это гораздо удобнее, чем стандартная панель отладки. Кроме того, если бы VS Code давал бы больше данных по отладке, моё расширение было бы ещё лучше.

№4. Bump

Расширение Bump позволяет увеличивать номер версии проекта и вносить новые данные в журнал изменений. Этот инструмент действует, следуя собственной внутренней логике, но поддаётся настройке. Создал я его из-за того, что любому приличному расширению нужен журнал изменений, но это не означает, что разработчик такого расширения должен вносить записи в журнал вручную. Это — одно из моих любимых расширений. Возможно, я создам на его основе инструмент командной строки, так как мне хотелось бы, чтобы когда-нибудь оно позволило бы автоматизировать и GitHub-релизы.

Использование расширения Bump

№5. Optimize Images

Расширение Optimize Images позволяет оптимизировать изображения, имеющиеся в проекте, с использованием внешнего приложения, выбранного пользователем. Одна команда — и дело сделано.

▍Управление проектами

№6. Projects+

Расширение Projects+ служит для управления проектами. Оно обладает богатыми возможностями, поддаётся настройке, автоматически находит проекты. Одним из наиболее широко используемых расширений такого рода является Project Manager, но у меня около сотни репозиториев, и мне нужны подходящие инструменты для управления ими, одним из которых является поддержка групп неограниченного уровня вложенности.

Работа с расширением Project+

▍Управление todo-списками

№7. Todo+

Подсветка синтаксиса с использованием Todo+ и сведения уровня проекта

№8. Highlight

Расширение Highlight представляет собой продвинутое средство подсветки синтаксиса, основанное на регулярных выражениях. Оно пригодится для работы с todo-списками, аннотациями и прочим подобным. Весьма популярным в этой сфере является расширение TODO Highlight, но моё расширение является более универсальным и гораздо более мощным. Кроме того, вероятно, оно работает быстрее.

№9. Markdown Todo

Расширение Markdown Todo позволяет упростить работу с todo-списками внутри markdown-файлов. В нём нет ничего особенного, но оно позволяет пользоваться возможностями Todo+ внутри markdown-файлов.

№10. Projects+ Todo+

Расширение Projects+ Todo+ позволяет анализировать проекты, так сказать, с высоты птичьего полёта, видеть результат агрегации всех todo-файлов в одном файле. Если вы используете, для управления проектами, расширение Projects+, а для работы с todo-списками — Todo+, то, благодаря этому расширению, вы сможете собрать todo-списки из всех (или из некоторых) проектов в одном месте.

▍Расширения для открытия файлов

Мне важна возможность быстрого переключения между различными приложениями или веб-страницами. Именно поэтому я создал серию расширений для VS Code, упрощающих решение подобных задач.

№11. Open in Application

Расширение Open in Application позволяет открывать произвольные файлы в заданном по умолчанию приложении или в том приложении, которое решит использовать разработчик. Это — универсальное расширение.

№12. Open in Browsers

Расширение Open in Browsers добавляет в редактор команды, позволяющие открыть текущий файл или проект в любом браузере или даже сразу во всех доступных браузерах.

№13. Open in Code

Расширение Open in Code упрощает переключение между VS Code и VS Code Insiders.

№14. Open in Finder

Расширение Open in Finder предназначено для открытия текущего файла или проекта в файловом менеджере Finder.

№15. Open in GitHub

Расширение Open in GitHub позволяет открывать текущий проект или файл на github.com. Существует множество расширений для решения этой задачи, но, когда я их опробовал, оказалось, что в них слишком много функций, которые мне не нужны.

№16. Open in GitTower

Расширение Open in GitTower добавляет в редактор команду для открытия текущего проекта в GitTower.

№17. Open in Marketplace

Расширение Open in Marketplace оснащает редактор командой для открытия текущего проекта в каталоге расширений для VS Code.

№18. Open in node_modules

Расширение Open in node_modules позволяет находить в папке node_modules модули, соответствующие выделенному тексту или некоей произвольной строке, и открывать их папки. Оно полезно для тех случаев, когда разработчик хочет лучше разобраться с используемыми им модулями.

№19. Open in NPM

Расширение Open in NPM позволяет открывать страницы модулей в каталоге npm. Его удобно использовать для просмотра справочной информации модулей.

№20. Open in Ship

Расширение Open in Ship добавляет в редактор команду для открытия текущего проекта в Ship. К сожалению, Ship прекратил работу. Поэтому теперь мне, для того, чтобы не забыть о поступающих мне сведениях о проблемах в моих проектах, приходится пользоваться специальным листком с напоминаниями в Noty.

№21. Open in Terminal

Расширение Open in Terminal упрощает открытие текущего проекта в терминале.

№22. Open in Transmit

Расширение Open in Transmit позволяет открывать текущий файл или проект в Transmit.

▍Разное

№23. Browser Refresh

Расширение Browser Refresh позволяет обновлять страницу в браузере по нажатию ⌘R прямо из VS Code, без необходимости переключения на браузер. Это расширение пригодится в тех случаях, когда возможностью интерактивной перезагрузки пользоваться нельзя, и тогда, когда вам не нужно, чтобы browser-sync обновлял бы страницу без необходимости в этом.

№24. Commands

Расширение Commands позволяет вызывать произвольные команды из строки состояния. Поддерживается передача аргументов.

Пользовательские команды, созданные средствами Commands

№25. Diff

Расширение Diff позволяет сравнивать открытые файлы. Я создал это расширение из-за того, что конструкция code-diff path1 path2 работает слишком медленно.

№26. Git File History

Расширение Git File History упрощает анализ отличий текущего файла от его предыдущей версии. Существует множество расширений для решения этой задачи, но когда я их пробовал, они оказывались либо переполненными ненужными мне возможностями, либо нерабочими.

№27. GitHub Notifications

Расширение GitHub Notifications, безопасное и поддающееся настройке, предназначено для вывода в строку состояния сведений об уведомлениях на GitHub.

№28. Тема Monokai Night

Monokai Night Theme — это минималистичная тёмная тема, основанная на теме Monokai. Создал я её из-за того, что не смог подобрать то, что меня бы устраивало, из существующих тем.

Тема Monokai Night

№29. No [Unsupported]

Расширение No [Unsupported] предназначено для удаления строки «[Unsupported]» из заголовка редактора. Это расширение уже устарело, поэтому вместо него я рекомендую Fix VSCode Checksums. К несчастью, даже после этого и этого обсуждений надоедливая надпись «[Unsupported]» так никуда и не делась.

№30. Open Multiple Files

Расширение Open Multiple Files позволяет одновременно открывать все файлы в некоей папке. При необходимости файлы можно фильтровать по шаблону.

№31. Search — Open All Results

Расширение Search — Open All Results позволяет одновременно выводить все результаты поиска с использованием единственной команды.

№32. Terminals Manager

Расширение Terminals Manager автоматизирует работу сразу с несколькими терминалами, например, выполнение в них каких-то команд. Надо сказать, что Terminals Manager было моим первым расширением. Если вы пользуетесь терминалами — рекомендую его попробовать.

№33. Transmit

Расширение Transmit оснащает редактор несколькими командами для организации взаимодействия с Transmit.

Управление расширениями

Управление множеством репозиториев может оказаться непростой задачей. Расскажу о том, как это делаю я.

▍Повторяющиеся коммиты

Рано или поздно наступает момент, когда требуется внести некое изменение во все поддерживаемые репозитории. Это сводится к тому, что во множество репозиториев приходится делать одни и те же коммиты. Очень скоро это превращается в скучнейшее занятие.

Для того чтобы автоматизировать решение этой задачи я создал autogit — инструмент, который позволяет выполнять команды в применении ко множеству репозиториев.

Выполнение команды с помощью autogit

▍Синхронизация описания и ключевых слов с GitHub

То, о чём тут пойдёт речь, делать необязательно, но мне не помешал бы инструмент, который автоматизирует синхронизацию описаний и ключевых слов. С этой задачей можно справиться средствами моих инструментов autogit и autogit-command-github-sync.

Синхронизация описаний и ключевых слов средствами autogit

А вот autogit-command-github-publish — моё средство для автоматизированного создания новых репозиториев.

▍Отчёты

Вскоре после того, как я создал несколько расширений, мне стало интересно узнать о том, насколько они популярны, как, со временем, меняется количество их загрузок. Найти сведения по всем расширениям некоего разработчика можно на специальной странице. Например, вот моя страница. Однако эта страница не даёт сведений, например, о том, сколько загрузок расширений было сделано с момента последней проверки. Именно поэтому я создал rssa. Это — инструмент, который позволяет отслеживать изменения всего чего угодно, доступного по URL.

Данные, получаемые средствами rssa

График загрузок Todo+

Здесь, в некоторых местах, можно заметить резкое увеличение числа загрузок. Происходит это при публикации обновлений, так как установка обновлений расширения учитывается системой как загрузка. Это ведёт к тому, что любой может оказаться автором расширения с миллионом загрузок, написав его и опубликовав множество обновлений. Это, кстати, одна из проблем каталога расширений для VS Code.

Итоги

Одно время я думал, что, по количеству опубликованных расширений для VS Code, я нахожусь на втором месте после Microsoft. Однако, как оказалось, кое у кого их на 2 больше, чем у меня. Поэтому я продолжаю писать расширения.

Уважаемые читатели! Пишете ли вы расширения для VS Code?

20 Best VS Code Extensions for Web Development | Aug, 2020

Make your life easier and enjoy programming, with these extensions

VS Code is not perfect.

It’s great, but not perfect. There are still many important things missing.

Luckily, one of VS Code’s biggest strengths is it’s community, that works tirelessly to contribute the missing bits of functionality themselves.

From better git integration, through spell checkers, to integrated SVG editors. Here is a list of some of the best, the community has to offer.

Prettier — Code formatter

by Prettier • 7.9 million installs

The most popular VS Code extension for automatically formatting your code. It supports JavaScript, TypeScript, CSS, SCSS, HTML, Markdown & more.

It will use the Prettier configuration files in your project directory, and VS Code settings as a fallback.

ESLint

by Dirk Baeumer • 10.5 million installs

This extension integrates the popular ESLint linter into VS Code. It will help you find & fix issues with your code.

It uses the ESLint library installed in your project directory or the global installation as a fallback. You can find installation & configuration instructions on the extension page.

GitLens

by Eric Amodio • 6.1 million installs

This extension is an absolute must-have for any developer. It provides all of git functionality missing from vanilla VS Code. It can easily replace most standalone Git programs.

Just a few of my favorite features.

The full feature list could honestly be an entire book. If you only install one extension from this list, let it be this one.

Visual Studio IntelliCode

by Microsoft • 6.6 million installs

This extension will move the most relevant completion suggestions to the top. It might sound like nothing but it’s actually really good. I can’t imagine living without it, and I’m certain you’ll love it too.

At the time of writing it works with JavaScript, TypeScript, Python and Java.

Remote Development

6 million installs between all 3 extensions

This is actually a bundle of extensions, that allow you to open any folder in a container, on a remote machine/VM or in WSL.

I especially love using it with WSL and think it’s a must-have for any WSL coding workflow.

👉 Download the entire bundle containing all 3 extensions…

…or choose only the extensions you need

Debugger For Chrome

by Microsoft • 6.2 million installs

This extension allows you to debug your JavaScript code running in the Chrome browser, from inside of VS Code.

It also works with other browsers that support the Chrome DevTools Protocol, like Vivaldi.

Debuggers for other browsers are also available:

This extension will soon be replaced by the JavaScript Debugger, which is supposed to become VS Code’s new built-in debugger. But it’s still a good option at the moment.

Git Graph

by mhutchie • 605k installs

One of the only features missing from GitLens is a visual graph of your repository. But this extension fixes that.

You can view your entire commit history at a glance.

If you don’t like this one, you might find GitHistory to be a good alternative.

Bracket Pair Colorizer 2

by CoenraadS • 1.2 million installs

When you have a lot of brackets, braces & parentheses in your code, it can get difficult to find where each code block starts and ends.

It allows you to easily find what scope you’re in, by marking matching bracket pairs with the same color.

You can even customize the colors and which tokens to match.

There are two versions of this extension, and even though the 1st one still has more downloads, you should be using version 2. It’s faster and more accurate.

If you want to take the 🌈 rainbow powers to the next level, check out Indent Rainbow. It does the same thing but to the indentation in front of your code.

Colorize

by kamikillerto • 130k installs

Helps you visualize CSS colors. Works even with pre-processor variables & CSS custom properties.

If you use CSS-in-JS libraries like styled-components or emotion, you should add JavaScript to the languages array in settings.json

If you want to add other languages as well, check out all language identifiers available.

Color Picker

by anseki • 580k installs

If you work with CSS a lot, this one is for you. It allows you to modify & convert any color, using any color space and notation.

Unlike the built-in color picker it works in any file so it’s perfect if you use CSS-in-JS.

There are multiple styles of the picker widget, from compact to extra large, with all of the fancy stuff.

Note: If the color picker doesn’t show correctly, try this (from official extension page):

TODO Highlight

by Wayou Liu • 1.1 million installs

I love adding TODO comments in my code, but I often forget about them. If you’re anything like me, this extension will be a lifesaver for you.

It highlights all of the TODO and FIXME and other annotations in a way that’s impossible to miss.

On top of that, it’s completely customizable.

Code Spell Checker

by Street Side Software • 1.6 million installs

Why would I need a spellchecker for code? — Me, not that long ago

It’s actually really helpful. It helps you avoid embarrassing typos in variable names, comments, and most importantly: body text. If you hover the underlined word and click “Quick Fix” it will show you suggestions and allow you to add the word to your dictionary.

What surprised me the most was how good it deals with camelCase and other common ways we name variables and functions.

By default, the extension only supports English, but there are many add-on dictionaries available. Just search for “Spell Checker” on the extensions marketplace and you’ll find them.

If you’re installing many extensions your status bar might get pretty crowded. Here’s a tip on how to tame that mess 👇

Управление расширениями для Visual Studio

Расширения — это пакеты кода, которые выполняются в Visual Studio и предоставляют новые или улучшенные функции. К числу расширений относятся элементы управления, примеры, шаблоны, инструменты или другие компоненты, расширяющие возможности Visual Studio, например Live Share или Visual Studio IntelliCode.

Сведения о создании расширений Visual Studio см. в разделе Visual Studio SDK. Сведения об использовании расширений см. на страницах отдельных расширений в Visual Studio Marketplace. Дополнительные сведения о поиске расширений см. в записи блога Где мои избранные расширения в Visual Studio 2022?.

Сведения о создании расширений Visual Studio см. в разделе Visual Studio SDK. Сведения об использовании расширений см. на страницах отдельных расширений в Visual Studio Marketplace.

Диалоговое окно «Управление расширениями»

Используйте диалоговое окно Управление расширениями для установки расширений Visual Studio и управления ими. Чтобы открыть диалоговое окно Управление расширениями, выберите Расширения>Управление расширениями. Или введите строку Расширения в поле поиска, а затем выберите Управление расширениями.

На левой панели расширения разделены на установленные, доступные в Visual Studio Marketplace (онлайн) и имеющие доступные обновления. Диспетчер перемещаемых расширений хранит список всех расширений Visual Studio, которые вы установили на любом компьютере или экземпляре Visual Studio. С его помощью вы легко сможете находить нужные вам расширения.

Поиск и установка расширений

Установить расширения можно из Visual Studio Marketplace или из диалогового окна «Управление расширениями» в Visual Studio.

Чтобы установить расширения из Visual Studio, выполните указанные ниже действия.

В диалоговом окне Расширения>Управление расширениями найдите расширение, которое вы намерены установить. (Если известно имя или часть имени расширения, можно выполнить поиск в окне Поиск.)

Щелкните Скачать.

Запланирована установка расширения. Расширение будет установлено после закрытия всех экземпляров Visual Studio.

При попытке установить расширение, имеющее зависимости, то установщик проверяет, установлены ли эти зависимости. Если они не установлены, то в диалоговом окне Управление расширениями отображается список зависимостей, которые требуется установить перед установкой этого расширения.

Установка без использования диалогового окна «Управление расширениями»

Расширения, упакованные в VSIX-файлы, могут быть доступны не только в Visual Studio Marketplace. Несмотря на то что VSIX-файлы не обнаруживаются в диалоговом окне Расширения>Управление расширениями, такой файл можно установить, дважды щелкнув его или выбрав файл и нажав клавишу ВВОД. После этого следуйте инструкциям. После установки такое расширение можно будет включить, отключить или удалить в диалоговом окне Управление расширениями.

Удаление или отключение расширения

Если требуется прекратить использование расширения, его можно отключить или удалить. Отключенное расширение сохранится, но не будет загружаться. Найдите расширение и щелкните Удалить или Отключить. Перезапустите Visual Studio, чтобы выгрузить отключенное расширение.

Отключать можно только расширения VSIX, но не расширения, которые были установлены с помощью MSI. Расширения, установленные с помощью MSI, можно только удалить.

Расширения на уровне пользователя и администратора

Чтобы защитить систему от расширений, которые могут содержать ошибки или вредоносный код, можно ограничить расширения на уровне пользователя, чтобы они загружались только при запуске Visual Studio под учетной записью пользователя со стандартными правами. Это означает, что расширения на уровне пользователя отключаются при запуске Visual Studio с повышенными разрешениями.

Чтобы ограничить загрузку расширений на уровне пользователя, выполните указанные ниже действия.

Откройте страницу параметров расширений (Сервис>Параметры>Среда>Расширения).

Снимите флажок Загружать расширения пользователей при выполнении от имени администратора.

Перезапустите Visual Studio.

Автоматическое обновление расширений

Расширения обновляются автоматически при появлении новой версии в Visual Studio Marketplace. Новая версия расширения обнаруживается и устанавливается в фоновом режиме. При следующем открытии Visual Studio будет запущена новая версия расширения.

Функцию автоматического обновления можно отключить для всех или только определенных расширений.

Чтобы отключить автоматическое обновление для всех расширений, щелкните ссылку Измените параметры расширений в диалоговом окне Расширения>Управление расширениями. В диалоговом окне Параметры снимите флажок Автоматически обновлять расширения.

Чтобы отключить автоматическое обновление для конкретного расширения, снимите флажок Автоматически обновлять это расширение в области сведений о расширении в правой части диалогового окна Управление расширениями.

Уведомления об аварийном завершении работы или зависаниях

Visual Studio уведомляет вас о тех расширениях, которые могли вызвать аварийное завершение предыдущего сеанса. Когда Visual Studio аварийно завершает работу, сохраняется стек исключений. При следующем запуске Visual Studio стек проверяется, начиная с листового узла, в направлении базы. Если Visual Studio определяет, что кадр принадлежит модулю, который является частью установленного и включенного расширения, система выводит уведомление.

Visual Studio оповещает еще и о тех расширениях, которые могут приводить к недоступности интерфейса.

Получив такое оповещение, вы можете проигнорировать его или выполнить одно из следующих действий.

Выберите Больше не показывать это сообщение.

Выберите Дополнительные сведения, чтобы перейти к этой странице.

Нажмите кнопку X в конце уведомления, чтобы закрыть уведомление. В этом случае уведомление снова отобразится в следующий раз, когда экземпляры этого расширения будут связаны с аварийным завершением или зависанием пользовательского интерфейса.

Уведомление о зависании или аварийном завершении пользовательского интерфейса означает только то, что один из модулей конкретного расширения находился в стеке в тот момент, когда произошло аварийное завершение. Это не обязательно означает, что расширение стало причиной сбоя. Возможно, расширение вызвало внутренний код Visual Studio, который привел к аварийному завершению или зависанию пользовательского интерфейса. Но эти уведомления могут быть полезны, если расширение, приводящее к аварийному завершению или зависанию пользовательского интерфейса, не очень важно для вас. Отключив такое расширение, вы сможете избежать аналогичных проблем в будущем без ущерба для производительности.

Примеры

При установке примера из сети решение сохраняется в двух местоположениях:

Рабочий экземпляр сохраняется в расположении, указанном при создании проекта.

Отдельный контрольный экземпляр сохраняется на компьютере.

Диалоговое окно «Управление расширениями>» можно использовать для выполнения следующих задач, связанных спримерами:

Отобразить список контрольных экземпляров установленных образцов.

Отключить или удалить контрольный экземпляр образца.

Установить пакеты примеров — коллекции примеров, связанных с определенной технологией или функцией.

Установить отдельные примеры из сети.

Просмотреть уведомления об обновлениях, когда будут опубликованы изменения в исходном коде для установленных примеров.

Обновить контрольный экземпляр установленного примера при получении уведомления об обновлении.

Extension Guides

Once you have learned the basics of Visual Studio Code Extension API in the Hello World sample, it’s time to build some real-world extensions. While the Extension Capabilities section offers high-level overviews of what an extension can do, this section contains a list of detailed code guides and samples that explains how to use a specific VS Code API.

In each guide or sample, you can expect to find:

Guides & Samples

Here are the guides on the VS Code website, including their usage of the VS Code API and Contribution Points. Don’t forget to refer to the UX Guidelines to learn the user interface best practices for creating extensions.

Here is a list of additional samples from the VS Code Extensions samples repo.

Language Extension Samples

These samples are Language Extensions samples:

Your First Extension

In this topic, we’ll teach you the fundamental concepts for building extensions. Make sure you have Node.js and Git installed, then install Yeoman and VS Code Extension Generator with:

The generator scaffolds a TypeScript or JavaScript project ready for development. Run the generator and fill out a few fields for a TypeScript project:

Run the Hello World command from the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ) in the new window:

You should see the Hello World from HelloWorld! notification showing up. Success!

Developing the extension

Let’s make a change to the message:

You should see the updated message showing up.

Here are some ideas for things for you to try:

Debugging the extension

VS Code’s built-in debugging functionality makes it easy to debug extensions. Set a breakpoint by clicking the gutter next to a line, and VS Code will hit the breakpoint. You can hover over variables in the editor or use the Run and Debug view in the left to check a variable’s value. The Debug Console allows you to evaluate expressions.

You can learn more about debugging Node.js apps in VS Code in the Node.js Debugging Topic.

Next steps

In the next topic, Extension Anatomy, we’ll take a closer look at the source code of the Hello World sample and explain key concepts.

You can find the source code of this tutorial at: https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample. The Extension Guides topic contains other samples, each illustrating a different VS Code API or Contribution Point, and following the recommendations in our UX Guidelines.

Using JavaScript

In this guide, we mainly describe how to develop VS Code extension with TypeScript because we believe TypeScript offers the best experience for developing VS Code extensions. However, if you prefer JavaScript, you can still follow along using helloworld-minimal-sample.

UX Guidelines

This is also a good time to review our UX Guidelines so you can start designing your extension user interface to follow the VS Code best practices.

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.

This topic covers:

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:

Usage

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

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:

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

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:

On the Personal Access Tokens page, select New Token to create a new Personal Access Token and set the following details:

Select Create and you’ll be presented with your newly created Personal Access Token. Copy it, you’ll need it to create a publisher.

Create a publisher

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

You can create a new publisher through the Visual Studio Marketplace publisher management page. You need to login in with the same Microsoft account you used to create the Personal Access Token in the previous section.

Publish an extension

You can publish an extension using vsce with the publish command:

This command will ask for the personal access token, if you haven’t already provided it with the vsce login command above.

Alternatively, you can package the extension ( vsce package ) and manually upload it to the Visual Studio Marketplace publisher management page.

Review extension installs and ratings

The same 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. Right-click an extension and choose Reports.

Auto-incrementing the extension version

For example, if you want to update an extension’s version from 1.0.0 to 1.1.0, you would specify minor :

This will modify the extension’s package.json version attribute before publishing the extension.

You can also specify a complete SemVer compatible version on the command line:

Unpublishing extensions

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

Deprecating extensions

An extension can be just deprecated or deprecated in favour of another extension or a setting. VS Code will not automatically migrate or uninstall deprecated extensions. VS Code will render extensions as deprecated in the UI, as shown in the search sample below where the first result is deprecated. If a deprecated extension has an alternative extension or a setting the VS Code UI will guide users to migrate to the new extension or setting.

VS Code will not automatically migrate or uninstall already installed deprecated extensions. Instead it will provide the following Migrate UI:

In order to mark your extension as deprecated, please reach out to us by commenting here.

Note: For now the extension will not be rendered as deprecated in the Marketplace. Support for this will come later.

Packaging extensions

If you want to test an extension on your local install of VS Code or distribute an extension without publishing it to VS Code Marketplace, you can choose to package your extension. vsce can package your extension into a VSIX file, from which users can easily install. Some extensions publish VSIX files to each GitHub release.

For extension authors, they can run vsce package in extension root folder to create such VSIX files.

Sharing privately with others

Your extension folder

Visual Studio Code compatibility

When authoring an extension, you will need to describe what is the extension’s compatibility to Visual Studio Code itself. This can be done via the engines.vscode field inside package.json :

You can use the engines.vscode field to make sure the extension only gets installed for clients that contain the API you depend on. This mechanism plays well with the Stable release as well as the Insiders one.

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:

Verify a publisher

You can become a verified publisher by verifying ownership of an eligible domain associated with your brand or identity. Verifying your publisher will demonstrate your authenticity and add a verified badge to your extensions.

To verify a publisher:

Once your TXT record has been validated, the Marketplace team will review your request and grant verification within 5 business days.

Eligible domains

Eligible domains meet the following criteria:

Extension Sponsor

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

If an extension opts-into this VS Code will render a Sponsor button in the extension details page 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.

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 previous example.

Pre-publish step

It’s possible to add a pre-publish step to your manifest file. The command will be called every time the extension is packaged.

This will always invoke the TypeScript compiler whenever the extension is packaged.

Pre-release extensions

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

For extensions to publish a pre-release version, a pre-release flag needs to be passed in the package and publish step:

We only support major.minor.patch for extension versions and semver pre-release tags are not supported. Support for this will arrive in the future.

VS Code will auto 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, that user will be updated to the released version. Because of this 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 to always increment and publish a new pre-release version before publishing a release version in order 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.

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

Platform-specific extensions

Extensions can publish different VSIXs for each platform (Windows, Linux, macOS) VS Code is running on. We call such extensions platform-specific extensions.

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.

When publishing platform-specific extensions, a separate package needs to be published for each and every platform that an extension supports. If no package has been published for a platform, the user will see the extension appear as disabled and it can not be installed.

Publishing

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

If VS Code does not detect a specific VSIX for win32-x64 or win32-arm64 platforms it will fallback to win32-ia32 vsix. Because of this we recommend that if you publish multiple platforms that you publish win32-ia32 last to avoid some users on win32-x64 or win32-arm64 getting the fallback package, while the right package is about to get uploaded.

Continuous Integration

Managing multiple platform-specific VSIXs might get overwhelming, so we suggest to automate your extension’s build process in Continuous Integration. Using GitHub Actions is a good approach. Our platform-specific extension sample can be used as a learning resource; 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

Common questions

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 not select All accessible organizations in the Organizations field dropdown (instead selecting a specific organization). You should also 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 name. You can also manage your extensions directly on the Marketplace by going to the manage page. You can update or unpublish your extension from your publisher manage page.

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 properly function. 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 Travis CI to automatically publish your extension to the Marketplace.

Web Extensions

Web extensions share the same structure as regular extensions, but given the different runtime, don’t run with the same code as extensions written for a Node.js runtime. Web extensions still have access to the full VS Code API, but no longer to the Node.js APIs and module loading. Instead, web extensions are restricted by the browser sandbox and therefore have limitations compared to normal extensions.

The web extension runtime is supported on VS Code desktop too. If you decide to create your extension as a web extension, it will be supported on VS Code for the Web (including vscode.dev and github.dev ) as well as on the desktop and in services like GitHub Codespaces.

Web extension anatomy

A web extension is structured like a regular extension. The extension manifest ( package.json ) defines the entry file for the extension’s source code and declares extension contributions.

For web extensions, the main entry file is defined by the browser property, and not by the main property as with regular extensions.

The contributes property works the same way for both web and regular extensions.

The example below shows the package.json for a simple hello world extension, that runs in the web extension host only (it only has a browser entry point):

Extensions that have only a main entry point, but no browser are not web extensions. They are ignored by the web extension host and not available for download in the Extensions view.

Extensions can have both browser and main entry points in order to run in browser and in Node.js runtimes. The Update existing extensions to Web extensions section shows how to migrate an extension to work in both runtimes.

The web extension enablement section lists the rules used to decide whether an extension can be loaded in a web extension host.

Web extension main file

The web extension’s main file is defined by the browser property. The script runs in the web extension host in a Browser WebWorker environment. It is restricted by the browser worker sandbox and has limitations compared to normal extensions running in a Node.js runtime.

Develop a web extension

Thankfully, tools like TypeScript and webpack can hide many of the browser runtime constraints and allow you to write web extensions the same way as regular extensions. Both a web extension and a regular extension can often be generated from the same source code.

For example, the Hello Web Extension created by the yo code generator only differs in the build scripts. You can run and debug the generated extension just like traditional Node.js extensions by using the provided launch configurations accessible using the Debug: Select and Start Debugging command.

Create a web extension

The extension that is created consists of the extension’s source code (a command showing a hello world notification), the package.json manifest file, and a webpack configuration file.

The source code in the helloworld-web-sample is similar to what’s created by the generator.

Webpack configuration

Some important fields of webpack.config.js are:

Test your web extension

There are currently three ways to test a web extension before publishing it to the Marketplace.

Test your web extension in VS Code running on desktop

To use the existing VS Code extension development experience, VS Code running on the desktop supports running a web extension host along with the regular Node.js extension host.

Use the pwa-extensionhost launch configuration provided by the New Web Extension generator:

$ts-webpack-watch is a problem matcher that can parse the output from the webpack tool. It is provided by the TypeScript + Webpack Problem Matchers extension.

In the Extension Development Host instance that launches, the web extension will be available and running in a web extension host. Run the Hello World command to activate the extension.

Open the Running Extensions view (command: Developer: Show Running Extensions) to see which extensions are running in the web extension host.

Test your web extension in a browser using @vscode/test-web

The @vscode/test-web node module offers a CLI and API to test a web extension in a browser.

The node module contributes an npm binary vscode-test-web that can open VS Code for the Web from the command line:

You can run it from command line:

Or better, add @vscode/test-web as a development dependency to your extension and invoke it in a script:

Check the @vscode/test-web README for more CLI options:

Test your web extension in on vscode.dev

Before you publish your extension for everyone to use on VS Code for the Web, you can verify how your extension behaves in the actual vscode.dev environment.

To see your extension on vscode.dev, you first need to host it from your machine for vscode.dev to download and run.

Important: Now click on the generated URL ( https://hungry-mole-48.loca.lt/ in this case) and select Click to Continue.

Finally, open vscode.dev, run Developer: Install Web Extension. from the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ) and paste the generated URL shown above, https://hungry-mole-48.loca.lt/ in the example, and select Install.

Check the logs

You can check the logs in the console of the Developer Tools of your browser to see any errors, status, and logs from your extension.

You may see other logs from vscode.dev itself. In addition, you can’t easily set breakpoints nor see the source code of your extension. These limitations make debugging in vscode.dev not the most pleasant experience so we recommend using the first two options for testing before sideloading onto vscode.dev. Sideloading is a good final sanity check before publishing your extension.

Web extension tests

Web extension tests are supported and can be implemented similar to regular extension tests. See the Testing Extensions article to learn the basic structure of extension tests.

The @vscode/test-web node module is the equivalent to @vscode/test-electron (previously named vscode-test ). It allows you to run extension tests from the command line on Chromium, Firefox, and Safari.

The utility does the following steps:

You can run the tests in continuous builds to ensure that the extension works on all browsers.

The test runner script is running on the web extension host with the same restrictions as the web extension main file:

To open VS Code on a folder with test data, pass a local folder path ( folderPath ) as the last parameter.

To run (and debug) extension tests in VS Code (Insiders) desktop, use the Extension Tests in VS Code launch configuration:

Publish a web extension

Web extensions are hosted on the Marketplace along with other extensions.

Make sure to use the latest version of vsce to publish your extension. vsce tags all extensions that are web extension. For that vsce is using the rules listed in the web extension enablement section.

Update existing extensions to Web extensions

Extension without code

Extensions that have no code, but only contribution points (for example, themes, snippets, and basic language extensions) don’t need any modification. They can run in a web extension host and can be installed from the Extensions view.

Migrate extension with code

Use these steps to recompile your extension code for the browser environment:

To make sure as much source code as possible can be reused, here are a few techniques:

It is fine to provide less functionality when your extension is running in the web. Use when clause contexts to control which commands, views, and tasks are available or hidden with running in a virtual workspace on the web.

WebWorkers can be used as an alternative to forking processes. We have updated several language servers to run as web extensions, including the built-in JSON, CSS, and HTML language servers. The Language Server Protocol section below gives more details.

The browser runtime environment only supports the execution of JavaScript and WebAssembly. Libraries written in other programming languages need to be cross-compiled, for instance there is tooling to compile C/C++ and Rust to WebAssembly. The vscode-anycode extension, for example, uses tree-sitter, which is C/C++ code compiled to WebAssembly.

Language Server Protocol in web extensions

vscode-languageserver-node is an implementation of the Language Server Protocol (LSP) that is used as a foundation to language server implementations such as JSON, CSS, and HTML.

Since 3.16.0, the client and server now also provide a browser implementation. The server can run in a web worker and the connection is based on the webworkers postMessage protocol.

The client for the browser can be found at ‘vscode-languageclient/browser’:

Web extension enablement

VS Code automatically treats an extension as a web extension if:

If an extension wants to provide a debugger or terminal that also work in the web extension host, a browser entry point needs to be defined.

Extension Packs

March 07, 2017 Wade Anderson, @waderyan_

If you have followed our blog for the last year, you’ll notice I write an Extension Roundup blog once a month. I like to write these blogs to let you know about the cool extensions being created in the community and to inspire you to create your own. I often put a theme around the Roundup blog: something like JavaScript extensions or CodeLens extensions (last month).

Creating a theme for this blog is a natural fit for a relatively new part of the extension API, Extension Packs. Last month I created my first Extension Pack to bring together all of my favorite CodeLens extensions. In this month’s Roundup, I want to teach you how to make your own pack and give you some examples of why you would want to.

How do I make an Extension Pack?

It is very easy to make your own Extension Pack. Follow the instructions on installing the Yeoman VS Code extension generator.

Once the Yeoman generator is installed, run the following command:

Choose New Extension Pack as shown in the image below.

Fill out the options as given by Yeoman. One of the options is to create an Extension Pack based on the extensions you currently have installed. This will fill out much of the Extension Pack’s details for you!

To include an extension, your extension manifest file ( package.json ) needs the following attribute:

Tip You can see the publisherid.extensionName at the end of the URL of an extension on the Marketplace.

For my CodeLens Roundup, this is what my extension manifest file looked like:

Why would I want to create an Extension Pack?

There are many reasons to create an Extension Pack:

Recommended Extension Packs

You can find the Extension Packs that others have created by querying using the Extension Pack category: click here for the Marketplace or type category:»Extension Packs» into the Extension View search bar in VS Code.

Some of my favorite extensions are:

Want to see your extension featured?

Have other extensions you like or want to see your extension in the next Roundup? Ping us on Twitter!

Wade Anderson, VS Code Team Member @waderyan_

Расширения VS Code, благодаря которым я каждый день заново влюбляюсь в программирование

Перевод статьи «VS Code extensions that make me fall in love with programming each day».

Над этим постом я прокрастинировал очень долго. Собственно, я собирался написать нечто подобное еще несколько месяцев назад, но ленился, поскольку статья должна была быть чисто теоретической, без всякого кода. Тем не менее, это точно будет один из самых полезных постов, которые вы прочтете сегодня!

VS Code — мой любимый редактор кода. Я думаю, особенно потрясающим его делает многочисленное сообщества и наличие большого количества доступных плагинов. Я расскажу о тех плагинах, которыми пользуюсь сам и которые помогают улучшать продуктивность работы и делать код более привлекательным. Надеюсь, вам понравится.

И, раз уж заговорил о стиле кода, покажу, как выглядит мой VS Code в работе:

Расширения VS Code для повышения продуктивности

Прежде чем мы начнем, сразу хочу сказать, что мой список, конечно же, не исчерпывающий. Есть и другие плагины, быть может, даже более полезные. Поэтому не стесняйтесь и дополняйте в комментариях;)

1. WakaTime

Это одно из моих любимых расширений. Оно было бы еще лучше, если бы авторы сделали его полностью бесплатным, но и без этого расширение просто потрясающее.

Говоря простым языком, WakaTime отслеживает всю вашу активность, связанную с кодингом. Сколько времени вы проводите за написанием кода, над какими проектами работаете, какие языки программирования используете и насколько хорошо вам это удается.

Всю собранную статистику можно просматривать на красивых диаграммах.

2. Visual Studio IntelliCode

Представьте технологию Intellisense с поддержкой ИИ, который может посоветовать, какой код писать. Представленная вами картинка практически воплощена в реальность!

Расширение Visual Studio IntelliCode предоставляет функционал разработки с применением ИИ для Python, TypeScript/JavaScript и Java. Расширение распознает контекст вашего кода при помощи машинного обучения.

Вот, как это работает:

3. Terminal Here

Если вы не пользуетесь IDE и предпочитаете писать код в текстовом редакторе, обратите внимание на это расширение: оно вам точно понравится!

Примечание автора: лично я не люблю кодить в IDE и отдаю предпочтение текстовому редактору VS Code. В основном я пишу на Java, при этом мне нравится поддерживать определенную структуру файлов (по одной папке на один вопрос). Как вы, вероятно, догадались, чтобы запускать выполнение файлов, мне приходилось каждый раз менять директории. Этот плагин — просто спасение!

Это расширение открывает в терминале VS Code текущую директорию. Разве не потрясающе?

4. Live Server

Как бы объяснить всю важность этого плагина.

Вы открываете свои страницы при помощи Live Server, и вам больше не приходится каждый раз при внесении изменений перезагружать их!

5. ReactJS Code Snippets

Если вы React-разработчик и не пользуетесь этим плагином, вы теряете зря кучу времени! ReactJS Code Snippets позволяет создавать компоненты, используя готовые сниппеты кода.

6. Python

Вероятно, мне все равно не удастся описать весь функционал этого расширения в рамках одного поста, так что скажу кратко: оно позаботится обо всех ваших нуждах, связанных с написанием кода на Python!

Выбор интерпретатора Python в строке состояния в один клик:

Настройка дебаггера через Debug Activity Bar:

Конфигурация тестов путем запуска команды Configure Tests:

Быстрый запуск Jupiter notebook:

7. Path Intellisense

Очень полезный функционал для разработчиков. Будь то импорт зависимостей, включение изображений в HTML-документ, добавление JS-скриптов или подключение CSS-документов в HTML-файл — нам постоянно нужно указывать пути к файлам.

Этот плагин делает автодополнение пути, позволяя вам сосредоточиться на более важных вещах.

8. NPM Intellisense

Если вам понравилось предыдущее расширение, а сами вы — node-разработчик, я уверен, что этот плагин вы тоже установите. В конце концов, кто ж не захочет иметь автодополнение или подсказки при импорте npm-библиотек?

9. Markdownlint

Откройте наугад несколько open-source проектов на GitHub, и вы увидите, что у них есть нечто общее, а именно — стиль README.md.

Язык разметки Markdown создавался с тем расчетом, чтобы документы на нем было легко читать, писать и понимать. Цель была достигнута, но гибкость языка стала и его преимуществом, и его недостатком. В этом языке допустимо использование многих стилей, из-за чего форматирование может стать непоследовательным. К тому же, некоторые конструкции не во всех парсерах хорошо работают, и из-за этого их следует избегать.

Markdownlint это расширение Visual Studio Code, включающее библиотеку правил для Markdown-файлов, благодаря которым повышается стандартизация и последовательность форматирования.

Не ленитесь: установите себе этот плагин и поисправляйте свою markdown-разметку:)

10. Markdown Preview Enhanced

Возможно, вы, как и я, давно забросили MSWord и прочее ПО для текстовых документов, переключившись на использование markdown? Установите себе этот плагин, и вы сможете следить за тем, как выглядит ваш документ.

11. Auto Close Tag

Если вы веб-разработчик и при этом не пользуетесь автоматическим закрытием тегов, как вы вообще справляетесь? Закрывать теги вручную так муторно, что я не устаю благодарить небеса за то, что есть плагин, который делает это автоматически.

12. Auto Rename Tag

Как следует из названия, этот плагин служит для изменения названий тегов. Вы меняете открывающий тег, а закрывающий меняется автоматически (и наоборот).

Расширения VS Code для лучшего стиля кода

До сих пор мы говорили о расширениях, которыми я пользуюсь для повышения продуктивности. Теперь давайте перейдем к расширениям, улучшающим вид кода.

1. Prettier

Да, этот плагин можно было включить в раздел расширений для продуктивности, но пусть уж будет здесь.

Между сторонниками отступов в 2 и 4 пробела идет постоянная, непрекращающаяся борьба (люди, которые ставят 8 пробелов, зачем вы это делаете?!). Но при помощи этого расширения код с отступами в 2 пробела можно легко конвертировать в код с отступами в 4.

Скажем, у вас есть кусок кода, найденный где-то на просторах интернета, а может, написанный вашим другом. И вы видите, что в нем вообще нет отступов. И что теперь? Расставлять их вручную? Используйте Prettier!

Это расширение предназначено для форматирования кода. Оно принудительно приводит код к заданному стилю.

2. Rainbow Brackets

Это не то чтобы сильно полезное расширение, но разноцветные скобки все-таки выглядят круто.

При помощи этого плагина можно сделать круглые скобки одного цвета, квадратные — другого, а фигурные — третьего. Это имеет особенное значение для программистов, пишущих на Lisp или Clojure и, конечно, для JavaScript-разработчиков. Но остальным тоже не помешает;)

3. Snazzy Operator

Это расширение — моя любовь. Вы, может, думаете, что это просто еще одна тема VS Code, но я в нее просто влюблен.

И, кстати, не забудьте установить шрифт Operator Mono, прежде чем начать пользоваться этой темой.

4. vscode-styled-components

И, наконец, потрясающий плагин для подсветки синтаксиса и intellisense.

Но погодите! А вы заметили еще кое-что на самом первом скриншоте, который я показывал? Если нет, я вам его еще раз покажу:

А теперь заметили? А? Ладно, вот вам подсказка: посмотрите на мой терминал.

Если вы работаете на Linux или Mac, для вас это, может, и не новость. Но мои друзья, использующие Windows, могли заметить нечто интересное.

В общем, для своей WSL (подсистема Windows для Linux) я использую тему Oh-My-Zsh. Можете поискать инфу в гугле. Возможно, будет непросто найти пошаговое руководство, как установить эту тему именно в терминале VS Code, но вы постарайтесь.

Управление расширениями для Visual Studio

Расширения — это пакеты кода, которые выполняются в Visual Studio и предоставляют новые или улучшенные функции. К числу расширений относятся элементы управления, примеры, шаблоны, инструменты или другие компоненты, расширяющие возможности Visual Studio, например Live Share или Visual Studio IntelliCode.

Сведения о создании расширений Visual Studio см. в разделе Visual Studio SDK. Сведения об использовании расширений см. на страницах отдельных расширений в Visual Studio Marketplace. Дополнительные сведения о поиске расширений см. в записи блога Где мои избранные расширения в Visual Studio 2022?.

Сведения о создании расширений Visual Studio см. в разделе Visual Studio SDK. Сведения об использовании расширений см. на страницах отдельных расширений в Visual Studio Marketplace.

Диалоговое окно «Управление расширениями»

Используйте диалоговое окно Управление расширениями для установки расширений Visual Studio и управления ими. Чтобы открыть диалоговое окно Управление расширениями, выберите Расширения>Управление расширениями. Или введите строку Расширения в поле поиска, а затем выберите Управление расширениями.

На левой панели расширения разделены на установленные, доступные в Visual Studio Marketplace (онлайн) и имеющие доступные обновления. Диспетчер перемещаемых расширений хранит список всех расширений Visual Studio, которые вы установили на любом компьютере или экземпляре Visual Studio. С его помощью вы легко сможете находить нужные вам расширения.

Поиск и установка расширений

Установить расширения можно из Visual Studio Marketplace или из диалогового окна «Управление расширениями» в Visual Studio.

Чтобы установить расширения из Visual Studio, выполните указанные ниже действия.

В диалоговом окне Расширения>Управление расширениями найдите расширение, которое вы намерены установить. (Если известно имя или часть имени расширения, можно выполнить поиск в окне Поиск.)

Щелкните Скачать.

Запланирована установка расширения. Расширение будет установлено после закрытия всех экземпляров Visual Studio.

При попытке установить расширение, имеющее зависимости, то установщик проверяет, установлены ли эти зависимости. Если они не установлены, то в диалоговом окне Управление расширениями отображается список зависимостей, которые требуется установить перед установкой этого расширения.

Установка без использования диалогового окна «Управление расширениями»

Расширения, упакованные в VSIX-файлы, могут быть доступны не только в Visual Studio Marketplace. Несмотря на то что VSIX-файлы не обнаруживаются в диалоговом окне Расширения>Управление расширениями, такой файл можно установить, дважды щелкнув его или выбрав файл и нажав клавишу ВВОД. После этого следуйте инструкциям. После установки такое расширение можно будет включить, отключить или удалить в диалоговом окне Управление расширениями.

Удаление или отключение расширения

Если требуется прекратить использование расширения, его можно отключить или удалить. Отключенное расширение сохранится, но не будет загружаться. Найдите расширение и щелкните Удалить или Отключить. Перезапустите Visual Studio, чтобы выгрузить отключенное расширение.

Отключать можно только расширения VSIX, но не расширения, которые были установлены с помощью MSI. Расширения, установленные с помощью MSI, можно только удалить.

Расширения на уровне пользователя и администратора

Чтобы защитить систему от расширений, которые могут содержать ошибки или вредоносный код, можно ограничить расширения на уровне пользователя, чтобы они загружались только при запуске Visual Studio под учетной записью пользователя со стандартными правами. Это означает, что расширения на уровне пользователя отключаются при запуске Visual Studio с повышенными разрешениями.

Чтобы ограничить загрузку расширений на уровне пользователя, выполните указанные ниже действия.

Откройте страницу параметров расширений (Сервис>Параметры>Среда>Расширения).

Снимите флажок Загружать расширения пользователей при выполнении от имени администратора.

Перезапустите Visual Studio.

Автоматическое обновление расширений

Расширения обновляются автоматически при появлении новой версии в Visual Studio Marketplace. Новая версия расширения обнаруживается и устанавливается в фоновом режиме. При следующем открытии Visual Studio будет запущена новая версия расширения.

Функцию автоматического обновления можно отключить для всех или только определенных расширений.

Чтобы отключить автоматическое обновление для всех расширений, щелкните ссылку Измените параметры расширений в диалоговом окне Расширения>Управление расширениями. В диалоговом окне Параметры снимите флажок Автоматически обновлять расширения.

Чтобы отключить автоматическое обновление для конкретного расширения, снимите флажок Автоматически обновлять это расширение в области сведений о расширении в правой части диалогового окна Управление расширениями.

Уведомления об аварийном завершении работы или зависаниях

Visual Studio уведомляет вас о тех расширениях, которые могли вызвать аварийное завершение предыдущего сеанса. Когда Visual Studio аварийно завершает работу, сохраняется стек исключений. При следующем запуске Visual Studio стек проверяется, начиная с листового узла, в направлении базы. Если Visual Studio определяет, что кадр принадлежит модулю, который является частью установленного и включенного расширения, система выводит уведомление.

Visual Studio оповещает еще и о тех расширениях, которые могут приводить к недоступности интерфейса.

Получив такое оповещение, вы можете проигнорировать его или выполнить одно из следующих действий.

Выберите Больше не показывать это сообщение.

Выберите Дополнительные сведения, чтобы перейти к этой странице.

Нажмите кнопку X в конце уведомления, чтобы закрыть уведомление. В этом случае уведомление снова отобразится в следующий раз, когда экземпляры этого расширения будут связаны с аварийным завершением или зависанием пользовательского интерфейса.

Уведомление о зависании или аварийном завершении пользовательского интерфейса означает только то, что один из модулей конкретного расширения находился в стеке в тот момент, когда произошло аварийное завершение. Это не обязательно означает, что расширение стало причиной сбоя. Возможно, расширение вызвало внутренний код Visual Studio, который привел к аварийному завершению или зависанию пользовательского интерфейса. Но эти уведомления могут быть полезны, если расширение, приводящее к аварийному завершению или зависанию пользовательского интерфейса, не очень важно для вас. Отключив такое расширение, вы сможете избежать аналогичных проблем в будущем без ущерба для производительности.

Примеры

При установке примера из сети решение сохраняется в двух местоположениях:

Рабочий экземпляр сохраняется в расположении, указанном при создании проекта.

Отдельный контрольный экземпляр сохраняется на компьютере.

Диалоговое окно «Управление расширениями>» можно использовать для выполнения следующих задач, связанных спримерами:

Отобразить список контрольных экземпляров установленных образцов.

Отключить или удалить контрольный экземпляр образца.

Установить пакеты примеров — коллекции примеров, связанных с определенной технологией или функцией.

Установить отдельные примеры из сети.

Просмотреть уведомления об обновлениях, когда будут опубликованы изменения в исходном коде для установленных примеров.

Обновить контрольный экземпляр установленного примера при получении уведомления об обновлении.

20 Best VS Code Extensions for Productive Web Development in 2020

Visual Studio Code Extensions to boost your productivity and to make coding more enjoyable

As a Software Engineer, I like to focus on the creative task (e.g., coding) and want to leverage the tedious, repetitive tasks with the help of IDE. Another critical and often neglected feature of modern IDEs is that they reduce the Context Switching of the developer by providing the tools for day-to-day Job.

Context Switching in programming is expensive. But Context switching of the human brain is significantly more costly than CPU’s context switching.

In my programming career, I have used many free ( KDevelop, Eclipse, NetBeans, Atom, Sublime Text, and VS Code) and many commercial IDE. Among them, I found Visual Studio Code is the best IDE, especially for Web Development. Developed by Microsoft in 2015, it quickly rose to prominence and loved by the developers. The Stack Overflow Developer Survey 2019 has ranked VS Code as the most popular IDE for Web development:

Another critical feature of VS Code is that with all its powers and functions, it has substantially less memory and CPU footprint compared to e.g., Eclipse or IntelliJ IDEA. Like many other IDE, VS Code also offers additional features via Extensions. As VS Code is the number one GitHub project in terms of Contributors, it has powerful Extensions for almost anything and everything:

Here I will list 20 excellent VS Code Extensions for Web Developers. I will specifically focus on Extensions, which will minimize the use of other tools and thus reduce Context Switching.

1. REST Client

If you are developing Web applications, then you have to deal with REST or GraphQL. I usually used tools like Postman, SOAP UI as a REST client until I found this VS Code extension. With this simple yet powerful extension, it is very easy to REST request or GraphQL query. It also supports sending cURL commands. In this way, this extension helped me to focus on using only the VS Code and reduced switching to other tools like Postman.

Language Extensions Overview

Visual Studio Code provides smart editing features for different programming languages through Language Extensions. VS Code doesn’t provide built-in language support but offers a set of APIs that enable rich language features. For example, it has a bundled HTML extension that allows VS Code to show syntax highlighting for HTML files. Similarly, when you type console. and log shows up in IntelliSense, it is the Typescript Language Features extension at work.

Language features can be roughly put into two categories:

Declarative language features

Declarative language features are defined in configuration files. Examples include html, css and typescript-basic extensions bundled with VS Code, which offer a subset of the following Declarative Language Features:

We have three guides for writing Language Extensions that provide Declarative Language Features.

Programmatic language features

Programmatic Language Features include auto completion, error checking, and jump to definition. These features are often powered by a Language Server, a program that analyzes your project to provide the dynamic features. One example is the typescript-language-features extension bundled in VS Code. It utilizes the TypeScript Language Service to offer Programmatic Language Features such as:

Language Server Protocol

By standardizing the communication between a Language Server (a static code analysis tool) and a Language Client (usually a source code editor), the Language Server Protocol allows extension authors to write one code analysis program and reuse it in multiple editors.

In the Programmatic Language Features listing, you can find a listing of all VS Code language features and how they map to the Language Server Protocol Specification.

We offer an in-depth guide that explains how to implement a Language Server extension in VS Code:

Special cases

Multi-root workspace support

When the user opens a multi-root workspace, you might need to adapt your Language Server extensions accordingly. This topic discusses multiple approaches to supporting multi-root workspaces.

Embedded languages

Embedded languages are common in web development. For example, CSS/JavaScript inside HTML, and GraphQL inside JavaScript/TypeScript. The Embedded languages topic discusses how you can make language features available to embedded languages.

Wrapping Up

In the Your First Extension topic, you learned how to create, run, and debug an extension. In the Extension Anatomy topic, you learned fundamental concepts to Visual Studio Code extension development. However, we have only seen the tip of the iceberg, and here are some suggested routes for furthering your VS Code extension development skills.

Extension Capabilities

In this section, we split the VS Code API and Contribution Points into a few categories, each with short descriptions as to what your extension could achieve. Validate that your extension idea is achievable by reviewing the VS Code API or reading the Extension Capabilities section for new extension ideas.

Guides & Samples

We have a great collection of sample extensions that you can adapt from, and some of them include a detailed guide that explains the source code. You can find all samples and guides in the Extension Guide Listing or the vscode-extension-samples repository.

UX Guidelines

To help make your extension fit seemlessly into the VS Code user interface, refer to the UX Guidelines, where you’ll learn the best practices for creating extension UI and conventions for following the preferred VS Code workflows.

Testing and Publishing

This section includes topics that help you develop high-quality VS Code extensions. For example, you can learn

UX Guidelines

These guidelines cover the best practices for creating extensions that seamlessly integrate with VS Code’s native interface and patterns. In these guidelines, you can expect to find:

Before diving into the details, it’s important to understand how the various architectural UI parts of VS Code fit together and how and where your extension could contribute.

Containers

The VS Code interface can roughly be divided into two main concepts: containers and items. Generally speaking, containers can be considered the larger sections of the VS Code interface that render one or more items:

Activity Bar

The Activity Bar is a core navigation surface in VS Code. Extensions can contribute items to the Activity Bar that function as View Containers that render Views in the Primary Sidebar.

Primary Sidebar

The Primary Sidebar renders one or more Views. The Activity Bar and the Primary Sidebar are tightly coupled. Clicking on a contributed Activity Bar Item (read: View Container) opens up the Primary Sidebar where one or more View associated with that View Container will be rendered. A concrete example would be the Explorer. Clicking on the Explorer Item will open up the Primary Sidebar where the Folder(s), Timeline, and Outline Views are visible.

Secondary Sidebar

The Secondary Sidebar also functions as a surface for rendering a View Container with Views. Users can drag views like the Terminal or the Problems view to the Secondary Sidebar to customize their layout.

Editor

The Editor area contains one or more Editor Groups. Extensions can contribute Custom Editors or Webviews to open in the Editor area. They can also contribute Editor Actions to expose additional icon buttons in the Editor Toolbar.

Panel

The Panel is another area for exposing View Containers. By default, Views like the Terminal, Problems, and Output can be viewed in a single tab at a time in the Panel. Users can also drag views into a split layout much like they can do in the Editor. Additionally, extensions can choose to add View Containers specifically to the Panel instead of the Activity Bar/Primary Sidebar.

Status Bar

The Status Bar provides contextual information about the workspace and currently active file. It renders two groups of Status Bar Items.

Items

Extensions can add items to the various containers listed above.

Views can be contributed in the form of a Tree View, Welcome View, or Webview View and can be dragged around to other areas of the interface.

View Toolbar

Extensions can expose View-specific actions that appear as buttons on a View Toolbar.

Sidebar Toolbar

Actions scoped to an entire View Container can also be exposed in the Sidebar Toolbar.

Editor Toolbar

Extensions can contribute Editor Actions scoped to an editor directly in the Editor Toolbar.

Panel Toolbar

The Panel Toolbar can expose options scoped to the currently selected View. For example the Terminal view exposes actions to add a new terminal, split the view layout, and more. Switching to the Problems view exposes a different set of actions.

Status Bar Item

On the left, Status Bar Items are scoped to the entire Workspace. On the right, items are scoped to the active file.

Common UI Elements

Command Palette

Extensions can contribute Commands that appears in the Command Palette to quickly execute some functionality.

Quick Pick

Quick Picks capture a user’s input in several different ways. They can ask for a single selection, multiple selections, or even freeform text input.

Notifications

Notifications are used to communicate information, warning, and error messages to users. They can also be used to indicate progress.

Webviews

Webviews can be used to display custom content and functionality for use cases that go beyond VS Code’s «native» API.

Context Menus

In contrast to the Command Palette’s consistent location, Context Menus give users the ability to perform actions or configure something from a specific location.

Walkthroughs

Walkthroughs provide a consistent experience for onboarding users to an extension via a multi-step checklist featuring rich content.

Settings

Settings enable users to configure options relevant to the extension.

Bundling Extensions

The first reason to bundle your Visual Studio Code extension is to make sure it works for everyone using VS Code on any platform. Only bundled extensions can be used in VS Code for Web environments like github.dev and vscode.dev. When VS Code is running in the browser, it can only load one file for your extension so the extension code needs to be bundled into one single web-friendly JavaScript file. This also applies to Notebook Output Renderers, where VS Code will also only load one file for your renderer extension.

In addition, extensions can quickly grow in size and complexity. They may be authored in multiple source files and depend on modules from npm. Decomposition and reuse are development best practices but they come at a cost when installing and running extensions. Loading 100 small files is much slower than loading one large file. That’s why we recommend bundling. Bundling is the process of combining multiple small source files into a single file.

For JavaScript, different bundlers are available. Popular ones are rollup.js, Parcel, esbuild, and webpack.

Using esbuild

esbuild is a fast bundler that’s simple to configure. To acquire esbuild, open the terminal and type:

For an example of a complete extension using esbuild, check out the test-adapter-converter.

Run esbuild

You can run esbuild from the command line but to reduce repetition, using npm scripts is helpful.

Merge these entries into the scripts section in package.json :

Jump down to the Tests section to continue reading.

Using webpack

Webpack is a development tool that’s available from npm. To acquire webpack and its command line interface, open the terminal and type:

Configure webpack

With all tools installed, webpack can now be configured. By convention, a webpack.config.js file contains the configuration to instruct webpack to bundle your extension. The sample configuration below is for VS Code extensions and should provide a good starting point:

The file is available as part of the webpack-extension sample. Webpack configuration files are normal JavaScript modules that must export a configuration object.

In the sample above, the following are defined:

Run webpack

With the webpack.config.js file created, webpack can be invoked. You can run webpack from the command line but to reduce repetition, using npm scripts is helpful.

Merge these entries into the scripts section in package.json :

Run the extension

Tests

Extension authors often write unit tests for their extension source code. With the correct architectural layering, where the extension source code doesn’t depend on tests, the webpack produced bundle shouldn’t contain any test code. To run unit tests, only a simple compile is necessary. In the sample, there is a test-compile script, which uses the TypeScript compiler to compile the extension into the out folder. With that intermediate JavaScript available, the following snippet for launch.json is enough to run tests.

This configuration for running tests is the same for non-webpacked extensions. There is no reason to webpack unit tests because they are not part of the published portion of an extension.

Publishing

Migrate an existing extension

Migrating an existing extension to use webpack is easy and similar to the getting started guide above. A real world sample that adopted webpack is the VS Code’s References view through this pull request.

There you can see:

Troubleshooting

Minification

Bundling in production mode also performs code minification. Minification compacts source code by removing whitespace and comments and by changing variable and function names into something ugly but short. Source code that uses Function.prototype.name works differently and so you might have to disable minification.

webpack critical dependencies

To address the warning, you should either:

Manage extensions for Visual Studio

Extensions are code packages that run inside Visual Studio and provide new or improved features. Extensions may be controls, samples, templates, tools, or other components that add functionality to Visual Studio, for example, Live Share or Visual Studio IntelliCode.

For information about creating Visual Studio extensions, see Visual Studio SDK. For information about using extensions, see the individual extension page on Visual Studio Marketplace. And for information about finding extensions, see the Where Are My Favorite Extensions in Visual Studio 2022? blog post.

For information about creating Visual Studio extensions, see Visual Studio SDK. For information about using extensions, see the individual extension page on Visual Studio Marketplace.

Manage Extensions dialog box

Use the Manage Extensions dialog box to install and manage Visual Studio extensions. To open the Manage Extensions dialog, choose Extensions > Manage Extensions. Or, type Extensions in the search box and choose Manage Extensions.

The pane on the left categorizes extensions by those that are installed, those available on Visual Studio Marketplace (Online), and those that have updates available. Roaming Extension Manager keeps a list of all the Visual Studio extensions you’ve installed on any machine or instance of Visual Studio. It’s designed to let you find your favorite extensions more easily.

Find and install extensions

You can install extensions from Visual Studio Marketplace or the Manage Extensions dialog box in Visual Studio.

To install extensions from within Visual Studio:

From Extensions > Manage Extensions, find the extension you want to install. (If you know the name or part of the name of the extension, you can search in the Search window.)

Select Download.

The extension is scheduled for install. Your extension will be installed after all instances of Visual Studio have been closed.

If you try to install an extension that has dependencies, the installer verifies whether they’re already installed. If they aren’t installed, the Manage Extensions dialog box lists the dependencies that must be installed before you can install the extension.

Install without using the Manage Extensions dialog box

Extensions that have been packaged in .vsix files may be available in locations other than Visual Studio Marketplace. The Extensions > Manage Extensions dialog box can’t detect these files, but you can install a .vsix file by double-clicking the file or selecting the file and pressing Enter. After that, just follow the instructions. When the extension is installed, you can use the Manage Extensions dialog box to enable it, disable it, or uninstall it.

Uninstall or disable an extension

If you want to stop using an extension, you can either disable it or uninstall it. Disabling an extension keeps it installed but unloaded. Find the extension and click Uninstall or Disable. Restart Visual Studio to unload a disabled extension.

You can disable VSIX extensions but not extensions that were installed using an MSI. MSI-installed extensions can only be uninstalled.

Per-user and administrative extensions

Most extensions are per-user and are installed in the %LocalAppData%\Microsoft\VisualStudio\ \Extensions\ folder. A few extensions are administrative extensions and are installed in the \Common7\IDE\Extensions\ folder.

To protect your system against extensions that may contain errors or malicious code, you can restrict per-user extensions to load only when Visual Studio is run with normal user permissions. This means that per-user extensions are disabled when Visual Studio is run with elevated permissions.

To restrict when per-user extensions load:

Open the extensions options page (Tools > Options > Environment > Extensions).

Clear the Load per user extensions when running as administrator check box.

Restart Visual Studio.

Automatic extension updates

Extensions are updated automatically when a new version is available on Visual Studio Marketplace. The new version of the extension is detected and installed in the background. The next time you open Visual Studio, the new version of the extension will be running.

If you wish to disable automatic updates, you can disable the feature for all extensions or only for specific extensions.

To disable automatic updates for all extensions, choose the Change your settings for Extensions link in the Extensions > Manage Extensions dialog box. In the Options dialog, uncheck Automatically update extensions.

To disable automatic updates for a specific extension, uncheck the Automatically update this extension option in the extension’s details pane on the right side of the Manage Extensions dialog.

Crash and unresponsiveness notifications

Visual Studio notifies you if it suspects that an extension was involved in a crash during a previous session. When Visual Studio crashes, it stores the exception stack. The next time Visual Studio launches, it examines the stack, starting with the leaf and working towards the base. If Visual Studio determines that a frame belongs to a module that is part of an installed and enabled extension, it shows a notification.

Visual Studio also notifies you if it suspects an extension is causing the UI to be unresponsive.

When these notifications are shown, you can ignore the notification or take one of the following actions:

Choose Never show this message again.

Choose Learn more to navigate to this page.

Choose the X button at the end of the notification to dismiss the notification. A new notification will appear for future instances of the extension being associated with a crash or UI unresponsiveness.

A UI unresponsiveness or crash notification means only that one of the extension’s modules was on the stack when the UI was unresponsive or when the crash occurred. It does not necessarily mean that the extension itself was the culprit. It’s possible that the extension called code that’s part of Visual Studio, which in turn resulted in unresponsive UI or a crash. However, the notification may still be useful if the extension which led to the UI unresponsiveness or crash is not important to you. In this case, disabling the extension avoids the UI unresponsiveness or the crash in the future, without impacting your productivity.

Samples

When you install an online sample, the solution is stored in two locations:

A working copy is stored in the location that you specified when you created the project.

A separate master copy is stored on your computer.

You can use the Extensions > Manage Extensions dialog box to perform these samples-related tasks:

List the master copies of samples that you have installed.

Disable or uninstall the master copy of a sample.

Install Sample Packs, which are collections of samples that relate to a technology or feature.

Install individual online samples.

View update notifications when source code changes are published for installed samples.

Update the master copy of an installed sample when there is an update notification.

Топ-15 плагинов для Visual Studio Code

Представляем вашему вниманию подборку 15 расширений для Visual Studio Code (VSCode), которые пригодятся программисту любого уровня.

Для тех, кто не в курсе, Visual Studio Code – это бесплатный и кроссплатформенный текстовый редактор, созданный компанией Microsoft. Он достаточно быстро стал «народным любимцем», ввиду его высокой производительности и обильного функционала.

Как и большинство современных IDE, VSCode имеет перманентно развивающийся рынок устанавливаемых дополнений, расширяющих исходные возможности редактора. Для того, чтобы разобраться, на какие именно плагины стоит обратить внимания, ресурс «Библиотека программиста» представляет вашему вниманию подборку 15 плагинов для Visual Studio Code, которые будут полезны любому программисту.

1. Open-In-Browser

По умолчанию, Visual Studio Code не предусматривает возможности открывать файл в любом выбранном браузере. Данное расширение не только добавляет функцию Открыть в браузере по умолчанию, но также позволяет открывать файлы в любом имеющемся у вас браузере (Firefox, Chrome, IE).

2. Quokka

Quokka – это утилита, дающая вам возможность предварительного просмотра результата выполнения того или иного куска кода. Она выдает вам результаты выполнения функций и посчитанные значения переменных. Расширение легко настроить, и оно запускается из того же ящика, что и JSX или Typescript проекты.

3. Faker

Быстро вставляйте случайные данные при помощи знаменитой библиотеки Javascript Faker. Вы можете вставлять произвольные имена, адреса, изображения, телефонные номера и даже отрывки известных литературных произведений. Каждая категория имеет свои подкатегории, что позволяет вам выбрать наиболее подходящий вариант.

4. CSS Peek

С этим плагином вы можете отслеживать определения CSS классов и id таблиц стилей. Для этого просто достаточно кликнуть правой кнопкой мыши на селектор в вашем HTML файле и воспользоваться функцией Перейти к определению или Подсмотреть определение.

5. HTML Boilerplate

Это расширение упрощает работу с HTML файлами, избавляя вас от необходимости прописывать теги head и body вручную. Просто наберите в пустом файле html, нажмите на Tab, и VS Code сам сгенерирует шаблон вашего документа.

6. Prettier

На сегодняшний день, Prettier – самый популярный редактор кода в мире веб-разработки. Он позволяет приводить код, написанный несколькими людьми, к единообразному виду. В настройках Prettier можно установить автоматический запуск, что позволяет моментально форматировать JS и CSS документы.

7. Color Info

Небольшой плагин, который даёт вам возможность получать краткую справку об используемых в CSS цветах. Наведя курсор на название цвета, вы можете увидеть, как этот цвет выглядит, а также получить всю информацию о трансляции данного цвета в разные форматы (hex, rgb, hsl и cmyk).

8. SVG Viewer

Это расширение привносит в VS Code возможность работать с SVG файлами. С помощью SVG Viewer, вы можете редактировать SVG файлы, конвертировать их в PNG и создавать data URL схемы.

9. TODO Highlight

Данная программа позволяет вам проставлять метки всем недоделанным местам в коде, что упрощает дальнейшую работу над проектом. По умолчанию, метки могут быть только TODO (доделать) и FIXME (исправить), но при желании вы можете создавать и свои типы меток.

10. Шрифты

Небольшое дополнение, добавляющее в VS Code поддержку около 20 популярных шрифтов, в частности, Font Awesome, Ionicons, Glyphicons, and Material Design.

11. Minify

Minify является утилитой, предлагающей массу возможностей по оптимизации и сжатию размеров кода. Minify работает с HTML, JS и CSS файлами и также отлично сочетается с такими плагинами, как uglify-js, clean-css и html-minifier.

12. Change Case

Так, пришло время немного расслабиться. Если все рассматриваемые до этого расширения были ориентированы на какое-то практическое применение, то эта утилита позволяет немного побаловаться с регистрами. По умолчанию, VS Code имеет только функции приведения к верхнему и нижнему регистру, но, установив себе Change Case, вы получите доступ к довольно обширному количеству регистров, к примеру, змеиный регистр, верблюжий регистр и прочее.

13. Regex Previewer

Очень полезный инструмент, который позволяет вам работать с регулярными выражениями прямо в текстовом редакторе. Он принимает на вход два регулярных выражения и выдаёт результаты сравнения. Принцип работы чем-то похож на RegExr.

14. Языки программирования и фреймворки

VS Code поддерживает большое количество языков и Фреймворков, но далеко не все. Если по каким-то причинам, используемая вами технология не попала в этот список, то вы всегда можете скачать нужное вам расширение с поддержкой таких приятных фич, как автозаполнение, правильные отступы и тому подобное.

15. Темы

Вот и дошли до самого вкусного. Ведь вы собираетесь много работать в VS Code, так почему бы для начала не сделать его красивым? Есть тонны отличных тем, но мы отобрали 4 фаворита:

Debugger Extension

Visual Studio Code’s debugging architecture allows extension authors to easily integrate existing debuggers into VS Code, while having a common user interface with all of them.

VS Code ships with one built-in debugger extension, the Node.js debugger extension, which is an excellent showcase for the many debugger features supported by VS Code:

This screenshot shows the following debugging features:

This documentation will help you create a debugger extension which can make any debugger work with VS Code.

Debugging Architecture of VS Code

VS Code implements a generic (language-agnostic) debugger UI based on an abstract protocol that we’ve introduced to communicate with debugger backends. Because debuggers typically do not implement this protocol, some intermediary is needed to «adapt» the debugger to the protocol. This intermediary is typically a standalone process that communicates with the debugger.

We call this intermediary the Debug Adapter (or DA for short) and the abstract protocol that is used between the DA and VS Code is the Debug Adapter Protocol (DAP for short). Since the Debug Adapter Protocol is independent from VS Code, it has its own web site where you can find an introduction and overview, the detailed specification, and some lists with known implementations and supporting tools. The history of and motivation behind DAP is explained in this blog post.

Since debug adapters are independent from VS Code and can be used in other developments tools, they do not match VS Code’s extensibility architecture which is based on extensions and contribution points.

So in its most minimal form, a debugger extension is just a declarative contribution of a debug adapter implementation and the extension is basically a packaging container for the debug adapter without any additional code.

A more realistic debugger extension contributes many or all of the following declarative items to VS Code:

You can find more information in contributes.breakpoints and contributes.debuggers references.

In addition to the purely declarative contributions from above, the Debug Extension API enables this code-based functionality:

In the rest of this document we show how to develop a debugger extension.

The Mock Debug Extension

Since creating a debug adapter from scratch is a bit heavy for this tutorial, we will start with a simple DA which we have created as an educational «debug adapter starter kit». It is called Mock Debug because it does not talk to a real debugger, but mocks one. Mock Debug simulates a debugger and supports step, continue, breakpoints, exceptions, and variable access, but it is not connected to any real debugger.

Before delving into the development setup for mock-debug, let’s first install a pre-built version from the VS Code Marketplace and play with it:

To try Mock Debug:

A debug session starts and you can «step» through the readme file, set and hit breakpoints, and run into exceptions (if the word exception appears in a line).

Before using Mock Debug as a starting point for your own development, we recommend to uninstall the pre-built version first:

Development Setup for Mock Debug

Now let’s get the source for Mock Debug and start development on it within VS Code:

Open the project folder vscode-mock-debug in VS Code.

What’s in the package?

After transpiling the source, a new VS Code window labelled «[Extension Development Host]» appears with the Mock Debug extension now running in debug mode. From that window open your mock test project with the readme.md file, start a debug session with ‘F5’, and then step through it:

Since you are running the extension in debug mode, you could now set and hit breakpoints in src/extension.ts but as I’ve mentioned above, there is not much interesting code executing in the extension. The interesting code runs in the debug adapter which is a separate process.

In order to debug the debug adapter itself, we have to run it in debug mode. This is most easily achieved by running the debug adapter in server mode and configure VS Code to connect to it. In your VS Code vscode-mock-debug project select the launch configuration Server from the dropdown menu and press the green start button.

Since we already had an active debug session for the extension the VS Code debugger UI now enters multi session mode which is indicated by seeing the names of the two debug sessions Extension and Server showing up in the CALL STACK view:

Now we are able to debug both the extension and the DA simultaneously. A faster way to arrive here is by using the Extension + Server launch configuration which launches both sessions automatically.

An alternative, even simpler approach for debugging the extension and the DA can be found below.

Set a breakpoint at the beginning of method launchRequest(. ) in file src/mockDebug.ts and as a last step configure the mock debugger to connect to the DA server by adding a debugServer attribute for port 4711 to your mock test launch config:

With this setup, you can now easily edit, transpile, and debug Mock Debug.

But now the real work begins: you will have to replace the mock implementation of the debug adapter in src/mockDebug.ts and src/mockRuntime.ts by some code that talks to a «real» debugger or runtime. This involves understanding and implementing the Debug Adapter Protocol. More details about this can be found here.

Anatomy of the package.json of a Debugger Extension

Besides providing a debugger-specific implementation of the debug adapter a debugger extension needs a package.json that contributes to the various debug-related contributions points.

So let’s have a closer look at the package.json of Mock Debug.

Like every VS Code extension, the package.json declares the fundamental properties name, publisher, and version of the extension. Use the categories field to make the extension easier to find in the VS Code Extension Marketplace.

Now take a look at the contributes section which contains the contributions specific to debug extensions.

First, we use the breakpoints contribution point to list the languages for which setting breakpoints will be enabled. Without this, it would not be possible to set breakpoints in Markdown files.

Since VS Code runs on different platforms, we have to make sure that the DA program supports the different platforms as well. For this we have the following options:

If the program is implemented in a platform independent way, e.g. as program that runs on a runtime that is available on all supported platforms, you can specify this runtime via the runtime attribute. As of today, VS Code supports node and mono runtimes. Our Mock debug adapter from above uses this approach.

If your DA implementation needs different executables on different platforms, the program attribute can be qualified for specific platforms like this:

A combination of both approaches is possible too. The following example is from the Mono DA which is implemented as a mono application that needs a runtime on macOS and Linux but not on Windows:

configurationAttributes declares the schema for the launch.json attributes that are available for this debugger. This schema is used for validating the launch.json and supporting IntelliSense and hover help when editing the launch configuration.

The initialConfigurations define the initial content of the default launch.json for this debugger. This information is used when a project does not have a launch.json and a user starts a debug session or selects the create a launch.json file link in the Run and Debug view. In this case VS Code lets the user pick a debug environment and then creates the corresponding launch.json :

The variables contribution binds «variables» to «commands». These variables can be used in the launch configuration using the $ syntax and the variables are substituted by the value returned from the bound command when a debug session is started.

Using a DebugConfigurationProvider

If the static nature of debug contributions in the package.json is not sufficient, a DebugConfigurationProvider can be used to dynamically control the following aspects of a debug extension:

The MockConfigurationProvider in src/extension.ts implements resolveDebugConfiguration to detect the case where a debug session is started when no launch.json exists, but a Markdown file is open in the active editor. This is a typical scenario where the user has a file open in the editor and just wants to debug it without creating a launch.json.

This catch-all onDebug is triggered as soon as any debug functionality is used. This works fine as long as the extension has cheap startup costs (i.e. does not spend a lot of time in its startup sequence). If a debug extension has an expensive startup (for instance because of starting a language server), the onDebug activation event could negatively affect other debug extensions, because it is triggered rather early and does not take a specific debug type into account.

A better approach for expensive debug extensions is to use more fine-grained activation events:

Publishing your debugger extension

Once you have created your debugger extension you can publish it to the Marketplace:

Alternative approach to develop a debugger extension

As we have seen, developing a debugger extension typically involves debugging both the extension and the debug adapter in two parallel sessions. As explained above VS Code supports this nicely but development could be easier if both the extension and the debug adapter would be one program that could be debugged in one debug session.

This approach is in fact easily doable as long as your debug adapter is implemented in TypeScript/JavaScript. The basic idea is to run the debug adapter directly inside the extension and to make VS Code to connect to it instead of launching a new external debug adapter per session.

For this VS Code provides extension API to control how a debug adapter is created and run. A DebugAdapterDescriptorFactory has a method createDebugAdapterDescriptor that is called by VS Code when a debug session starts and a debug adapter is needed. This method must return a descriptor object ( DebugAdapterDescriptor ) that describes how the debug adapter is run.

Today VS Code supports three different ways for running a debug adapter and consequently offers three different descriptor types:

For development, the inline and server modes are particularly useful because they allow for debugging extension and debug adapter within a single process.

microsoft/vscode-extension-samples

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

VS Code Extension Samples

This repository contains sample code illustrating the VS Code extension API. Each sample is a self-contained extension that explains one topic in VS Code API or VS Code’s Contribution Points. You can read, play with or adapt from these samples to create your own extensions.

You can expect from each sample:

You need to have node and npm installed on your system to run the examples. It is recommended to use the node version used for VS Code development itself which is documented here

Language Server Protocol Samples

Copyright (c) Microsoft Corporation. All rights reserved.

Licensed under the MIT License.

About

Sample code illustrating the VS Code extension API.

Top 15 Visual Studio Code Extensions in 2019

As a developer, you want to be efficient with your time and automate where you can. Here are 15 VS Code extensions you should be taking advantage of today.

Visual Studio Code is one of the most popular IDEs available in the market, and it has been making waves for some time now. As developers, we need to automate most of our process. Thankfully, VS Code offers extensions that’ll enable us to extend the capability of the code editor.

In this article, I’ll be sharing the top 15 VS Code extensions you should be using in 2019 to boost your productivity as a developer. VS Code provides a host of extensions, ranging from linters, debuggers, snippets, keymaps, themes and a lot more. All of these are located in the VS Code Extension Marketplace.

Import Cost

The Import Cost extension is great for viewing the package size at a glance for imported packages. This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babel-webpack-plugin in order to detect the imported size.

Quokka JS

Ever had the need to test out a JavaScript code and you had to spin up the console in Chrome DevTools? Never again! I’ll introduce you to Quokka.js. This extension is a live scratchpad for JavaScript, and it serves as a rapid prototyping playground in your editor, with access to your project’s files, inline reporting, code coverage, and rich output formatting.

Turbo Console.log

Turbo Console Log is a VS Code extension that helps you automate logging statements across your codebase. It works by selecting a variable and quickly writes the whole console.log statement with keyboard shortcut ctrl + alt + l for Windows or cmd + opt + l for Mac. In addition, it is also possible to remove all console.log statements at once.

Night Owl

The Night Owl theme is one of my favorites themes, and has an impressive 240k installations from the marketplace. This theme is ideal for fans of dark mode themes — fine-tuned for people who love working late at night, and the color choices take into consideration the level of accessibility for people with color blindness and in low-light circumstances.

Azure Functions

The Azure Functions extension for VS Code is really handy. It allows you to create, debug, manage, and deploy Azure Functions directly from VS Code, which makes the entire process of working with Azure Functions seamless.

Path Intellisense

The Path Intellisense extension is another great tool to give a try. It helps you automatically complete filenames. When working on large codebases, it can become a pain when you need to look up path names for files or directories. This extension provides intellisense for files and will save you time looking up a file name.

ESLint

The ESLint extension is quite handy for writing clean code. This extension helps you integrate ESLint into your editor such that your code is automatically formatted, and also linting is enabled for errors and warnings. With over 18 million downloads, this is one of the most-downloaded extensions.

Prettier

Manually formatting code can be a pain for developers and mostly slows you down while coding. This is why it is important to automate things like formatting so you don’t have to worry again. The Prettier code extension helps you format your code so you don’t have to manually do it. Prettier is really popular and used by a lot of developers, and this is why it has an approximate 7 million downloads.

Live Server

The Live Server extension provides you with a quick development Live Server, with live browser reload enabled for static and dynamic pages. The cool thing about this extension is it has a go-live button on the taskbar, so you can easily spin up a development server at any time and it works seamlessly.

Vetur

The Vetur extension is the official Vue tooling for VS Code. This extension helps Vue.js development with features like syntax highlighting, linting/formatting, emmet support, and code auto-completion. The extension is really popular, with over 10 million downloads from the marketplace. If you’re developing with Vue.js, you should definitely have this extension installed.

GitLens

The GitLens extension is a very powerful extension for VS Code. It helps to supercharge the git capabilities built into VS Code. Some of the features it supports include the ability to visualize code authorship, you can view git blame and also see the history of a file with diff enabled, which is super cool.

Polacode

Polacode is a VS Code extension for creating fancy screenshots for your code snippets. How does this work, you ask? It’s as easy as installing the extension; then you can then spin it up and copy the code to paste it in Polacode; then you can download as an image.

Bracket Pair Colorizer

Many times I’ve had issues identifying matching brackets in a deeply nested codebase as a result of having no differentiating factor between all brackets. But with the Bracket Pair Colorizer extension, which is one of my favorite extensions, it is possible to match brackets in my codebase with matching colors, allowing me to easily select a scope of the code block with ease.

Settings Sync

Settings Sync is a great extension that enables you to synchronize settings, snippets, themes, file icons, keybindings, and extensions across multiple machines using GitHub gist. This way, it is easier to migrate to a new system without losing any of your customized VS Code settings.

Debugger for Chrome

Quite a lot of developers use the console.log method for debugging, which is okay, right? But they miss out on the awesome capabilities of the Chrome Debugger. The Debugger for Chrome extension is an official extension for debugging your code directly in VS Code. And this is by far a better experience for debugging your code.

Conclusion

In this article, I’ve listed the top 15 extensions to give a try in 2019, but this is in no way a complete list of great extensions to try. VS Code has a huge library of extensions, and there are more extensions to check out that will help you increase productivity when writing code and which are available on the marketplace. Feel free to leave a comment if you find any of these helpful and if you have suggestions for other extensions I can check out.

For More Info on Building Great Web Apps

Language Server Extension Guide

As you have seen in the Programmatic Language Features topic, it’s possible to implement Language Features by directly using languages.* API. Language Server Extension, however, provides an alternative way of implementing such language support.

Why Language Server?

Language Server is a special kind of Visual Studio Code extension that powers the editing experience for many programming languages. With Language Servers, you can implement autocomplete, error-checking (diagnostics), jump-to-definition, and many other language features supported in VS Code.

However, while implementing support for language features in VS Code, we found three common problems:

First, Language Servers are usually implemented in their native programming languages, and that presents a challenge in integrating them with VS Code, which has a Node.js runtime.

Additionally, language features can be resource intensive. For example, to correctly validate a file, Language Server needs to parse a large amount of files, build up Abstract Syntax Trees for them and perform static program analysis. Those operations could incur significant CPU and memory usage and we need to ensure that VS Code’s performance remains unaffected.

To solve those problems, Microsoft specified Language Server Protocol, which standardizes the communication between language tooling and code editor. This way, Language Servers can be implemented in any language and run in their own process to avoid performance cost, as they communicate with the code editor through the Language Server Protocol. Furthermore, any LSP-compliant language toolings can integrate with multiple LSP-compliant code editors, and any LSP-compliant code editors can easily pick up multiple LSP-compliant language toolings. LSP is a win for both language tooling providers and code editor vendors!

In this guide, we will:

Implementing a Language Server

Overview

In VS Code, a language server has two parts:

As briefly stated above there are two benefits of running the Language Server in a separate process:

Here is an illustration of VS Code running two Language Server extensions. The HTML Language Client and PHP Language Client are normal VS Code extensions written in TypeScript. Each of them instantiates a corresponding Language Server and communicates with them through LSP. Although the PHP Language Server is written in PHP, it can still communicate with the PHP Language Client through LSP.

This guide will teach you how to build a Language Client / Server using our Node SDK. The remaining document assumes that you are familiar with VS Code Extension API.

Let’s build a simple Language Server extension that implements autocomplete and diagnostics for plain text files. We will also cover the syncing of configurations between Client / Server.

If you prefer to jump right into the code:

Clone the repository Microsoft/vscode-extension-samples and open the sample:

The above installs all dependencies and opens the lsp-sample workspace containing both the client and server code. Here is a rough overview of the structure of lsp-sample:

Explaining the ‘Language Client’

Next look at the configuration section:

This section contributes configuration settings to VS Code. The example will explain how these settings are sent over to the language server on startup and on every change of the settings.

The actual Language Client source code and the corresponding package.json are in the /client folder. The interesting part in the /client/package.json file is that it references the vscode extension host API through the engines field and adds a dependency to the vscode-languageclient library:

As mentioned, the client is implemented as a normal VS Code extension, and it has access to all VS Code namespace API.

Below is the content of the corresponding extension.ts file, which is the entry of the lsp-sample extension:

Explaining the ‘Language Server’

Note: The ‘Server’ implementation cloned from the GitHub repository has the final walkthrough implementation. To follow the walkthrough, you can create a new server.ts or modify the contents of the cloned version.

In the example, the server is also implemented in TypeScript and executed using Node.js. Since VS Code already ships with a Node.js runtime, there is no need to provide your own, unless you have specific requirements for the runtime.

This pulls in the vscode-languageserver libraries.

Below is a server implementation that uses the provided simple text document manager that synchronizes text documents by always sending the file’s full content from VS Code to the server.

Adding a Simple Validation

To add document validation to the server, we add a listener to the text document manager that gets called whenever the content of a text document changes. It is then up to the server to decide when the best time is to validate a document. In the example implementation, the server validates the plain text document and flags all occurrences of words that use ALL CAPS. The corresponding code snippet looks like this:

Diagnostics Tips and Tricks

To run the Language Server, do the following steps:

The Extension Development Host instance will then look like this:

Debugging both Client and Server

Logging Support for Language Server

Using Configuration Settings in the Server

When writing the client part of the extension, we already defined a setting to control the maximum numbers of problems reported. We also wrote code on the server side to read these settings from the client:

The only thing we need to do now is to listen to configuration changes on the server side and if a setting changes, revalidate the open text documents. To be able to reuse the validate logic of the document change event handling, we extract the code into a validateTextDocument function and modify the code to honor a maxNumberOfProblems variable:

The handling of the configuration change is done by adding a notification handler for configuration changes to the connection. The corresponding code looks like this:

Starting the client again and changing the setting to maximum report 1 problem results in the following validation:

Adding additional Language Features

The first interesting feature a language server usually implements is validation of documents. In that sense, even a linter counts as a language server and in VS Code linters are usually implemented as language servers (see eslint and jshint for examples). But there is more to language servers. They can provide code completion, Find All References, or Go To Definition. The example code below adds code completion to the server. It proposes the two words ‘TypeScript’ and ‘JavaScript’.

The data fields are used to uniquely identify a completion item in the resolve handler. The data property is transparent for the protocol. Since the underlying message passing protocol is JSON-based, the data field should only hold data that is serializable to and from JSON.

All that is missing is to tell VS Code that the server supports code completion requests. To do so, flag the corresponding capability in the initialize handler:

The screenshot below shows the completed code running on a plain text file:

Testing The Language Server

To create a high-quality Language Server, we need to build a good test suite covering its functionalities. There are two common ways of testing Language Servers:

It is possible to do Unit Test in any testing framework of your choice. Here we describe how to do End-to-End testing for Language Server Extension.

Let’s take a look at the completion.test.ts file:

In this test, we:

Let’s dive a bit deeper into the activate(docURI) function. It is defined in client/src/test/helper.ts :

In the activation part, we:

After the preparation, we can run the VS Code Commands corresponding to each language feature, and assert against the returned result.

Advanced Topics

So far, this guide covered:

There are some more advanced topics we could not fit in to this guide. We will include links to these resources for further studying of Language Server development.

Additional Language Server features

The following language features are currently supported in a language server along with code completions:

The Programmatic Language Features topic describes each of the language features above and provides guidance on how to implement them either through the language server protocol or by using the extensibility API directly from your extension.

Incremental Text Document Synchronization

The example uses the simple text document manager provided by the vscode-languageserver module to synchronize documents between VS Code and the language server.

This has two drawbacks:

The protocol therefore supports incremental document synchronization as well.

To make use of incremental document synchronization, a server needs to install three notification handlers:

Below is a code snippet that illustrates how to hook these notification handlers on a connection and how to return the right capability on initialize:

Using VS Code API directly to implement Language Features

While Language Servers have many benefits, they are not the only option for extending the editing capabilities of VS Code. In the cases when you want to add some simple language features for a type of document, consider using vscode.languages.register[LANGUAGE_FEATURE]Provider as an option.

Here is a completions-sample using vscode.languages.registerCompletionItemProvider to add a few snippets as completions for plain text files.

More samples illustrating the usage of VS Code API can be found at https://github.com/microsoft/vscode-extension-samples.

Error Tolerant Parser for Language Server

Most of the time, the code in the editor is incomplete and syntactically incorrect, but developers would still expect autocomplete and other language features to work. Therefore, an error tolerant parser is necessary for a Language Server: The parser generates meaningful AST from partially complete code, and the Language Server provides language features based on the AST.

When we were improving PHP support in VS Code, we realized the official PHP parser is not error tolerant and cannot be reused directly in the Language Server. Therefore, we worked on Microsoft/tolerant-php-parser and left detailed notes that might help Language Server authors who need to implement an error tolerant parser.

Common questions

When I try to attach to the server, I get «cannot connect to runtime process (timeout after 5000 ms)»?

You will see this timeout error if the server isn’t running when you try to attach the debugger. The client starts the language server so make sure you have started the client in order to have a running server. You may also need to disable your client breakpoints if they are interfering with starting the server.

🤩 52 BEST VSCODE EXTENSIONS TO IMPROVE YOUR PRODUCTIVITY IN 2021

An excellent text editor is essential for your development efficiency. As you climb the learning curve, you’ll realize the benefits to your time management. In this post, we’ll go over our picks for the best VSCode extensions developers should use in 2021. Make your life easier and more productive with these.

Why Visual Studio Code?

VSCode is probably the most popular code editor right now. I love it.

The reason it has become so popular, in my opinion, is simply because VSCode fulfills all developers’ needs, including features they didn’t even know they needed. That’s the secret charm of VSCode – it never fails to surprise you.

One of the best ways to reach someone’s heart is to help them realize what they need before they even know they need it. This is one of the most powerful drives in marketing, and VSCode has done a great job here.

The vast majority of VSCode lovers are JavaScript developers – VSCode was created for modern technologies. Today’s popular JavaScript frameworks are perfect for VSCode – it has everything you need.

With choosing an editor, don’t always go for the latest and greatest. Technology changes quickly and you don’t want to be left behind. You also don’t want to waste learning time by constantly switching. It would help if you had an editor that is flexible enough to adapt to your changing needs. On the way to becoming a good developer, time should always be on your side.

By this, I don’t mean that you should jump from one language to another or from one framework to another – that would be crazy. What I’m saying is that you should stay up to date, you should know the latest and compare it to what you’ve been using, see the difference, the pros and cons, and you should watch the support and the growth of the community because stability is also essential. It will surprise you how much your productivity can skyrocket!

VSCode has a vast open source community. Its growth and potential are almost limitless, and in the future, it will be easier to learn how to program and program yourself.

There’s no doubt that VSCode is one of the best code editors on the market, and unlike some other code editors you’ve probably tried, it’s designed for a modern tech stack and has a lot of quality features you never knew you needed.

But the best thing about Visual Studio Code is that it’s open-source and has a dedicated community of developers who work to improve it.

This also allows other IDEs like Eclipse Theia to build upon it. Eclipse Theia is the foundation for SAP Business Application Studio. SAP BAS is my second choice as an IDE to use SAP-specific extensions not available in Visual Studio Code or a browser-based IDE.

Following the same concept of openness, you can find thousands of extensions for VSCode on the Marketplace. From extensions that make learning to program more accessible to functional extensions that make development processes more efficient, there is something for every type of developer. Although not all extensions are available for SAP BAS yet, you can use the extensions mentioned here with SAP BAS.

This guide introduces you to the 52 VS Code extensions that every SAP Business Technology Platform fullstack developer should know about in 2021. These tools improve the developer experience and make your job easier.

Syntax Highlight Guide

Syntax highlighting determines the color and style of source code displayed in the Visual Studio Code editor. It is responsible for colorizing keywords like if or for in JavaScript differently than strings and comments and variable names.

There are two components to syntax highlighting:

Before diving into the details, a good start is to play with the scope inspector tool and explore what tokens are present in a source file and what theme rules they match to. To see both semantic and syntax token, use a built-in theme (for example, Dark+) on a TypeScript file.

Tokenization

The tokenization of text is about breaking the text into segments and to classify each segment with a token type.

VS Code’s tokenization engine is powered by TextMate grammars. TextMate grammars are a structured collection of regular expressions and are written as a plist (XML) or JSON files. VS Code extensions can contribute grammars through the grammars contribution point.

The TextMate tokenization engine runs in the same process as the renderer and tokens are updated as the user types. Tokens are used for syntax highlighting, but also to classify the source code into areas of comments, strings, regex.

Starting with release 1.43, VS Code also allows extensions to provide tokenization through a Semantic Token Provider. Semantic providers are typically implemented by language servers that have a deeper understanding of the source file and can resolve symbols in the context of the project. For example, a constant variable name can be rendered using constant highlighting throughout the project, not just at the place of its declaration.

Highlighting based on semantic tokens is considered an addition to the TextMate-based syntax highlighting. Semantic highlighting goes on top of the syntax highlighting. And as language servers can take a while to load and analyze a project, semantic token highlighting may appear after a short delay.

This article focuses on the TextMate-based tokenization. Semantic tokenization and theming are explained in the Semantic Highlighting guide.

TextMate grammars

VS Code uses TextMate grammars as the syntax tokenization engine. Invented for the TextMate editor, they have been adopted by many other editors and IDEs due to large number of language bundles created and maintained by the Open Source community.

TextMate grammars rely on Oniguruma regular expressions and are typically written as a plist or JSON. You can find a good introduction to TextMate grammars here, and you can take a look at existing TextMate grammars to learn more about how they work.

TextMate tokens and scopes

Themes map scopes to colors and styles to provide syntax highlighting. TextMate provides list of common scopes that many themes target. In order to have your grammar as broadly supported as possible, try to build on existing scopes rather than defining new ones.

Scopes nest so that each token is also associated with a list of parent scopes. The example below uses the scope inspector to show the scope hierarchy for the + operator in a simple JavaScript function. The most specific scope is listed at the top, with more general parent scopes listed below:

Parent scope information is also used for theming. When a theme targets a scope, all tokens with that parent scope will be colorized unless the theme also provides a more specific colorization for their individual scopes.

Contributing a basic grammar

VS Code supports json TextMate grammars. These are contributed through the grammars contribution point.

Each grammar contribution specifies: the identifier of the language the grammar applies to, the top-level scope name for the tokens of the grammar, and the relative path to a grammar file. The example below shows a grammar contribution for a fictional abc language:

The grammar file itself consists of a top-level rule. This is typically split into a patterns section that lists the top-level elements of the program and a repository that defines each of the elements. Other rules in the grammar can reference elements from the repository using < "include": "#id" >.

The grammar engine will try to successively apply the expression rule to all text in the document. For a simple program such as:

The example grammar produces the following scopes (listed left-to-right from most specific to least specific scope):

Embedded languages

If your grammar includes embedded languages within the parent language, such as CSS style blocks in HTML, you can use the embeddedLanguages contribution point to tell VS Code to treat the embedded language as distinct from the parent language. This ensures that bracket matching, commenting, and other basic language features work as expected in the embedded language.

The embeddedLanguages contribution point maps a scope in the embedded language to a top-level language scope. In the example below, any tokens in the meta.embedded.block.javascript scope will be treated as JavaScript content:

Developing a new grammar extension

To quickly create a new grammar extension, use VS Code’s Yeoman templates to run yo code and select the New Language option:

Yeoman will walk you through some basic questions to scaffold the new extension. The important questions for creating a new grammar are:

After answering all the questions, Yeoman will create a new extension with the structure:

Converting an existing TextMate grammar

Using YAML to write a grammar

As a grammar grows more complex, it can become difficult to understand and maintain it as json. If you find yourself writing complex regular expressions or needing to add comments to explain aspects of the grammar, consider using yaml to define your grammar instead.

Yaml grammars have the exact same structure as a json based grammar but allow you to use yaml’s more concise syntax, along with features such as multi-line strings and comments.

VS Code can only load json grammars, so yaml based grammars must be converted to json. The js-yaml package and command-line tool makes this easy.

Injection grammars

Injection grammars let you extend an existing grammar. An injection grammar is a regular TextMate grammar that is injected into a specific scope within an existing grammar. Example applications of injection grammars:

Creating a basic injection grammar

For this example, we’ll create a simple injection grammar that highlights TODO as a keyword in JavaScript comments. To apply our injection grammar in JavaScript files, we use the source.js target language scope in injectTo :

The L: in the injection selector means that the injection is added to the left of existing grammar rules. This basically means that our injected grammar’s rules will be applied before any existing grammar rules.

Embedded languages

Injection grammars can also contribute embedded languages to their parent grammar. Just like with a normal grammar, an injection grammar can use embeddedLanguages to map scopes from the embedded language to a top-level language scope.

An extension that highlights SQL queries in JavaScript strings, for example, may use embeddedLanguages to make sure all token inside the string marked meta.embedded.inline.sql are treated as SQL for basic language features such as bracket matching and snippet selection.

Token types and embedded languages

There is one additional complication for injection languages embedded languages: by default, VS Code treats all tokens within a string as string contents and all tokens with a comment as token content. Since features such as bracket matching and auto closing pairs are disabled inside of strings and comments, if the embedded language appears inside a string or comment, these features will also be disabled in the embedded language.

To override this behavior, you can use a meta.embedded.* scope to reset VS Code’s marking of tokens as string or comment content. It is a good idea to always wrap embedded language in a meta.embedded.* scope to make sure VS Code treats the embedded language properly.

If you can’t add a meta.embedded.* scope to your grammar, you can alternatively use tokenTypes in the grammar’s contribution point to map specific scopes to content mode. The tokenTypes section below ensures that any content in the my.sql.template.string scope is treated as source code:

Theming

Theming is about assigning colors and styles to tokens. Theming rules are specified in color themes, but users can customize the theming rules in the user settings.

TextMate theme rules are defined in tokenColors and have the same syntax as regular TextMate themes. Each rule defines a TextMate scope selector and a resulting color and style.

When evaluating the color and style of a token, the current token’s scope is matched against the rule’s selector to find the most specific rule for each style property (foreground, bold, italic, underline)

The Color Theme guide describes how to create a color theme. Theming for semantic tokens is explained in the Semantic Highlighting guide.

Scope inspector

VS Code’s built-in scope inspector tool helps debug grammars and semantic tokens. It displays the scopes for the token and the semantic tokens at the current position in a file, along with metadata about which theme rules apply to that token.

Trigger the scope inspector from the Command Palette with the Developer: Inspect Editor Tokens and Scopes command or create a keybinding for it:

The scope inspector displays the following information:

ExtendScript Debugger

Adobe

ExtendScript Debugger Extension for VS Code

A VS Code Extension that enables debugging ExtendScript scripts and extensions in Adobe’s ExtendScript-enabled applications.

Warning for Apple Silicon Users (e.g. M1): The extension does not run in native builds of VS Code but it does work with Intel/universal builds using Rosetta. Please see the Known Issues below for information on how to use the extension.

Supported features

¹ Changes to the Caught Exceptions setting while a script is running or stopped at a breakpoint will only apply to scopes created after the setting is changed.
² Requires active debug session.

Unsupported Features

Getting Started

Installation

The extension requires VS Code v1.62 or newer.

Migration from V1 Versions

The ExtendScript Debugger V2 is a complete rewrite of the V1 version. The internals received a complete overhaul that substantially increased stability, performance, flexibility, and improved compatibility with native VS Code features. As a result of this overhaul, the launch configuration properties have changed. The following is a table of properties that have been renamed:

The engineName and debugLevel properties remain unchanged. All other V1 properties have been removed and will be ignored. Please see the Advanced Configuration section for a full listing of configuration properties available in V2.

Additionally, the manner in which the extension operates has changed dramatically. It is highly recommended that you read the following section as it provides an overview of how to use this extension with three common use cases.

Using the Debugger

This extension was designed to support a wide variety of use cases. Three common use cases are outlined below to provide guidance on how certain features may be used.

Running a Script

Debugging a Script

The most direct way to debug a script in the extension is to start a debug session configured with a launch request type. Such a debug session will connect to the specified host engine, inform it that the debugger is active, and then trigger the script evaluation. Any breakpoints or uncaught exceptions will cause VS Code to show the debug state and enable interacting with the host application. Once the script evaluation is complete, the debug session will clean itself up and shut down.

Debugging Event Callbacks

Debugging ExtendScript triggered via a callback (e.g. with ScriptUI or CEP) requires that the debugger be connected when that script is run. A launch debug session is only active when the originating script is processed by the host application and will therefore miss debug messages from the host application in these circumstances.

To debug ExtendScript triggered by callbacks, start a debug session configured with an attach request type. Such a debug session will connect to the specified host engine, inform it that the debugger is active, and then wait for debug messages from the connected engine. Any breakpoints or uncaught exceptions encountered by the host engine while your attach debug session is active will cause VS Code to show the debug state and enable interacting with the host application. This debug session will remain active until explicitly disconnected or stopped.

Debugger Configuration

The ExtendScript Debugger is capable of debugging with and without a standard launch configuration.

Zero Configuration

When you select «ExtendScript», you will be asked to select a Debugging Mode. Once you have made your choice, simply select your target host application and, if applicable, the target engine and the debug session will start.

Launch Configuration

Setting up a launch configuration allows you to simplify and customize the process of starting a debug session. To start, please follow the standard steps to initialize a launch configuration.

With the configuration above, you can select the «Attach To ExtendScript Engine» option in VS Code’s Debug and Run view and initiate a debug session. Because no host application is specified, the extension will look up installed applications and show a list from which you may select a target. If your selected application is running and supports multiple engines, the extension will then ask which engine should be debugged. Once your selections are made, the debug session will begin.

See the «Advanced Configuration» section below for an explanation of available configuration options.

Attach and Launch Mode Support

The main difference between attach and launch requests is that the life of a launch mode debug session is tied directly to the length of time it takes the host engine to process the script. For short scripts, this may result in VS Code appearing to «flash» into and out of the «debugger active» state. This does not happen for attach configurations because the debug session connection is not tied to any specific script evaluation. For this reason, it is highly recommended that attach request debug sessions be used when debugging scripts that contain asynchronous callbacks (e.g. ScriptUI or CEP).

Recommended Configuration Names

VS Code currently uses a “play” button for both attach and launch mode debug configurations. This can lead to confusion as many users expect that pressing a “play” button will result in their script being run. When an attach mode configuration is selected, this will not happen. As such, we recommend that users name their attach mode configurations starting with “Attach to” and launch mode configurations starting with “Launch in” (or the like) to avoid this ambiguity.

Compound Launch Configurations

The ExtendScript Debugger extension supports Compound Launch Configurations. Scenarios where this may be of interest include:

Please keep in mind that the name fields in launch configurations are entirely customizable and are not used by the ExtendScript Debugger. The use of «[Attach]», «[Launch]», «[Compound]», «Attach to», and «Launch in» within the name fields is simply intended to assist with configuration disambiguation.

Advanced Configuration

The following configuration options are accepted by both attach and launch debug configurations:

The string «this» hides the this object. The string «prototype» hides all elements from the prototype chain, and the string «builtin» hides all elements that are part of the core ExtendScript language.

The absolute path to a file system alias (symbolic link) for the root directory loaded by a host application.

If scripts are loaded into the host application through a symbolic link, then debugger features are unlikely to work by default. This is due to a mismatch between the script paths used by VS Code (actual paths) and those used by the host application (symbolic link paths). The aliasPath property enables the ExtendScript Debugger extension to rewrite paths using the symbolic link path, thereby matching the host application’s view.

For this feature to work, the root directory loaded into VS Code must be the directory targeted by the symbolic link.

This workflow is most commonly used in CEP projects.

A secondary application specifier that matches what the host application registered as its specifier during installation as opposed to the one it actually uses for BridgeTalk communication.

NOTE: This is used only in very specific circumstances to assist in host application connections. At present, only InDesign Server connections make use of this.

The following configuration options are accepted by launch debug configurations only: