Пишите быстрее с помощью пользовательских фрагментов VScode

Фрагменты кода — это шаблоны, облегчающие ввод повторяющихся шаблонов кода, и кто лучше вас знает, какой код вы копируете снова и снова. Лучший способ решить эту проблему — использовать сниппеты, созданные специально для вас, и я покажу, как создать их менее чем за 2 минуты.

Превратите свой код в фрагменты

Прежде всего, откройте настройки фрагментов ( Файл › Настройки / Код › Настройки в macOS, а затем выберите язык, для которого должны отображаться фрагменты, или файл Global Snippets, чтобы он был доступен для каждого языка).

Затем получите код, который хотите превратить во фрагмент, и перейдите на этот сайт https://snippet-generator.app.

Вы получите тело фрагмента, который представляет собой текст, интерпретируемый VScode для создания вашего кода.

Вы также должны заполнить остальную часть фрагмента:

  • name короткое имя, которое будет отображаться при предложении фрагмента
  • prefix определяет триггер для вызова фрагмента
  • scope — это список языков, для которых применяется этот фрагмент ( пример: javascript, typescript, typescriptreact)

У вас должно получиться что-то похожее на это

Заполнители и расширенный синтаксис

Вы можете дополнительно улучшить свой фрагмент с помощью заполнителей, табуляции и переменных. Вы можете найти документацию здесь: фрагмент синтаксиса doc

Вы можете установить местоположение курсора с помощью $0, $1... если вы напишете одно и то же число несколько раз, вы отредактируете один и тот же текст в каждом месте.

Заполнители — это значения по умолчанию, которые связаны с этими положениями курсора, как это ${1:foo}

У вас также есть переменные по умолчанию, например, если вы хотите имя текущего файла, вы пишете TM_FILENAME_BASE . Лучше всего то, что вы можете комбинировать его с заполнителями.

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

Один специальный трюк: если вы хотите получить имя папки, вам нужно использовать переменную пути к каталогу и преобразовать ее следующим образом: ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}

Примеры моих сниппетов вы можете найти здесь

😄 Спасибо за прочтение! Если вы нашли эту статью полезной, подпишитесь на меня в Твиттере. Я делюсь советами по разработке, дизайну и рассказываю о своем путешествии, где я делю свое время между фрилансом и созданием собственной стартап-студии

Первоначально опубликовано на antoinemesnil.com