Visual Studio Code 添加設定代碼段(snippet)

最近在寫vue商城專案的時候，發現老師自己在VScode添加了一些的代碼塊非常方便，本打算多碼多練的我，在抵制不住傭訓設定后發現，，，真香！

前言

需求：給表單添加驗證規則，因為是必填項，沒填的話在失去焦點的時候要進行錯誤提示，有很強的重復性，故設定快捷代碼塊，

      addFormRules: {
        goods_name: [
          { required: true, message: '請輸入商品名稱', trigger: 'blur' } //使這段變成插入代碼塊
        ]

1、首先可以打開一個vue或者js的檔案(或在當前打開檔案中)按快捷鍵Ctrl+Shift+P打開命令輸入 snippet :

2、選擇你需要給哪種語言創建代碼塊，這里是在vue檔案，在script腳本中創建，所以選擇js，
接下來會打開一個JSON格式的組態檔，我們來看一下example:

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

引數解釋：

prefix :這個引數是使用代碼段的快捷入口，比如例子中的log在使用時輸入log會有智能感知，
body :這個是代碼段的主體，需要設定的代碼放在這里，字串間換行的話使用\r\n換行符隔開，如果值里包含特殊字符注意需要進行轉義，
$1 :智能生成后為游標的所在位置，
$2 :這個引數后會游標的下一位置將會另起一行，按tab鍵可進行快速切換,還可以有$3,$4,$5…
description :在使用智能感知時代碼段的描述，

3.接下來我們設定依葫蘆畫瓢，設定自己所需的表單校驗規則代碼塊：

	"Console required in form": {
		"prefix": "reqiuredfield",
		"body": [
			"{ required: true, message: '$1', trigger: 'blur' }"
		],
		"description": "Add validation rules to the form"
	}

Ctrl+S保存后在vue檔案中輸入requiredfied按下tab就可以看到效果了，大致輸入req就能彈出智能提示：

之后補充用戶沒填表單后的提示資訊就好啦，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/243852.html

標籤：其他

上一篇：Pygame(四)畫橢圓,弧

下一篇：點擊平滑滾動效果