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

Используйте свой пользовательский фрагмент кода

1. Выберите некоторый текст в Text-Editor.

2. используйте комбинацию CTRL+K CTRL+X для открытия диалогового окна Вставка сниппета

3. Выберите HTML из списка DropDown, где вы ранее сохранили свой .snipped файл

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

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

☕ HINT (как в функции сборки текстового редактора Sublime)
Вы можете создать пользовательский фрагмент кода Lorem Ipsum вот так за секунды:

   
 Microsoft Corporation Lorem Markup snippet for a Lorem Ipsum Expansion SurroundsWith  
   Lorem LoremIpsum Lorem  selected content content    

☕ HINT
Вы можете создать практически любой фрагмент кода, который хотите, предоставив свойство language=»» и установив правильное описание в разделе
Ниже приведен пример фрагмента кода JavaScript функции Alert()

Поделиться 20 февраля 2017 в 00:03

Нажмите на тег, который вы хотите обернуть, а затем нажмите Ctrl + Alt + W .

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 регулярно добавляет функции, поэтому стоит время от времени проверять, что изменилось.

ТОП горячих клавиш VS Code для начинающего джуна

«Поговорим не про Vim», олдам, сеньорам и тру-си-разработчикам на проверку: пользуетесь ли вы такими сочетаниями VS Code? Если же вы только начинаете программировать, влетаете в айти на реактивном самолете курсов по Питону, или просто не знаете ничего про хоткеи VS Code, возможно вам точно пригодится парочка сочетаний 🙂

Все сочетания описаны для VS Code на Windows
↓ / ↑ / ← / → — стрелки вниз, вниз и т.д.
ЛКМ / ПКМ / СКМ — левая, правая, средняя кнопки мышки соответственно.

1. Shift + Tab — сместить табуляцию на один шаг влево. Если вы пишете на Python, то табуляция или четыре пробела — ваш неизменный спутник. Но мало кто знает, что достаточно поставить курсор в любое место строки, нажать Shift + Tab и вуаля, вся строка смещается влево на «один таб».
2. Ctrl + / — закомментировать или раскомментировать строку. VS Code сам разберется, какой язык программирования вы используете, и в начале строки установит или удалит необходимый символ для комментария. Место, где находится курсор на строке неважно.
3. Shift + Del — удалить строку целиком. Теперь не нужно выделять мышкой всю строку и потом нажимать Backspace. Не нужно выделять всю строку. Правда!
4. Alt + ↑ / ↓ — перемещение строки с курсором вверх или вниз. Просто попробуйте и ощутите, насколько это удобно. Знаете шутку «стоит всего один раз зимой надеть подштанники, и ты уже не можешь остановиться»? Так вот стоит только один раз переместить так строку, и вы уже не сможете по-другому!
5. Shift + Alt + ↓ / ↑ — дублирование строки с курсором вниз. В зависимости от ↓ или ↑ курсор останется на текущей или новой строке. Теперь можно обойтись без Ctrl + C, хотя нет, нельзя =)
6. F2 — переименовать переменную. Прошу заметить, что переименовываются все переменные с таким названием только внутри блока, не внутри всего открытого файла. Часто нужно переименовать переменную, которая уже используется в нескольких местах функции, и тут либо вручную расставлять курсор в нужное место, либо поставить курсор на переменную и нажать F2.
7. F12 или Alt + ЛКМ на переменной — перейти к переменной или родительскому классу. Часто рассказывают про PyCharm, будто только он умеет проваливаться в родительские классы, чтобы посмотреть, какие его атрибуты мы можем переопределять, наследуясь от него; но так умеет и VS Code.
8. Ctrl + D — выделяет слово, на котором находится курсор. Следующее нажатие на D (удерживая Ctrl) выделить следующее по порядку вниз идентичное значение. Вот пишете вы функцию, и вам нужно выделить ближайшие значения ‘name’. Легко! Выделить все вхождения слова можно вот так — Ctrl + F2. Радует то, что курсор оказывается в конце каждого выделенного значения и сразу можно редактировать!
9. Ctrl + L — выделяет всю строку. Целиком. Теперь копипастить еще проще, не правда ли? =)
10. Ctrl + Alt + → — разделить рабочую область и переместить актуальную вкладку вправо. Ctrl + Alt + ← возвращает вкладку назад. Вы не поверите, насколько удобно видеть, например, models.py и views.py рядом.

А теперь неочевидные, но потрясающие возможности. Меню → Файл → Настройки → Сочетания клавиш (Ctrl + K + Ctrl + S), в строке поиска вводим необходимый параметр и кликаем по результату мышкой, после нажимаем нужные клавиши для установки пользовательской настройки и наслаждаемся. Команды, которые точно стоит попробовать:

editor.action.jumpToBracket — переход к парной скобке, у меня установлено на Ctrl + Q. Сначала переход к ближайшей скобке, а следующее нажатие перемещает вас к парной скобке и так далее. Часто нам нужно оказаться либо в начале скобок, либо в конце. А кликать мышкой или стрелками не всегда удобно. Теперь достаточно одного нажатия и вы у нужной скобки.

editor.action.selectToBracket — выделить все внутри ближайших скобок и сами скобки, у меня это Ctrl + Shift + Q. Сколько кликов мышкой, сколько ошибок, выделяя внутри скобок мышкой или Shift + стрелки. А теперь можно просто одним нажатием выделить все точно и быстро.

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

P. S. В комментариях рассказали про логичную, но неочевидную возможность IDE-шек и иже с ними: чтобы вырезать или скопировать строку, необязательно выделять ее целиком, можно просто переместить курсор на неё. ❤️