Перевод статьи «VS Code: You don’t need that extension».
Недавно я углубился в настройки VS Code и сделал несколько любопытных открытий. В редакторе есть довольно много функций и настроек, которые делают то же самое, что и многие популярные плагины.
1. Автоматическое переименование тегов и закрывающие теги
Желаемые действия:
- Переименование HTML-тегов сразу парами. То есть, вы редактируете открывающий, а закрывающий меняется автоматически.
- Вставка закрывающего тега при добавлении нового (следующего) открывающего.
Расширения
- Auto Rename Tag (3,3 млн. загрузок): «Автоматически переименовывает парный HTML/XML-тег, так же, как делает Visual Studio IDE».
- Auto Close Tag (3,1 млн. загрузок): «Автоматически добавляет закрывающий HTML/XML-tag, так же, как делает Visual Studio IDE или Sublime Text.»
Настройка
Название этого параметра несколько расплывчатое и неясное, поэтому многие люди так никогда его и не находят! В настоящее время поддерживаются HTML-файлы и есть открытый issue по добавлению поддержки JSX.
Editor: Rename on Type: «Контролирует автоматическое переименование по мере ввода». Значение по умолчанию — false.
settings.json:
"editor.renameOnType": true
2. Синхронизация настроек
VS Code теперь поддерживает синхронизацию настроек на разных машинах. Эту фичу можно посмотреть в превью на VS Code Insiders. Очень скоро она попадет в стандартную версию.
Я сейчас испытываю этот функционал и пока вроде все хорошо.
Расширения
Settings Sync (1,8 млн. загрузок): синхронизирует ваши настройки, сочетания клавиш, сниппеты, расширения и файлы запуска с GitHub Gist.
Функционал VS Code и его настройка
Почитать об этом функционале подробнее можно в руководстве пользователя. А вот как выглядят настройки:
Вы можете использовать аккаунт Microsoft или GitHub и выбрать, что именно хотите синхронизировать.
3. Автоимпорт модулей
Управление импортами модулей JavaScript и TypeScript может стать настоящей головной болью, особенно если вы хотите переорганизовать свой проект или провести рефакторинг кода. Было бы очень желательно это автоматизировать!
Расширения
- Auto import (1,1 млн. загрузок): «Автоматически находит, парсит и дополняет названия методов и событий для всех доступных импортов. Работает с Typescript и TSX».
- Move TS — Move TypeScript files and update relative imports (308 тысяч загрузок): «Поддерживает перемещение TypeScript-файлов и обновление связанных импортов в рамках рабочего пространства».
- Auto Import — ES6, TS, JSX, TSX (157 тысяч загрузок).
Настройки
JavaScript > Suggest: Auto Imports: «Включает/отключает предложения автоимпорта. Необходимо использование в рабочем пространстве Typescript 2.6.1 или новее». Значение по умолчанию: true.
TypeScript > Suggest: Auto Imports: все то же самое, что и для JavaScript.
JavaScript > Update Imports on File Move: Enabled: «Включает/отключает автоматическое обновление путей импорта, когда вы переименовываете или перемещаете файл в VS Code. Необходимо использование в рабочем пространстве Typescript 2.9 или новее». Значение по умолчанию: prompt.
TypeScript > Update Imports on File Move: Enabled: все то же самое, что и для JavaScript.
settings.json
"javascript.suggest.autoImports": true, "typescript.suggest.autoImports": true, "javascript.updateImportsOnFileMove.enabled": "always", "typescript.updateImportsOnFileMove.enabled": "always",
Кроме того, если вы хотите, чтобы ваши импорты упорядочивались при сохранении, вы можете добавить настройку, приведенную ниже. Это удалит неиспользуемые предложения импорта и поместит предложения импорта с абсолютными путями сверху. Я большой поклонник таких задач «настрой и забудь».
"editor.codeActionsOnSave": {
"source.organizeImports": true
}
4. Сниппеты HTML и CSS
Возможно, вы хотите создавать какие-то бойлерплейты для быстрого старта или добавлять отрывки кода для сохранения сочетаний клавиш. Расширения, перечисленные ниже, удовлетворяют похожие, но при этом слегка отличающиеся нужды.
Расширения
- HTML Snippets (3,8 млн. загрузок): поддержка автодополнения HTML-тегов, включая сниппеты HTML5.
- HTML Boilerplate (684 тысяч загрузок): «Генератор базовых бойлерплейт-сниппетов HTML5».
- CSS Snippets (22 тысячи загрузок): расширение предоставляет готовые сокращения для CSS-сниппетов.
Функционал VS Code
В VS Code встроен Emmet. Он предлагает сокращение и раскрытие сниппетов для HTML и CSS. По умолчанию Emmet включен для файлов html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less and stylus. Подробнее можно почитать в руководстве пользователя VS Code.
Чтобы создать бойлерплейт для HTML, вы набираете ! и нажимаете Tab.
Вам доступны сокращения, использующие CSS-селекторы, например:
ul>li*5
что дает такой результат:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Также доступны раскрытия — это когда вы, к примеру, набираете «a», нажимаете Tab и поучаете <a href="">, причем курсор сразу оказывается между кавычками.
Это лишь беглый обзор того, что касается HTML. Но аналогичные возможности есть и для CSS. Например, мне очень нравится автоматическое добавление vendor-префиксов. Подробнее читайте в документации Emmet, а на будущее — вот вам шпаргалка.
Сниппеты можно кастомизировать, а также создавать свои. Делается это путем добавления их в json-файл snippets.json.
При желании можно включить Emmet для большего числа языков, например, для Vue. Для этого нужно добавить строку в settings.json:
"emmet.includeLanguages": {
"vue-html": "html"
}
Я большой поклонник Emmet. Когда привыкаешь к использованию сниппетов, писать и редактировать HTML и CSS получается просто молниеносно быстро.
5. Фейковый текст (рыба)
Часто возникает необходимость вставить какой-нибудь бессодержательный текст, чтобы заполнить веб-страницу и увидеть, как выглядит UI. Наверняка вам знакомы генераторы «lorem ipsum».
Расширение
Lorem Ipsum (168 тысяч загрузок)
Функционал VS Code
Как мы уже говорили, в VS Code встроен Emmet, а у него есть сокращение lorem. Наберите « lorem», нажмите Tab, и получите параграф на 30 слов.
Вы можете использовать этот функционал для генерации самых разных блоков. Например, сокращение «p*2>lorem» сгенерирует примерно такое:
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus! </p> <p> Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam! </p>
6. Автообрезка
Автоматическое удаление повторяющихся пробелов. Замена, которую я предлагаю, работает не точно так же, как расширения. Расширения обрезают пробелы по мере редактирования или по команде, а настройки VS Code позволяют обрезать пробелы при сохранении.
Расширения
Trailing Spaces (447 тысячи загрузок): «Подсвечивайте повторяющиеся пробелы и моментально удаляйте их!»
Autotrim (15 тысяч загрузок): «После редактирования строк кода (например, удаления слов) часто остаются повторяющиеся пробелы. Это расширение отслеживает, на каких строках находится курсор, и удаляет повторяющиеся пробелы в тех строках, где курсора нет».
Настройки VS Code
Files : Trim Trailing Whitespace: «При включении обрезает повторяющиеся пробелы при сохранении файла». Значение по умолчанию — false.
settings.json
"files.trimTrailingWhitespace": true
А вы знаете какие-нибудь настройки VS Code, позволяющие обходиться без популярных расширений? Поделитесь в комментариях!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
Спасибо. Информация оказалась полезная.