Vs codium как обернуть в тег

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

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

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

visual-studio-code
теги
emmet

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

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

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

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

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

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.

Создать структуру документа

Это сочетание клавиш за секунду создаёт базовую структуру кода или вложенные теги.

     Document

Быстро добавить комментарий

Чтобы добавить комментарий, нужно перейти в начало строки и дописать туда два слеша. Это медленно. Быстрее нажать в любом месте строки Ctrl + / , и строка закомментируется, если она ещё не. А если уже да, то комментарий исчезнет.

Перейти к строке под номером

Windows — Ctrl + G

macOS — Control + G

Иногда отладчики внезапно сообщают, что на строке 953 случилась непоправимая инфернальная ошибка вселенной. Чтобы не выискивать вручную, не листать и не тратить на это время, нажмите Ctrl + G , введите номер строки и спокойно спасайте вселенную.

Поменять строку местами с соседними

Случается такое, что ваш алгоритм — не алгоритм. Всё пошло не так, а вместо числа 42 вывелось сообщение «Данные удалены». Кому-то для этого нужно переписать весь код, но иногда бывает достаточно поменять строки местами и всё заработает.

Alt и стрелки меняют текущую строку местами с соседними.

Дублировать строку

Windows Shift + Alt + ↓ / ↑

macOS Shift + Option + ↓ / ↑

Это для тех, кто не хочет копировать и вставлять несколько раз одно и то же.

Перейти к парной скобке

Windows Ctrl + Shift + \

macOS Shift + Command + \

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

Переименовать переменную

Писали, писали, а старший разработчик пришёл и сказал, что ваши переменные a , b и c — дурной тон. Чтобы не выискивать их по всему документу и не менять руками, есть F2 .

Отформатировать документ

Windows — Shift + Alt + F

macOS Shift + Option + F

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

Перейти к переменной

Иногда вообще непонятно, откуда взялась переменная, какая у неё область видимости и где она объявлена. F12 перенесёт вас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.

Включить или выключить перенос слов

Windows — Alt + Z

macOS Option + Z

Если строки кода или текст не вмещаются в редактор по ширине, включите перенос.

Включить дзен-режим

Windows — Ctrl + KZ

macOS — Command + KZ

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

�� Больше статей о фронтенде и работе в айти в телеграм-канале.

Материалы по теме

10 лучших тем для VS Code
34 инструмента для веб-разработчика на каждый день
10 полезных плагинов VS Code для вёрстки
17 плагинов для JavaScript в VS Code
Обзор редакторов кода

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Dev Mode в Figma. Быстрый обзор бета-версии

Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.

Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.

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

10 августа 2023

Горячие клавиши Figma для быстрой работы

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

Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)

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

Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)

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

А если не пользуетесь — попробуйте.

7 августа 2023

Старт в Figma для верстальщика

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.

Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

2 августа 2023

Инструменты для работы со шрифтами

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

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

29 июня 2023

10 лучших тем для VS Code

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

11 июня 2023

10 полезных плагинов VS Code для вёрстки

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

Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.

9 июня 2023

17 полезных плагинов JavaScript в VS Code

Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.

Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.

6 июня 2023

Подборка микроанимаций для фронтенда с CodePen в 2023

⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.

Например, нажатие на кнопку лайка в социальных сетях или изменение фона, индикатор загрузки, и многое другое. Микроанимация используется везде, где есть интерфейс пользователя, а именно, веб-сайтах, мобильных приложениях, играх. На примерах с CodePen покажем, какими они бывают.

12 апреля 2023

Как собрать проект на Webpack

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

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

7 апреля 2023

Webpack: инструкция по применению

Webpack — это инструмент для сборки JavaScript-приложений, который также применяется для обработки статических файлов — изображений, шрифтов и других ресурсов. У Webpack множество функций, которые легко расширяются с помощью добавления плагинов.

Копирование статических файлов в каталог сборки — одна из таких функций. Выполнить эту задачу можно несколькими способами, наиболее простой — использование плагина CopyWebpackPlugin . Рассмотрим подробнее, как это делать.

CopyWebpackPlugin позволяет скопировать файлы из одного каталога в другой, сохраняя их иерархию. Для начала установите CopyWebpackPlugin в свой проект:

npm install copy-webpack-plugin --save-dev

После установки настройте конфигурацию Webpack, добавив новый экземпляр плагина в секцию plugins конфига. Пример:

const CopyWebpackPlugin = require('copy-webpack-plugin'); const path = require('path'); module.exports = < // ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: path.resolve(__dirname, 'src/assets'), to: path.resolve(__dirname, 'dist/assets') >] >) ] >;

В плагине содержится массив объектов patterns . Каждый объект patterns указывает на исходный файл или каталог назначения, куда копировать файлы. В примере указано, что нужно скопировать все файлы из каталога src/assets в dist/assets во время сборки.

Теперь все статические файлы будут скопированы в каталог сборки при запуске команды npm run build или той, которую вы используете для запуска сборки.

�� Научитесь работать с webpack и сократите время на разработку, сборку и тестирование проекта.

Копирование нескольких файлов

Для копирования нескольких файлов с помощью плагина CopyWebpackPlugin добавляем каждый каталог или файл в отдельный объект-шаблон в массиве patterns .

Каждый объект-шаблон содержит свойство from , оно указывает путь к файлу или каталогу для копирования. Свойство to — это путь, по которому нужно скопировать файлы или каталоги.

const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = < //ваша конфигурация Webpack здесь plugins: [ new CopyWebpackPlugin(< patterns: [ < from: 'src/images', to: 'dist/images' >, < from: 'src/index.html', to: 'dist' >, ], >), ], >;

В примере первый объект-шаблон копирует каталог images из src в dist/images , а второй — копирует файл index.html из src в dist . Добавляйте столько объектов-шаблонов, сколько нужно для копирования всех необходимых файлов и каталогов.

Для более детальной настройки копирования файлов существуют другие опции, доступные в CopyWebpackPlugin , их подробное описание можно прочитать в документации.

Другие способы

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

Лоадер file-loader позволяет копировать статические файлы в указанную папку при сборке проекта. Чтобы использовать file-loader , установите его с помощью npm :

npm install file-loader --save-dev

Затем добавьте его в конфигурационный файл webpack.config.js :

module.exports = < // . ваша конфигурация webpack . module: < rules: [ < test: /\.(png|jpe?g|gif)$/i, use: [ < loader: 'file-loader', options: < name: '[name].[ext]', outputPath: 'images/', >, >, ], >, ], >, >;

В этом примере file-loader используется для копирования файлов изображений в каталог images внутри каталога сборки.

Лоадер url-loader работает аналогично file-loader , но может преобразовывать маленькие файлы в Data URL, вместо копирования их в каталог сборки. Это может быть полезно для уменьшения количества запросов к серверу.

Для использования url-loader необходимо его установить:

npm install url-loader --save-dev

Затем добавить в конфигурационный файл webpack.config.js :

module.exports = < module: < rules: [ < test: /\.(png|jpg|gif)$/i, use: [ < loader: 'url-loader', options: < limit: 8192, >, >, ], >, ], >, >;

Поместите файлы, которые хотите скопировать, в соответствующий каталог в вашем проекте, например, в папку src/images . Если размер файла меньше 8 кБ, он будет встроен в виде Data URL. При сборке проекта все файлы будут обработаны и скопированы.

Описанные лоадеры ещё используются в разработке, но рекомендуем ознакомиться с новой версией Webpack и её обновлениями.

30 марта 2023

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.

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

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