Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages and runtimes (such as C++, C#, Java, Python, PHP, Go, .NET). Begin your journey with VS Code with these introductory videos.
Visual Studio Code in Action
Intelligent Code Completion
Streamlined Debugging
Fast, Powerful Editing
Code Navigation and Refactoring
In-Product Source Control
Top Extensions
Enable additional languages, themes, debuggers, commands, and more. VS Code’s growing community shares their secret sauce to improve your workflow.
First Steps
To get the most out of Visual Studio Code, start by reviewing a few introductory topics:
Intro Videos — Begin your journey with VS Code through these introductory videos.
Setup — Install VS Code for your platform and configure the tool set for your development needs.
User Interface — Introduction to the basic UI, commands, and features of the VS Code editor.
Settings — Customize VS Code for how you like to work.
Languages — Learn about VS Code’s support for your favorite programming languages.
Node.js — This tutorial gets you quickly running and debugging a Node.js web app.
Tips and Tricks — Jump right in with Tips and Tricks to become a VS Code power user.
Azure — VS Code is great for deploying your web applications to the cloud.
Extension API — Learn how to write a VS Code extension.
Why VS Code? — Read about the design philosophy and architecture of VS Code.
Keyboard Shortcuts
Increase your productivity with VS Code’s keyboard shortcuts.
Keyboard Shortcut Reference Sheet — Learn the commonly used keyboard shortcuts.
Keymap Extensions — Change VS Code’s keyboard shortcuts to match another editor.
Customize Keyboard Shortcuts — Modify the default keyboard shortcuts.
Downloads
Download VS Code — Quickly find the appropriate install for your platform (Windows, macOS and Linux)
Privacy
By default, VS Code auto-updates to new versions, and collects usage data and crash report information. You may opt out of these defaults by disabling them as instructed below:
Visual Studio Code provides basic support for HTML programming out of the box. There is syntax highlighting, smart completions with IntelliSense, and customizable formatting. VS Code also includes great Emmet support.
IntelliSense
As you type in HTML, we offer suggestions via HTML IntelliSense. In the image below, you can see a suggested HTML element closure
as well as a context specific list of suggested elements.
Document symbols are also available for HTML, allowing you to quickly navigate to DOM nodes by id and class name.
You can also work with embedded CSS and JavaScript. However, note that script and style includes from other files are not followed, the language support only looks at the content of the HTML file.
You can trigger suggestions at any time by pressing ⌃Space (Windows, Linux Ctrl+Space ) .
You can also control which built-in code completion providers are active. Override these in your user or workspace settings if you prefer not to see the corresponding suggestions.
// Configures if the built-in HTML language suggests HTML5 tags, properties and values."html.suggest.html5":true
Close tags
Tag elements are automatically closed when > of the opening tag is typed.
The matching closing tag is inserted when / of the closing tag is entered.
You can turn off autoclosing tags with the following setting:
"html.autoClosingTags":false
Auto update tags
When modifying a tag, the linked editing feature automatically updates the matching closing tag. The feature is optional and can be enabled by setting:
Color picker
The VS Code color picker UI is now available in HTML style sections.
It supports configuration of hue, saturation and opacity for the color that is picked up from the editor. It also provides the ability to trigger between different color modes by clicking on the color string at the top of the picker. The picker appears on a hover when you are over a color definition.
Hover
Move the mouse over HTML tags or embedded styles and JavaScript to get more information on the symbol under the cursor.
Validation
The HTML language support performs validation on all embedded JavaScript and CSS.
You can turn that validation off with the following settings:
// Configures if the built-in HTML language support validates embedded scripts."html.validate.scripts":true,// Configures if the built-in HTML language support validates embedded styles."html.validate.styles":true
Folding
You can fold regions of source code using the folding icons on the gutter between line numbers and line start. Folding regions are available for all HTML elements for multiline comments in the source code.
Additionally you can use the following region markers to define a folding region: and
If you prefer to switch to indentation based folding for HTML use:
To improve the formatting of your HTML source code, you can use the Format Document command ⇧⌥F (Windows Shift+Alt+F , Linux Ctrl+Shift+I ) to format the entire file or Format Selection ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F ) to just format the selected text.
The HTML formatter is based on js-beautify. The formatting options offered by that library are surfaced in the VS Code settings:
html.format.wrapLineLength : Maximum amount of characters per line.
html.format.unformatted : List of tags that shouldn’t be reformatted.
html.format.contentUnformatted : List of tags, comma separated, where the content shouldn’t be reformatted.
html.format.extraLiners : List of tags that should have an extra newline before them.
html.format.preserveNewLines : Whether existing line breaks before elements should be preserved.
html.format.maxPreserveNewLines : Maximum number of line breaks to be preserved in one chunk.
html.format.indentInnerHtml : Indent and sections.
html.format.wrapAttributes : Wrapping strategy for attributes:
auto : Wrap when the line length is exceeded
force : Wrap all attributes, except first
force-aligned : Wrap all attributes, except first, and align attributes
force-expand-multiline : Wrap all attributes
aligned-multiple : Wrap when line length is exceeded, align attributes vertically
preserve : Preserve wrapping of attributes
preserve-aligned : Preserve wrapping of attributes but align
Tip: The formatter doesn’t format the tags listed in the html.format.unformatted and html.format.contentUnformatted settings. Embedded JavaScript is formatted unless ‘script’ tags are excluded.
The Marketplace has several alternative formatters to choose from. If you want to use a different formatter, define «html.format.enable»: false in your settings to turn off the built-in formatter.
Emmet snippets
VS Code supports Emmet snippet expansion. Emmet abbreviations are listed along with other suggestions and snippets in the editor auto-completion list.
Tip: See the HTML section of the Emmet cheat sheet for valid abbreviations.
If you’d like to use HTML Emmet abbreviations with other languages, you can associate one of the Emmet modes (such as css , html ) with other languages with the emmet.includeLanguages setting. The setting takes a language identifier and associates it with the language ID of an Emmet supported mode.
For example, to use Emmet HTML abbreviations inside JavaScript:
"emmet.includeLanguages": "javascript":"html">>
HTML custom data
You can extend VS Code’s HTML support through a declarative custom data format. By setting html.customData to a list of JSON files following the custom data format, you can enhance VS Code’s understanding of new HTML tags, attributes and attribute values. VS Code will then offer language support such as completion & hover information for the provided tags, attributes and attribute values.
You can read more about using custom data in the vscode-custom-data repository.
HTML extensions
Install an extension to add more functionality. Go to the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) and type ‘html’ to see a list of relevant extensions to help with creating and editing HTML.
Tip: Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.
Next steps
Read on to find out about:
CSS, SCSS, and Less — VS Code has first class support for CSS including Less and SCSS.
Emmet — Learn about VS Code’s powerful built-in Emmet support.
Emmet official documentation — Emmet, the essential toolkit for web-developers.
Common questions
Does VS Code have HTML preview?
No, VS Code doesn’t have built-in support for HTML preview but there are extensions available in the VS Code Marketplace. Open the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) and search on ‘live preview’ or ‘html preview’ to see a list of available HTML preview extensions.
Легко меняйте языки и типы проектов в лучшем в мире редакторе HTML5, CSS3 и JavaScript. Предоставьте разработчикам интерфейсов мощные возможности LESS и SASS.
Контейнеры ПО
Создавайте, отлаживайте, тестируйте и развертывайте контейнеры ПО
Вы можете уверенно создавать и развертывать свои приложения, используя средства разработки контейнеров Visual Studio. Создавайте образы Docker со всеми зависимостями своих приложений, чтобы упростить их запуск в разнообразных службах Azure или других средах размещения контейнеров.
Множество платформ
Среды ASP.NET Core и .NET Core работают в Windows, Mac и Linux
Пишите веб-приложения и службы, используя ASP.NET Core и Visual Studio. Развертывайте их на любом веб-сервере или перейдите на новый уровень — в облако Microsoft Azure. Если хотите, пишите код в удобном вам редакторе и ОС с помощью omnisharp.net.
Веб-платформы
Angular, jQuery, Bootstrap, Django, Backbone.js и Express
Увеличьте производительность с помощью мощных веб-платформ. Visual Studio включает в себя IntelliSense для клиентского кода JavaScript, а также запускает расширенную поддержку таких наиболее популярных современных веб-платформ, как Angular и Bootstrap.
Открытый код
ASP.NET и .NET Core представляют собой лицензированный Apache и MIT код в GitHub
Нашли ошибку или возникла идея? Откройте проблему или отправьте запрос на включение внесенных изменений. Все компоненты среды выполнения CLR ASP.NET и .NET Core, а также пакеты SDK для Azure для любого языка доступны на GitHub, и в их разработке можно принять участие.
Диспетчеры пакетов
LibMan, NuGet, npm
Присоединяйтесь к Open Web и получайте библиотеки отовсюду. NuGet включает многофункциональные серверные библиотеки .NET, диспетчер библиотек (LibMan), упрощенный клиентский инструмент для получения библиотек, позволяет получать лишь нужные файлы из популярных платформ и пакетов библиотек, а npm предоставляет прекрасные инструменты и служебные программы.
Расширяемая экосистема
Расширьте возможности Visual Studio, изучите наше сообщество и сделайте его своим!
Настройте Visual Studio с помощью тысяч расширений, предлагаемых в постоянно растущей экосистеме, или даже создайте собственные расширения.
Масштаб облака
Развертывание на любом узле, масштабирование до облака
Visual Studio содержит интегрированные инструменты для развертывания веб-приложения на любом узле или для его масштабирования в облаке Microsoft Azure. Публикуйте веб-сайты и виртуальные машины и управляйте ими из Visual Studio.
Лучший редактор кода
Универсальный инструмент с интегрированной средой разработки мирового уровня
Пишите, редактируйте, изучайте, отлаживайте, тестируйте и проверяйте код в Visual Studio. Управляйте исходным кодом, отслеживайте ошибки и рабочие элементы в Azure DevOps или Team Foundation Server (TFS). Работайте с репозиторием Git на свой выбор, включая те, что доступны в GitHub. Получите беспрецедентное представление о коде с помощью CodeLens, получив все, что вам нужно знать, в одной строке.
Лучший отладчик
Универсальный инструмент с интегрированной средой разработки мирового уровня
Определите проблемы в коде на C#, JavaScript, Node.js, Python или любом другом языке, поддерживаемом Visual Studio, с помощью отладчика мирового уровня. Диагностика ошибок локально или удаленно в любом браузере или в облаке. Воспользуйтесь преимуществами улучшенной конфигурации точек останова для детального контроля выполнения и гибкой проверки состояния через многочисленные представления в Visual Studio.
