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

1
5589
views

Перевод статьи «VS Code: You don’t need that extension».

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

1. Автоматическое переименование тегов и закрывающие теги

Желаемые действия:

  1. Переименование HTML-тегов сразу парами. То есть, вы редактируете открывающий, а закрывающий меняется автоматически.
  2. Вставка закрывающего тега при добавлении нового (следующего) открывающего.

Расширения

  • 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, позволяющие обходиться без популярных расширений? Поделитесь в комментариях!

1 КОММЕНТАРИЙ

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here