Примечания к исследованию — функция фрагмента пользовательского кода vscode

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

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

1. Операция

1) открытый

Сначала нажмите кнопку настроек в левом нижнем углу, а затем щелкните фрагмент кода пользователя.
Или используйте сочетание клавиш Ctrl + Shift + P напрямую.

2) Создать новый

По требованиям вы можете установить коды пользовательских фрагментов на глобальных, css, vue-html, javascript и даже c, c++ и других языках. Сгенерированный код пользовательского фрагмента заканчивается JSON или фрагментами кода.

3) удалить

Щелкните правой кнопкой мыши файл кода пользовательского фрагмента (заканчивающийся на json или фрагменты кода), который вы хотите удалить.
Mac: после нажатия «Показать в поисковике» удалите файл напрямую.
Окно: После нажатия «Открыть местоположение файла» удалите файл напрямую.
Или найдите корневой каталог файла, а затем используйте командное окно, чтобы удалить соответствующий файл.

4) Создать инструмент фрагмента кода

При написании фрагментов пользовательского кода необходимо перевести такие символы, как двойные кавычки, $, {} в коде. Если написать его самостоятельно затруднительно, для его создания можно использовать следующие инструменты.
Инструмент создания фрагментов кода

2. Общая грамматика

1) Табуляция

Используйте $1, $2, чтобы указать позицию курсора, и $0, чтобы указать конечную позицию курсора.

порядок табуляции

Как и в приведенном ниже коде, после создания фрагмента кода существуют $1, $2 и $0.
При его использовании курсор сначала останавливается на $1, чтобы установить размер кнопки. После настройки нажмите клавишу «Tab» на клавиатуре, и курсор остановится на $2, и снова нажмите клавишу «Tab», чтобы остановиться на $0.

"Print to btn-main": {
    
    
	"scope": "",
	"prefix": "zw-btn",
	"body": [
		"<el-button size='$1' @click='$2'>$0</el-button>"
	]
}

повтор табуляции

Как и в приведенном ниже коде, после создания фрагмента кода $1, $1, $0 имеют две повторяющиеся позиции табуляции.
Тогда при использовании курсоры будут появляться в обеих позициях $1 и будут обновляться синхронно.

"Print to btn-main": {
    
    
	"scope": "",
	"prefix": "zw-btn",
	"body": [
		"<el-button size='$1' @click='$1'>$0</el-button>"
	]
}

2) заполнитель

Заполнители — это позиции табуляции со значением, например $1 : другой Текст - заполнитель будет вставлен и выделен, чтобы его можно было$ $легко$ $изменить$ $.$ $Заполнители могут быть вложенными, например$ {1:другая $ошибка синтаксического анализа KaTeX: Ожидается «EOF», получено «}» в позиции 16: {2:placeholder}}̲. Заполнители могут иметь разные варианты, например... {1 |$ один, два, три|}. При вставке фрагмента и выборе заполнителя параметры предложат пользователю выбрать одно из значений.

"Print to console": {
    
    
	"prefix": "zw-log",
	"body": [
	    "console.log(${1:another})"
		"console.log(${1|one,two,three|})"
		"console.log(${1:another ${2:placeholder}})"
	],
	"description": "打印日志。"
}

3) перевод

Используя \ (обратную косую черту), вы можете избежать в коде (знака доллара), .(символа точки) $\\$ $ в подтверждении, чтобы он не анализировался на этапе расширения фрагмента.

"Print to confirm": {
    
    
	"prefix": "zw-confirm",
	"body": [
		"this.\\$confirm('是否确认删除该分组？', '提示').then(() => {$0})"
	],
	"description": "确认弹窗。"
},

3. Видео-пояснение

Видео объяснение