Фрагменты означает фрагменты.VSCode поддерживает пользовательские фрагменты.При написании кода вы можете быстро завершить фрагмент кода на его основе.
Не только VSCode, но практически все основные редакторы поддерживают сниппеты.
Функция, поддерживаемая таким количеством редакторов, должна быть полезной, но большинство людей ею не пользуются.
Я написал один раньшеСтатьи по фрагментам, описывает различные методы синтаксиса и конфигурации, поддерживаемые фрагментами, но не использует их для создания реального случая.
Итак, эта статья о реальном сниппете, в основном использующем весь синтаксис сниппетов. Если вы можете выписать его самостоятельно, то можно сказать, что сниппеты освоили его.
Давайте сначала рассмотрим синтаксис фрагментов кода VSCode.
основы фрагментов
Фрагменты в формате json выглядят следующим образом:
{
"alpha": {
"prefix": ["a", "z"],
"body": [
"abcdefghijklmnopqrstuvwxyz"
],
"description": "字母",
"scope": "javascript"
}
}
- prefix — префикс триггера, можно указать несколько
- body — это содержимое, вставляемое в редактор, поддерживает множество синтаксисов
- описание это описание
- scope — действующий язык, если он не указан, будут эффективны все языки
Часть тела представляет собой вставляемый код, поддерживает множество синтаксисов, а также является DSL (предметно-ориентированным языком).
Поддерживает указание позиции курсора через $1, $2:
"$1 xxxx",
"yyyy $2"
Вы можете редактировать несколько курсоров одновременно:
"$1 xxxx $1"
Вы можете добавить заполнитель или использовать значение по умолчанию:
"${1:aaa} xxxx",
"yyyy ${2:bbb}"
Можно указать несколько значений на выбор:
"${1|卡颂,神光,yck|}最帅"
Также предоставляются некоторые переменные:
"当前文件： $TM_FILENAME",
"当前日期： $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE"
Но также выполняйте обычную замену переменных:
"${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}"
Базовая грамматика была пройдена один раз, и все знают, что она поддерживает. Позже мы создадим реальный случай и воспользуемся этим один раз.
С помощью команды + shift + p введите фрагменты и выберите диапазон:
У сниппетов есть три эффективных области действия: проект, глобальная и языковая. Лично я больше пишу на глобальном уровне, а также на уровне проекта и языка.
С основами покончено, давайте напишем фрагмент.
Практический случай
Недавно я работал над проектом vue и написал много ссылок на маршрутизаторы, поэтому я инкапсулировал фрагменты кода ссылок на маршрутизаторы.
Сначала напишем самую простую версию:
{
"routerLink": {
"prefix": "link",
"body": [
"<router-link to={ name:'xxx', params: {id: 1} } target='_blank'>link</router-link>"
],
"description": "router-link 跳转"
}
}
Об этом и говорить нечего, это комплектация контента по префиксу:
Затем добавьте три курсора к имени, идентификатору и тексту ссылки, то есть $1, $2 и $3:
{
"routerLink": {
"prefix": "link",
"body": [
"<router-link to={ name: $1, params: {id: $2} } target='_blank'>$3</router-link>"
],
"description": "router-link 跳转"
}
}
Изменения можно быстро отредактировать, нажав клавишу табуляции:
Затем добавьте заполнитель:
{
"routerLink": {
"prefix": "link",
"body": [
"<router-link to={ name: '${1:RouteName}', params: {id: ${2:id}} } target='_blank'>${3:link}</router-link>"
],
"description": "router-link 跳转"
}
}
На самом деле целевая часть тоже необязательна, здесь мы используем множественное выделение:
Есть два варианта: target="_blank" или пробел.
${3| ,target=\"_blank\"|}
Таким образом, фрагменты становятся такими:
{
"routerLink": {
"prefix": "link",
"body": [
"<router-link to={ name: '${1:RouteName}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>"
],
"description": "router-link 跳转"
}
}
Большинство адресов перехода связаны с текущим именем файла, например, XxxYyyZzzList переходит на XxxYyyZzzDetail.
Итак, берем текущее имя файла по умолчанию и используем переменную TM_FILENAME (все доступные переменные можно найти на официальном сайте vscode):
${1:$TM_FILENAME}
Фрагменты сейчас:
{
"routerLink": {
"prefix": "link",
"body": [
"<router-link to={ name: '${1:$TM_FILENAME}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>"
],
"description": "router-link 跳转"
}
}
Эффект такой:
Правда имя файла заполняется, но его приходится менять вручную.Может ли оно быть заполнено после изменения?
Да, переменные поддерживают трансформацию, то есть обычную замену:
XxxList.vue нужно вынуть Xxx, а потом прописать Detail, такую регулярку написать не сложно:
На js написано так:
'XxxList.vue'.replace(/(.*)List\.vue/,'$1Detail')
То же самое верно и для сниппетов, но разделенных символом /:
${TM_FILENAME/(.*)List\\.vue/$1Detail/i
Таким образом, фрагменты становятся такими:
{
"routerLink": {
"prefix": "link",
"body": [
"<router-link to={ name: '${1:${TM_FILENAME/(.*)List\\.vue/$1Detail/i}}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>"
],
"description": "router-link 跳转"
}
}
Заполненный код заменяется:
Содержимое ссылки мы хотим использовать выбранное содержимое, это также имеет переменную, которая является TM_SELECTED_TEXT.
Наконец, мы надеемся, что метка router-link также может быть изменена, а открывающая и закрывающая метки могут быть изменены вместе при изменении.
Это нужно для использования редактирования с несколькими курсорами, просто укажите несколько $x как одно и то же число.
<${5:router-link}></${5:router-link}>
Эффект такой:
Это последний фрагмент, все синтаксис фрагментов используется один раз.
Полные фрагменты выглядят следующим образом, вы можете использовать их в VSCode, опыт по-прежнему очень классный:
{
"routerLink": {
"prefix": "link",
"body": [
"<${5:router-link} to={ name: '${1:${TM_FILENAME/(.*)List\\.vue/$1Detail/i}}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:$TM_SELECTED_TEXT}</${5:router-link}>"
],
"description": "router-link 跳转"
}
}
Суммировать
В основном все основные редакторы поддерживают сниппеты, то есть настройку фрагментов кода для повышения эффективности разработки, VSCode не исключение, это очень полезная функция.
Фрагменты кода VSCode поддерживают три допустимые области действия: глобальную, проектную и языковую. Я лично пользуюсь глобальным больше.
Это также своего рода DSL, который поддерживает множество синтаксисов, таких как указание положения курсора, редактирование с несколькими курсорами, заполнитель, несколько значений выбора, переменные и преобразование переменных.
- Укажите позицию курсора: $x
- Мультикурсорное редактирование: $x $x
- Укажите текст заполнителя: ${x:placeholder}
- Укажите несколько значений выбора: ${x|aaa,bbb|}
- Получить переменную: $VariableName
- Преобразовать переменные: ${VariableName/обычный/замененный текст/}
Мы написали фрагменты router-link, объединили эти синтаксисы, и это будет сделано после прогулки.
Возможность определять свои собственные фрагменты очень полезна для повышения эффективности разработки. Если вы еще не написали его раньше, попробуйте сегодня.