Создание фрагментов кода в VS Code

Создание фрагментов кода в VS Code

Нажмите здесь, чтобы посмотреть видео на YouTube.

Если вы какое-то время использовали Visual Studio Code, вы, вероятно, уже знакомы с фрагментами. Если вы не знакомы с ними, согласно документации Visual Studio Code, фрагменты - это «шаблоны, которые упрощают ввод повторяющихся шаблонов кода». Для меня это непонятно, так что же это на самом деле значит? На самом деле все просто. Фрагменты - это ярлыки для написания кода, который вы устали писать.

Фрагменты - это ярлыки для написания кода, который вы устали писать

Например, как часто в Javascript мы пишем консольные операторы, циклы for и т. Д. Как часто в HTML мы пишем шаблонный код для документа HTML5? В CSS, как часто мы пишем один и тот же код для определения стиля, просто меняя селектор. Все эти вещи невероятно повторяются и снижают нашу продуктивность. Итак, сниппеты дают вам ярлык (представьте себе несколько букв) для завершения раздела кода.

Помните, что фрагменты контекстно-зависимы, то есть, если вы работаете с файлом Javascript, фрагменты Javascript отображаются. Если вы работаете в HTMl, будут отображаться фрагменты HTML. В этой статье мы сосредоточимся на создании сниппетов в Visual Studio Code для Javascript. Мы собираемся взглянуть на существующие сниппеты, а затем погрузимся в их создание и настройку.

Существующие фрагменты в коде Visual Studio

В Visual Studio Code уже есть множество встроенных фрагментов. Самый простой пример представлен в виде Emmet. Emmet - это плагин, встроенный в VS Code, который предоставляет ТОННЫ фрагментов для HTML и CSS. Если вы еще этого не сделали, найдите видео на YouTube и посмотрите его. Это серьезно сэкономит вам НАЛИЧИЕ времени!

Вероятно, наиболее ярким примером этого является фрагмент кода для создания шаблонного кода HTML5. Чтобы получить этот шаблонный код, достаточно набрать «!» а затем таб. Вот и все!! В этом вся прелесть сниппетов.

Visual Studio Code также имеет множество других встроенных фрагментов.

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

Обратите внимание, что фрагменты - это те, у которых слева есть черные прямоугольники.

Вот что происходит, когда я печатаю «за». Обратите внимание на все линии с черными квадратами слева? Это отрывки!

Давайте создадим наш первый сниппет

Visual Studio Code хранит свои фрагменты в файле json, связанном с заданным языком. В этом примере мы будем работать с файлом «javascript.json», который, как вы уже догадались, хранит наши фрагменты для Javascript.

Чтобы найти этот файл (на Mac), перейдите в меню и нажмите Код - ›Настройки -› Пользовательские фрагменты.

Затем вам будет предложено выбрать язык. Выберите Javascript.

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

name - не требующий пояснений префикс
- что мы хотим, чтобы пользователь вводил для запуска фрагмента
body - содержимое фрагмента (одна строка или массив строк для многострочных фрагментов)
описание - не требует пояснений

Начнем с фрагмента однострочного оператора console.log (). Вот как это выглядит.

««
«Журнал консоли»: {
«префикс»: «засорение»,
«тело»: «console.log ('$ 1');»,
« description »:« Записывать вывод в консоль »
}
` `

«Журнал консоли» - это ключ / идентификатор / имя нашего объекта, а префикс и описание просты. Поговорим о теле. Обратите внимание, что это всего лишь однострочная строка, и вам наверняка бросается в глаза цифра «1 доллар». Это называется ** табуляция **.

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

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

Несколько позиций табуляции и многострочные фрагменты

Если имеется более одной позиции табуляции, курсор будет переходить к следующей позиции табуляции при каждой нажатой табуляции. Если вы определите одну и ту же позицию табуляции несколько раз, текст для каждой будет обновляться одновременно. Это позволяет вам дать переменной имя, которое будет повторно использоваться во всем фрагменте. Вы также можете определить конечную позицию курсора (где вы хотите, чтобы курсор пользователя закончился), используя $ 0. Вот хороший пример создания цикла for через массив.

Прежде всего, стоит отметить пару моментов ...

1. Вместо того, чтобы использовать $ 1 ($ и число), мы используем $ и кусок текста, который действует как замещающий текст, который вы должны заменить.
2. Это многострочный фрагмент. Для многострочных фрагментов тело становится массивом, где каждая строка фрагмента становится строкой в ​​этом массиве.
3. Чтобы правильно отформатировать наш код, мы добавили «\ t» к строкам, которые должны быть с отступом. .

`` `
« Для «: {
« prefix »:« forarr »,
« body »: [
« for (let $ {index} = 0; $ { index} ‹$ {array} .length; $ {index} ++) {«,
«\ tconst $ {element} = $ {array} [$ {index}];»,
« \ t $ 0 »,
«} »
],
« description »:« Для цикла »
},
` `

Скопируйте это в свой файл сниппетов и попробуйте!

Выбор

Еще одна полезная функция - это предоставление пользователю возможности выбора. Это означает, что вместо того, чтобы вводить что-то вручную, они могут выбирать из списка подходящих вариантов. Давайте еще раз взглянем на наш предыдущий фрагмент "clog". Что, если бы мы хотели дать пользователю возможность писать console.error () или console.warning () вместо просто console.log (). Это прекрасная возможность для выбора. Вот как бы это выглядело.

``
«Выбор консоли»: {
«префикс»: «конц»,
«тело»: «консоль. $ {1 | log, warning, error |} ('$ 2 '); »,
« description »:« Журнал вывода на консоль »
}
` `

Активировать фрагмент из привязки клавиш

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

Чтобы изменить привязку клавиш, перейдите в строку меню и щелкните Код - ›Настройки -› Сочетания клавиш.

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

Подобно тому, как мы определяем фрагменты, переопределение привязки клавиш так же просто, как добавление объекта в файл json с тремя ключевыми свойствами.

* Ключ - комбинация клавиш
* Команда - что мы хотим сделать
* Когда - когда должна работать эта привязка клавиш (когда пользователь редактирует текст? Работает во встроенном терминале?)

Для запуска сниппета нам понадобится одно дополнительное свойство с именем args. Args - это сам объект с двумя свойствами: langId и name.

* langId - идентификатор языка (например, JAVASCRIPT.json)
* name - имя сниппета, который мы хотим запустить

Итак, вот как выглядит запуск журнала консоли с помощью комбинации «cmd + c l», что означает одновременное нажатие клавиш command и «c» с последующим нажатием клавиши «l».

««
{
«ключ»: «cmd + cl»,
«команда»: «editor.action.insertSnippet»,
«когда»: «editorTextFocus»,
«args»: {
«langId»: «javascript»,
«name»: «Печать на консоль»
}
`` `

Сохраните файл keybindings.json и попробуйте!

Заворачивать

Отсюда у вас есть все основы. Выберите язык, на котором вы работаете, и отредактируйте его файл json. Каждый фрагмент, который вы хотите добавить, представляет собой пару «ключ-значение», где ключ является именем фрагмента, а значение - самим фрагментом. Сам сниппет имеет три основных свойства: префикс, тело и описание. TabStops дают вам полный контроль над табуляцией во фрагменте и заменой текста заполнителя реальным.

Взгляните на рынок расширений кода Visual Studio, где вы можете найти множество предопределенных шаблонов, поэтому вам не придется писать их все самостоятельно.

Ресурсы

Видеоверсия
Документы VS Code
Фрагменты TextMate (откуда берутся фрагменты VS Code)
Дополнительная документация