- PVSM.RU - https://www.pvsm.ru -
Недавно я занялся тщательным исследованием VS Code и сделал несколько интересных находок. Как оказалось, в редакторе есть довольно много возможностей и настроек, позволяющих отлично решать те же задачи, которые решают многие популярные расширения.
Здесь речь пойдёт о шести сферах применения расширений, в которых эти расширения могут быть заменены стандартными механизмами VS Code.
Речь идёт о двух возможностях. Во-первых — это возможность одновременного переименования открывающих и закрывающих тегов. Во-вторых — возможность автоматического закрытия тегов.
Автоматическое переименование открывающего и закрывающего тегов
Соответствующая настройка в VS Code имеет несколько нечёткое и непонятное название. Наверное, именно поэтому многие люди не могут её найти.
Editor: Rename on Type
: управляет автоматическим переименованием парных тегов при вводе кода. Значение по умолчанию — false
.
Для того чтобы найти эту настройку можно открыть окно настроек редактора (File > Preferences > Settings
) и ввести Editor: Rename on Type
в строке поиска настроек.
Для включения этой возможности надо добавить следующее в settings.json
:
"editor.renameOnType": true
Пока поддерживаются только HTML-файлы, но в трекере проекта есть открытая задача [4], касающаяся поддержки JSX-файлов.
Сам VS Code вряд ли будет поддерживать подобное для Vue-файлов. Похожий механизм, вероятнее всего, будет реализован в расширении Vetur. В трекере этого проекта уже давно открыта соответствующая задача [5].
Теперь VS Code поддерживает синхронизацию настроек между разными компьютерами. Эта возможность доступна, начиная с предварительной версии VS Code 1.48 [6] (июльский релиз 2020 года).
Я сейчас испытываю эту возможность и до сих пор ни с какими проблемами не столкнулся.
Об этих возможностях можно почитать в документации к VS Code [8]. Ниже показаны страницы с соответствующими настройками.
Настройки синхронизации
Для синхронизации можно пользоваться учётными записями Microsoft или GitHub, можно указывать то, что необходимо синхронизировать.
Выбор объектов, которые нужно синхронизировать
Управление импортом JavaScript- и TypeScript-модулей может представлять собой непростую задачу, особенно в том случае, если нужно реорганизовать проект или отрефакторить код. Разработчики стремятся, по возможности, это автоматизировать.
JavaScript > Suggest: Auto Imports
: позволяет включать и выключать предложения по автоматическому импорту. Требует использования в рабочем пространстве TypeScript начиная с версии 2.6.1. Значение по умолчанию — true
.TypeScript > Suggest: Auto Imports
: позволяет включать и выключать предложения по автоматическому импорту. Требует использования в рабочем пространстве TypeScript начиная с версии 2.6.1. Значение по умолчанию — true
.JavaScript > Update Imports on File Move: Enabled
: позволяет выбирать способ автоматического обновления путей импорта модулей при переименовании или перемещении файлов в VS Code. Требует использования в рабочем пространстве TypeScript начиная с версии 2.9. Значение по умолчанию — prompt
.TypeScript > Update Imports on File Move: Enabled
: позволяет выбирать способ автоматического обновления путей импорта модулей при переименовании или перемещении файлов в VS Code. Требует использования в рабочем пространстве TypeScript начиная с версии 2.9. Значение по умолчанию — prompt
.
Вот как выглядят эти настройки в файле settings.json
:
"javascript.suggest.autoImports": true,
"typescript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",
Кроме того, если вы хотите упорядочивать команды импорта при сохранении файлов, вам понадобится следующая настройка:
"editor.codeActionsOnSave": {
"source.organizeImports": true
}
Её использование приводит к удалению неиспользуемых инструкций импорта и к размещению команд импорта таким образом, чтобы сначала шли бы команды, в которых используются абсолютные пути. Я — большой любитель таких механизмов, о которых можно попросту забыть, однажды настроив их.
Возможно, вы решите, что вам пригодилось бы следующее:
Всё это — схожие, но немного отличающиеся друг от друга возможности, о реализации которых мы поговорим в этом разделе.
В VS Code встроен набор инструментов Emmet [15]. Эти инструменты предлагают возможности по работе с сокращениями и сниппетами для HTML и CSS. Emmet включен по умолчанию для следующих файлов: html
, haml
, pug
, slim
, jsx
, xml
, xsl
, css
, scss
, sass
, less
и stylus
. Подробности об этом можно узнать в документации [16] по VS Code.
Например, для того чтобы добавить в файл шаблонную HTML-разметку страницы, достаточно ввести восклицательный знак (!
) и нажать клавишу Tab
.
Добавление шаблонного HTML-кода в файл
Emmet поддерживает и сокращения, позволяющие вставлять в документы группы элементов. Их устройство напоминает CSS-селекторы.
Например, введём в HTML-файле такую конструкцию:
ul>li*5
Нажмём клавишу Tab
. Эта конструкция будет преобразована в следующий код:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Если ввести в редакторе a
и нажать на Tab
, то в код будет вставлена конструкция <a href="">
, а курсор будет размещён внутри кавычек, позволяя тут же ввести значение атрибута href
.
Это — лишь очень краткий рассказ о возможностях Emmet в сфере HTML. VS Code предлагает похожие возможности и для CSS. Среди этих возможностей мне больше всего нравится автоматическое добавление префиксов [17] производителей браузеров. Подробности об Emmet вы можете найти в документации [18] к этому набору инструментов. Кроме того, вам может пригодиться эта [19] шпаргалка по Emmet.
Настраивать имеющиеся сниппеты и создавать собственные можно, редактируя файл snippets.json
.
Emmet поддерживает [20] не только обычные HTML и CSS. Например, чтобы пользоваться Emmet при создании Vue-приложений и при написании JavaScript-кода, в settings.json
нужно добавить следующее:
"emmet.includeLanguages": {
"vue-html": "html",
"javascript":"javascriptreact"
}
Если вы хотите включить поддержку Emmet для markdown, то вам следует знать об одной особенности (или, скорее, об ошибке [21]). Она заключается в том, что для этого вам нужно, чтобы в emmet.excludeLanguages
был бы записан пустой массив:
"emmet.excludeLanguages": [],
"emmet.includeLanguages": {
"markdown": "html"
}
Обсуждение этого можно найти здесь [22].
Возможно, вам, в ходе работы над страницей, понадобится заполнить её шаблонным текстом. Делают это обычно для того чтобы оценить внешний вид страницы, на которой имеется какое-то содержимое. В роли такого текста часто используется знаменитый «Lorem ipsum». Существуют расширения, позволяющие генерировать подобный текст, но соответствующие возможности есть и в VS Code.
Выше мы уже говорили о том, что в VS Code встроен набор инструментов Emmet. В Emmet имеется сокращение, позволяющее генерировать шаблонный текст. Для того чтобы им воспользоваться, достаточно ввести lorem
и нажать на клавишу Tab
. Благодаря этому будет автоматически сгенерирован абзац, состоящий из 30 слов.
Ввод сокращения lorem
Это сокращение можно использовать не только при создании одного абзаца текста, но и, например, для генерирования нескольких блоков каких-то элементов. Скажем, конструкция p*2>lorem
приведёт к созданию двух элементов <p>
, заполненных шаблонным текстом:
<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>
Обычно соответствующие расширения убирают ненужные пробелы в конце строк либо в процессе редактирования кода, либо по команде. А те настройки VS Code, которыми я предлагаю воспользоваться вместо подобных расширений, рассчитаны на удаление пробелов при сохранении файлов.
Files : Trim Trailing Whitespace
: когда эта возможность включена, она будет убирать хвостовые пробелы при сохранении файлов. Значение по умолчанию — false
.
Для включения этой возможности в settings.json
можно добавить следующее:
"files.trimTrailingWhitespace": true
Прежде чем вы, столкнувшись с необходимостью решения какой-то задачи в VS Code, приступите к поиску подходящего расширения, выясните, есть ли средство для решения вашей задачи среди стандартных возможностей VS Code. Это кажется совершенно очевидным, но мы все, вероятно, иногда поступали с точностью до наоборот. Новые возможности появляются в VS Code регулярно, поэтому время от времени рекомендуется заглядывать в журнал изменений, внесённых в этот редактор.
Стремитесь ли вы всегда, когда это возможно, пользоваться стандартными возможностями VS Code, а не расширениями?
Автор: ru_vds
Источник [26]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/razrabotka/356010
Ссылки в тексте:
[1] Image: https://habr.com/ru/company/ruvds/blog/515300/
[2] Auto Rename Tag: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
[3] Auto Close Tag: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
[4] задача: https://github.com/microsoft/vscode/issues/85707
[5] задача: https://github.com/vuejs/vetur/issues/565
[6] 1.48: https://code.visualstudio.com/updates/v1_48#_settings-sync
[7] Settings Sync: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
[8] документации к VS Code: https://code.visualstudio.com/docs/editor/settings-sync
[9] Auto Import: https://marketplace.visualstudio.com/items?itemName=steoates.autoimport
[10] Move TS: https://marketplace.visualstudio.com/items?itemName=stringham.move-ts
[11] Auto Import — ES6, TS, JSX, TSX: https://marketplace.visualstudio.com/items?itemName=NuclleaR.vscode-extension-auto-import
[12] HTML Snippets: https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets
[13] HTML Boilerplate: https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate
[14] CSS Snippets: https://marketplace.visualstudio.com/items?itemName=joy-yu.css-snippets
[15] Emmet: https://www.emmet.io/
[16] документации: https://code.visualstudio.com/docs/editor/emmet
[17] префиксов: https://docs.emmet.io/css-abbreviations/vendor-prefixes/
[18] документации: https://docs.emmet.io/
[19] эта: https://docs.emmet.io/cheat-sheet/
[20] поддерживает: https://code.visualstudio.com/docs/editor/emmet#_emmet-configuration
[21] ошибке: https://github.com/microsoft/vscode/issues/104259
[22] здесь: https://stackoverflow.com/questions/49956963/markdown-not-using-emmet
[23] Lorem Ipsum: https://marketplace.visualstudio.com/items?itemName=Tyriar.lorem-ipsum
[24] Trailing Spaces: https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces
[25] Autotrim: https://marketplace.visualstudio.com/items?itemName=NathanRidley.autotrim
[26] Источник: https://habr.com/ru/post/515300/?utm_source=habrahabr&utm_medium=rss&utm_campaign=515300
Нажмите здесь для печати.