Как обернуть текст в тег vs code

Как в VS Code быстро обернуть контент в тег?

Установите расширение «htmltagwrap».
Выделите фрагмент текста или кода.
Нажмите Alt + W ( Option ⌥ + W for Mac).

Отслеживать
7,722 13 13 золотых знаков 25 25 серебряных знаков 54 54 бронзовых знака
ответ дан 16 авг 2021 в 15:48
11 4 4 бронзовых знака

• visual-studio-code
• теги
• emmet

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

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

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.21.1314

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Emmet in Visual Studio Code

Support for Emmet snippets and expansion is built right into Visual Studio Code, no extension required. Emmet 2.0 has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets.

How to expand Emmet abbreviations and snippets

Emmet abbreviation and snippet expansions are enabled by default in html , haml , pug , slim , jsx , xml , xsl , css , scss , sass , less and stylus files, as well as any language that inherits from any of the above like handlebars and php .

When you start typing an Emmet abbreviation, you will see the abbreviation displayed in the suggestion list. If you have the suggestion documentation fly-out open, you will see a preview of the expansion as you type. If you are in a stylesheet file, the expanded abbreviation shows up in the suggestion list sorted among the other CSS suggestions.

Using Tab for Emmet expansions

If you want to use the Tab key for expanding the Emmet abbreviations, add the following setting:

"emmet.triggerExpansionOnTab": true 

This setting allows using the Tab key for indentation when text is not an Emmet abbreviation.

Emmet when quickSuggestions are disabled

If you have disabled the editor.quickSuggestions setting, you won’t see suggestions as you type. You can still trigger suggestions manually by pressing ⌃Space (Windows, Linux Ctrl+Space ) and see the preview.

Disable Emmet in suggestions

If you don’t want to see Emmet abbreviations in suggestions at all, then use the following setting:

"emmet.showExpandedAbbreviation": "never" 

You can still use the command Emmet: Expand Abbreviation to expand your abbreviations. You can also bind any keyboard shortcut to the command id editor.emmet.action.expandAbbreviation as well.

Emmet suggestion ordering

To ensure Emmet suggestions are always on top in the suggestion list, add the following settings:

"emmet.showSuggestionsAsSnippets": true, "editor.snippetSuggestions": "top" 

Emmet abbreviations in other file types

To enable the Emmet abbreviation expansion in file types where it is not available by default, use the emmet.includeLanguages setting. Make sure to use language identifiers for both sides of the mapping, with the right side being the language identifier of an Emmet supported language (see the list above).

"emmet.includeLanguages":  "javascript": "javascriptreact", "razor": "html", "plaintext": "pug" > 

Emmet has no knowledge of these new languages, and so there might be Emmet suggestions showing up in non HTML/CSS contexts. To avoid this, you can use the following setting.

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly" 

Note: If you used emmet.syntaxProfiles previously to map new file types, from VS Code 1.15 onwards you should use the setting emmet.includeLanguages instead. emmet.syntaxProfiles is meant for customizing the final output only.

Emmet with multi-cursors

You can use most of the Emmet actions with multi-cursors as well:

Using filters

Filters are special post-processors that modify the expanded abbreviation before it is output to the editor. There are 2 ways to use filters; either globally through the emmet.syntaxProfiles setting or directly in the current abbreviation.

Below is an example of the first approach using the emmet.syntaxProfiles setting to apply the bem filter for all the abbreviations in HTML files:

"emmet.syntaxProfiles":  "html":  "filters": "bem"  > > 

To provide a filter for just the current abbreviation, append the filter to your abbreviation. For example, div#page|c will apply the comment filter to the div#page abbreviation.

BEM filter (bem)

If you use the Block Element Modifier (BEM) way of writing HTML, then bem filters are very handy for you to use. To learn more about how to use bem filters, read BEM filter in Emmet.

You can customize this filter by using the bem.elementSeparator and bem.modifierSeparator preferences as documented in Emmet Preferences.

Comment filter (c)

This filter adds comments around important tags. By default, «important tags» are those tags with id and/or class attribute.

For example div>div#page>p.title+p|c will be expanded to:

   id="page">  class="title">
     

You can customize this filter by using the filter.commentTrigger , filter.commentAfter and filter.commentBefore preferences as documented in Emmet Preferences.

The format for the filter.commentAfter preference is different in VS Code Emmet 2.0.

For example, instead of:

"emmet.preferences":  "filter.commentAfter": "\n -->" > 

in VS Code, you would use a simpler:

"emmet.preferences":  "filter.commentAfter": "\n" > 

Trim filter (t)

This filter is applicable only when providing abbreviations for the Emmet: Wrap with Abbreviation command. It removes line markers from wrapped lines.

Using custom Emmet snippets

Custom Emmet snippets need to be defined in a json file named snippets.json . The emmet.extensionsPath setting should have the path to the directory containing this file.

Below is an example for the contents of this snippets.json file.

Authoring of Custom Snippets in Emmet 2.0 via the snippets.json file differs from the old way of doing the same in a few ways:

Topic	Old Emmet	Emmet 2.0
Snippets vs Abbreviations	Supports both in 2 separate properties called snippets and abbreviations	The 2 have been combined into a single property called snippets. See default HTML snippets and CSS snippets
CSS snippet names	Can contain :	Do not use : when defining snippet names. It is used to separate property name and value when Emmet tries to fuzzy match the given abbreviation to one of the snippets.
CSS snippet values	Can end with ;	Do not add ; at end of snippet value. Emmet will add the trailing ; based on the file type (css/less/scss vs sass/stylus) or the emmet preference set for css.propertyEnd , sass.propertyEnd , stylus.propertyEnd
Cursor location	$ or `	` can be used

HTML Emmet snippets

HTML custom snippets are applicable to all other markup flavors like haml or pug . When snippet value is an abbreviation and not actual HTML, the appropriate transformations can be applied to get the right output as per the language type.

For example, for an unordered list with a list item, if your snippet value is ul>li , you can use the same snippet in html , haml , pug or slim , but if your snippet value is , then it will work only in html files.

If you want a snippet for plain text, then surround the text with <> .

CSS Emmet snippets

Values for CSS Emmet snippets should be a complete property name and value pair.

CSS custom snippets are applicable to all other stylesheet flavors like scss , less or sass . Therefore, don’t include a trailing ; at the end of the snippet value. Emmet will add it as needed based on whether the language requires it.

Do not use : in the snippet name. : is used to separate property name and value when Emmet tries to fuzzy match the abbreviation to one of the snippets.

Tab stops and cursors in custom snippets

The syntax for tab stops in custom Emmet snippets follows the Textmate snippets syntax.

• Use $ , $ for tab stops and $ for tab stops with placeholders.
• Previously, | or $ was used to denote the cursor location in the custom Emmet snippet. This is no longer supported. Use $ instead.

Emmet configuration

Below are Emmet settings that you can use to customize your Emmet experience in VS Code.

emmet.includeLanguages Use this setting to add mapping between the language of your choice and one of the Emmet supported languages to enable Emmet in the former using the syntax of the latter. Make sure to use language IDs for both sides of the mapping. For example:

"emmet.includeLanguages":  "javascript": "javascriptreact", "plaintext": "pug" > 

"emmet.syntaxProfiles":  "html":  "attr_quotes": "single"  >, "jsx":  "self_closing_tag": true  > > 

"emmet.variables":  "lang": "de", "charset": "UTF-16" > 

• css.propertyEnd
• css.valueSeparator
• sass.propertyEnd
• sass.valueSeparator
• stylus.propertyEnd
• stylus.valueSeparator
• css.unitAliases
• css.intUnit
• css.floatUnit
• bem.elementSeparator
• bem.modifierSeparator
• filter.commentBefore
• filter.commentTrigger
• filter.commentAfter
• format.noIndentTags
• format.forceIndentationForTags
• profile.allowCompactBoolean
• css.fuzzySearchMinScore

The format for the filter.commentAfter preference is different and simpler in Emmet 2.0.

For example, instead of the older format

"emmet.preferences":  "filter.commentAfter": "\n -->" > 

"emmet.preferences":  "filter.commentAfter": "\n" > 

If you want support for any of the other preferences as documented in Emmet Preferences, please log a feature request.

Next steps

Emmet is just one of the great web developer features in VS Code. Read on to find out about:

• HTML — VS Code supports HTML with IntelliSense, closing tags, and formatting.
• CSS — We offer rich support for CSS, SCSS and Less.

Troubleshooting

Custom tags do not get expanded in the suggestion list

Custom tags when used in an expression like MyTag>YourTag or MyTag.someclass do show up in the suggestion list. But when these are used on their own like MyTag , they do not appear in the suggestion list. This is designed so to avoid noise in the suggestion list as every word is a potential custom tag.

Add the following setting to enable expanding of Emmet abbreviations using tab which will expand custom tags in all cases.

"emmet.triggerExpansionOnTab": true 

My HTML snippets ending with + do not work

HTML snippets ending with + like select+ and ul+ from the Emmet cheatsheet are not supported. This is a known issue in Emmet 2.0 Issue: emmetio/html-matcher#1. A workaround is to create your own custom Emmet snippets for such scenarios.

Abbreviations are failing to expand

First, check if you’re using custom snippets (if there is a snippets.json file being picked up by the emmet.extensionsPath setting). The format of custom snippets changed in VS Code release 1.53. Instead of using | to indicate where the cursor position is, use tokens such as $ , $ , etc. instead. The default CSS snippets file from the emmetio/emmet repository shows examples of the new cursor position format.

If abbreviations are still failing to expand:

• Check the builtin extensions to see if Emmet has been disabled.
• Try restarting the extension host by running the Developer: Restart Extension Host ( workbench.action.restartExtensionHost ) command in the Command Palette.

Where can I set all the preferences as documented in Emmet preferences?

You can set the preferences using the setting emmet.preferences . Only a subset of the preferences that are documented in Emmet preferences can be customized. Please read the preferences section under Emmet configuration.

Any tips and tricks?

• In CSS abbreviations, when you use : , the left part is used to fuzzy match with the CSS property name and the right part is used to match with CSS property value. Take full advantage of this by using abbreviations like pos:f , trf:rx , fw:b , etc.
• Explore all other Emmet features as documented in Emmet Actions.
• Don’t hesitate to create your own custom Emmet snippets.

VS Code: вам не нужно это расширение, часть 2

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

«Лекарство от болезней часто в нас самих», — Вильям Шекспир

1. Обернуть выбранный HTML-код в тег

Иногда требуется обернуть блок HTML другим элементом при рефакторинге HTML-документа. Делать это вручную неудобно.

Например, в приведенном ниже коде, чтобы заключить 3 элемента div в основной элемент, придётся перейти к строке 10 и ввести открывающий тег main. Если у нас включена опция автоматического добавления закрывающих тегов, возможно, нам придется удалить этот закрывающий тег. Затем нам нужно перейти к строке 26 и ввести закрывающий тег main .

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

Расширения

• htmltagwrap (277K установок): «Переносит выбранный код в HTML-теги»
• html tag wrapper (165K установок): «Оборачивает выбранный тег html при нажатии ctrl + i , также позволяет легко изменить имя внешнего тега».

Настройка VS Code

Emmet также может сделать это за вас. Выберите нужный код и запустите команду Emmet: wrap with abbreviation . Вам будет предложено ввести сокращение (можно просто ввести название нужного тега). Набираем main и нажимаем Enter.

Если вы хотите обернуть более чем одним тегом и включить класс, вы можете указать сокращение Emmet, например main>div.container , которое даст вам такой HTML-код:

 
 
Lorem.
 
Animi.
 
Velit.
 
 

2. Расцвечивание пар скобок

Стилизация пар совпадающих скобок может помочь определить область видимости в вашем коде. В частности, очень популярно раскрашивание скобок в зависимости от уровня их вложенности.

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

Расширения

• Bracker Pair Colorizer (6,2 млн установок): «Настраиваемое расширение для раскрашивания соответствующих скобок». Тот же автор написал Bracket Pair Colorizer 2 в качестве замены с кардинальными изменениями и большим упором на производительность.
• Bracket Pair Colorizer 2 (3,2 млн установок): «Настраиваемое расширение для раскрашивания пар скобок». Сейчас не поддерживается.
• Rainbow Brackets (1 млн установок): «Раскрашивает в цвета радуги круглые, квадратные и фигурные скобки».
• Highlight Matching Tag (945K установок): «Подсвечивает совпадающие закрывающие и открывающие теги».
• Subtle Match Brackets (88K установок): «Подчеркивание соответствующих скобок и многое другое».

Настройка VS Code

VS Code представил собственную раскраску пар скобок в версии 1.6.0 (август 2021 г.). Это намного быстрее, чем любое из перечисленных расширений. Подробности можно почитать в посте «Bracket pair colorization 10,000x faster».

Раскрашивание пар скобок можно включить, установив для editor.bracketPairColorization.enabled значение true .

Цвета скобок могут быть заданы в теме, либо их можно установить с помощью параметра workbench.colorCustomizations .

Чтобы настроить цвета для установленной темы с помощью параметра workbench.colorCustomizations , требуется указать название темы в квадратных скобках, а затем задать значения свойств, как показано ниже.

Свойство editorBracketHighlight.foreground1 относится к первому набору скобок, editorBracketHighlight.foreground2 — ко второму набору скобок и так далее. Кроме того, есть свойство editorBracketHighlight.unexpectedBracket.foreground для любых лишних скобок.

Настройки для раскраски пары скобок

«editor.bracketPairColorization.enabled»: true, «workbench.colorCustomizations»:

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

3. Раскрашивание направляющих отступов

Направляющие отступов – это вертикальные линии, обозначающие блоки вашего кода. Они помогают увидеть структуру кода. VS Code называет их «направляющими пар скобок» (bracket pair guides).

Расширения

• Indent Rainbow 2,4 млн установок): «Это расширение окрашивает отступ перед текстом, чередуя четыре разных цвета с каждым шагом. Цвет отступа зависит от размера табуляции».

Настройка VS Code

Начиная с версии 1.61 (сентябрь 2021 г.) редактор поддерживает цвета направляющих отступов. VS Code называет их «направляющими пар скобок». По умолчанию они используют те же цвета, что и функция раскраски пары скобок, о которой говорилось выше.

Направляющие пар скобок можно включить, установив для editor.guides.bracketPairs значение true (по умолчанию там false ). Есть третья опция — active. Если она включена, отображаться будет направляющая отступа только для активного блока. Этот параметр следует использовать вместо устаревшего editor.renderIndentGuides .

Как видно из примера ниже, цвета отступов по умолчанию приглушены и выглядят ненасыщенными.

Вы можете включить выделение направляющей отступа для текущей области, установив для editor.guides.highlightActiveIndentation значение true. Его следует использовать вместо устаревшего параметра editor.highlightActiveIndentGuide .

Как видно из приведенного ниже примера, активная направляющая отступа отображается более насыщенным цветом.

Существует также параметр editor.guides.bracketPairsHorizontal , который определяет, нужно ли (и, если нужно, то когда) отображать горизонтальные линии, если строка кода пересекает другой уровень отступа. По умолчанию стоит active .

Как и в случае со скобками, цвета могут быть объявлены в теме или установлены с помощью параметра workbench.colorCustomizations . Можно изменить цвет линий на каждом уровне отступа с помощью свойств editorBracketPairGuide.background и editorBracketPairGuide.activeBackground .

Настройки направляющих отступов

«editor.guides.bracketPairs» : true, «editor.guides.highlightActiveIndentation» : true, «editor.guides.bracketPairsHorizontal» : «active», «workbench.colorCustomizations»:

4. Запуск и автоматизация скриптов (NPM, Gulp, Make и др.)

Большинство проектов требует выполнения таких задач, как линтинг, тестирование, сборка, упаковка и развертывание. В зависимости от типа проекта вы можете использовать разные инструменты для этого, такие как NPM, Grunt, Gulp, Make и т. д. Хотя это часто делается из командной строки, бывает удобно запустить некоторые из этих действий в редакторе без переключения контекста.

Расширения

• NPM (2,7 млн ​​установок): «Это расширение поддерживает выполнение скриптов npm, определенных в файле package.json, и проверку установленных модулей на предмет зависимостей, определенных в package.json».
• Gulp Tasks (39K установок): «Расширение для визуализации и выполнения задач gulp для Visual Studio Code».
• Make (31К установок): «Запускаем Make легко».

Настройка VS Code

В VS Code существуют задачи (Tasks). Задачи могут быть настроены для запуска скриптов в VS Code с помощью палитры команд (command palette). Можно настроить способ их запуска, добавить к ним привязку клавиш, выполнять несколько скриптов в последовательности или запускать их автоматически при открытии рабочего пространства.

VS Code может автоматически находить скрипты для Gulp, Grunt, Jake и npm. Вы также можете запускать shell-скрипты, однако они не обнаруживаются автоматически.

Я вкратце покажу вам, как можно запускать скрипты NPM в виде задач. VS Code берет их из вашего package.json.

Задача сборки по умолчанию

Нажатие Ctrl + Shift + B или запуск команды «Run Build Task» покажет вам все автоматически обнаруженные задачи, из которых можно выбрать нужную. Что касается NPM, он сужает для вас этот список:

Обычно первый вариант — правильный.

Выполнение задачи

Вы можете запустить задачу с помощью команды Tasks: Run Tas k. Выведется список автоматически обнаруженных задач из вашей рабочей области и пользовательских задач, созданных вами.

Если вы хотите запустить задачу для определенного инструмента, можно использовать быстрое открытие файла, нажав Ctrl + P или через меню File>Go to File , наберите «task» и нажмите пробел, а затем раскрывающийся список покажет вам варианты для различных инструментов.

Для своего проекта на JavaScript я выбираю npm и получаю список своих скриптов npm.

Выберите скрипт, и он запустится.

Автоматизировать задачи

Вы можете определить пользовательские задачи для своего проекта в /.vscode/tasks.json . Можно создать файл самостоятельно или запустить команду Tasks: Configure Task , чтобы создать файл шаблона, выбрав параметр Create task.json file from template .

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

< "version": "2.0.0", "tasks": [ < "label": "Run dev server on startup", "type": "shell", "command": "npm run dev", "windows": < "command": "npm run dev" >, "presentation": < "reveal": "always", "panel": "new" >, "runOptions": < "runOn": "folderOpen" >> ] >

Добавление сочетания клавиш для задачи

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

Например, чтобы связать Ctrl + R с задачей запуска сервера разработки, нужно добавить следующее в файл keybindings.json:

Свойство args должно соответствовать значению label из tasks.json.

Вы можете прочитать руководство по задачам , чтобы узнать о них побольше.

5. Форматирование кода

Правильное форматирование упрощает чтение кода и экономит вычислительные ресурсы вашего мозга.

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

Расширения

• Prettier (15 млн установок): Prettier — форматтер с очень небольшим количеством параметров конфигурации. По умолчанию он поддерживает несколько языков: JavaScript, JSX, Angular, Vue, Flow, TypeScript, CSS, Less, SCSS, HTML, JSON, GraphQL, Markdown и YAML. Он имеет архитектуру плагинов, расширяющую его до большего количества языков.
• Beautify (7,3 млн установок): Beautify использует js-beautify. Он поддерживает Javascript, JSON, CSS, Sass и HTML. Вы можете использовать файл .jsbeautifyrc для управления настройками стиля.
• HTML Format (300К установок).
• JSON Formatter (30K установок).
• И многие, многие другие расширения, перечисленные в разделе форматтеров.

Настройка VS Code

VS Code имеет встроенные средства форматирования для HTML, JavaScript, TypeScript и JSON. Это достойная основа для фронтенд- и бэкэнд-разработчиков, ориентированных на JavaScript.

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

Хотя есть соблазн, в частности, у меня как у фронтенд-разработчика, просто установить Prettier, потому что он поддерживает несколько языков, здесь необходим какой-то компромисс. Я расскажу об этом в разделе «Другие языки» ниже.

Настройки для языков со встроенными форматтерами

Чтобы использовать встроенные средства форматирования, вы можете добавить следующие настройки:

«[html]»: < "editor.defaultFormatter": "vscode.html-language-features" >, «[javascript, javascriptreact, typescript]»: < "editor.defaultFormatter": "vscode.typescript-language-features" >, «[json, jsonc]»:

Я пробовал их какое-то время и был приятно удивлен. VS Code использует js-beautify под капотом, который также используется расширением Beautify. Таким образом, от этого расширения вы можете ожидать аналогичных результатов. Ваш опыт может отличаться в зависимости от форматирования JSONC. Я не использую React, поэтому не могу комментировать, насколько хорошо форматируется код для него.

Включить файл .jsbeautifyrc в проект для управления форматированием нельзя. Однако доступны эквивалентные настройки форматирования. Можно найти настройки форматирования для каждого языка с соглашением об именах .format. . Вот несколько примеров:

"html.format.wrapAttributesIndentSize": 2, "html.format.templating": true, "javascript.format.insertSpaceAfterCommaDelimiter": true, "javascript.format.semicolons": "insert",

Есть более подробная информация о настройках форматирования HTML в документации.

Другие языки

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

Для других языков у вас есть несколько разных вариантов:

1. Многие расширения для языковой поддержки также являются форматерами, например Python, поддержка языка Java от Red Hat, Ruby, YAML, XML Tools, Vetur для Vue, и Svelte для VS Code (под капотом использует Prettier). Вы можете применить один из них в качестве средства форматирования.
2. Вы можете установить расширение Prettier или Beautify для работы с несколькими дополнительными языками, такими как CSS. Это легко сделать. Однако эти расширения загружаются всегда, независимо от языков, используемых в проекте, поскольку они используют событие onStartupFinished в своей конфигурации. Это расточительное использование системных ресурсов, особенно если вы работаете над бэкенд-проектами, языки которых не форматируются этими расширениями. Конечно, вы можете отключить расширение для рабочего пространства, чтобы оно не загружалось. Если у вас приличный компьютер, возможно, это не будет вас не беспокоить.
3. Если вы хотите использовать расширение Prettier для языка, который не поддерживается по умолчанию, например, Java, вам необходимо установить плагин Prettier (пакет node) в качестве зависимости для этого проекта. Неудобно, когда в бэкэнд-проекте находятся пакеты node, если сам проект не на JavaScript. Если вы делитесь проектом с другими, наличие двух или более наборов зависимостей будет очень мешать.
4. Вы можете установить средство форматирования, предназначенное для определенного языка. Можно поискать определенный язык в категории «Formatter». Но они не так уж распространены.

Если вы – фронтенд-разработчик, для вас большим упущением в списке встроенных средств форматирования будет обработка CSS и синтаксисов, подобных CSS. Возможны следующие варианты:

• Вы можете использовать расширение stylelint как для линтинга, так и для форматирования. Stylelint охватывает все синтаксисы, подобные CSS. Вы можете указать глобальную конфигурацию stylelint в настройках VS Code.
• Если вы используете SASS (файлы .sass), вы, вероятно, установили поддержку языка расширение SASS. Это тоже форматтер.
• Если вы используете фронтенд-фреймворки, вы, вероятно, установили расширение для поддержки языка, которое также выполняет функцию форматтера, например, Vetur для Vue и Svelte for VS Code для Svelte.
• Кажется, нет стоящего специализированного средства форматирования CSS. Есть JS-CSS-HTML Formatter, но он имеет ряд серьезных проблем.
• Если вышеперечисленное вас не устраивает, возможно, установка Beautify или Prettier – лучший вариант.

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

Заключение

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

HTML in Visual Studio Code

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

// Configures if the built-in HTML language suggests HTML5 tags, properties and values. "html.suggest.html5": true 

"html.autoClosingTags": false 

"editor.linkedEditing": true 

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

"[html]":  "editor.foldingStrategy": "indentation" >,