vscode中如何定制代碼片段

這篇文章主要講解了“vscode中如何定制代碼片段”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vscode中如何定制代碼片段”吧！

基本指南

先找到文件的菜單 -> 找到首選項(xiàng) -> 用戶片段 -> 選擇新建 xx 文件夾的代碼片段文件 -> 輸入片段名稱 -> 開(kāi)始定制。

這個(gè) xx 文件夾就是你當(dāng)前目錄，當(dāng)然你也可以新建全局的或者某一個(gè)文件類型的，都可以的。無(wú)非是片段文件存放的目錄不同。

然后你就在當(dāng)前目錄下看到這個(gè)了。

只要把它放到當(dāng)前vscode打開(kāi)的文件夾的根目錄下面，只要vscode能讀取到這個(gè)文件.vscode即可。
還有一種方式就是你把它放到vscode的用戶全局目錄下也行，vscode會(huì)首先去那里面去找，然后再到當(dāng)前目錄下去找。
至于如何去找vscode的用戶全局目錄，你新建一個(gè)全局的代碼片段，然后從vscode的面包屑導(dǎo)航中就能看到了。

開(kāi)始定制自己的代碼片段

目前我只先做一個(gè)通用的，可以在js、ts、scss、lesss中能用到的。

{
	"單行注釋:start": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less",
		"prefix": "ts",
		"body": [
			"// PROJECT 一段自定義描述 start",
			"$0"
		],
		"description": "單行注釋:start"
	},
	"單行注釋:end": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less",
		"prefix": "te",
		"body": [
			"// PROJECT 一段自定義描述 end",
			"$0"
		],
		"description": "單行注釋:end"
	},
	"單行注釋:start&end": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less",
		"prefix": "tse",
		"body": [
			"// PROJECT 一段自定義描述 start",
            "",
			"${1:你即將填充的內(nèi)容}",
            "",
            "// PROJECT 一段自定義描述 end",
		],
		"description": "單行注釋:start&end"
	},
	"多行注釋:start": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "ms",
		"body": [
			"/**\r\n * PROJECT 一段自定義描述 start",
			" * $0",
			" * */",
			""
		],
		"description": "多行注釋:start"
	},
	"多行注釋:end": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact",
		"prefix": "me",
		"body": [
			"/* PROJECT 一段自定義描述 end */",
			""
		],
		"description": "多行注釋:end"
	}
}

上面定制的是js、ts、jsx的注釋代碼塊，不同的人有不同的風(fēng)格，你簡(jiǎn)單改改成你自己的了。

使用說(shuō)明：代碼片段是需要通過(guò) 關(guān)鍵字 才能呼喚出來(lái)的。比如 如上的普通的單行注釋就是通過(guò) ts呼喚出來(lái)的，然后按一下補(bǔ)全的鍵，進(jìn)行常規(guī)補(bǔ)全操作即可，就像windows系統(tǒng)的tab鍵。

代碼片段的關(guān)鍵字就是上述配置文件中的 prefix 屬性里的字符串，而scope就是它這個(gè)代碼片段作用的文件類型了。
而body就是代碼片段，數(shù)組中每一項(xiàng)都會(huì)在生成的代碼中獨(dú)占一行，$0即表示生成代碼片段后光標(biāo)出現(xiàn)的位置。
還會(huì)有$1 2 3 4 5 6等等，表示下一次光標(biāo)出現(xiàn)的位置，也就是你連續(xù)敲擊按tab鍵時(shí)光標(biāo)出現(xiàn)的位置。
還可以使用讓字符串作為占位符，比如單行注釋::start&end 中的${1:xxx}，這種就是用字符串當(dāng)作占位符，可以給你很清楚的提示。

關(guān)鍵字說(shuō)明：

ts：?jiǎn)涡凶⑨?star
te：?jiǎn)涡凶⑨?end
tse：單行注釋:start&end
ms:  多行注釋:start
me：多行注釋:end

繼續(xù)定制jsx和tsx的代碼片段

這次先做一個(gè)jsx、tsx中能用的吧，jsx、tsx的注釋判斷和js、ts不太一樣，所以要單獨(dú)做一下。

{
	"jsx&tsx注釋:start": {
		"scope": "javascriptreact,typescriptreact",
		"prefix": "js",
		"body": [
			"{/* PROJECT 一段自定義描述 start */}",
			"$0"
		],
		"description": "jsx&tsx注釋:start"
	},
	"jsx&tsx注釋:end": {
		"scope": "javascriptreact,typescriptreact",
		"prefix": "je",
		"body": [
			"{/* PROJECT 一段自定義描述 end */}",
			"$0"
		],
		"description": "jsx&tsx注釋:end"
	},
    "jsx&tsx注釋:start&end": {
		"scope": "javascriptreact,typescriptreact",
		"prefix": "jse",
		"body": [
			"{/* PROJECT 一段自定義描述 start */}",
            "",
			"${1:你即將填充的內(nèi)容}",
            "",
            "{/* PROJECT 一段自定義描述 end */}",
		],
		"description": "jsx&tsx注釋:start&end"
	}
}

關(guān)鍵字說(shuō)明：

js：jsx&tsx注釋:start
je：jsx&tsx注釋:end
jse：jsx&tsx注釋:start&end

再來(lái)一個(gè)css的

其實(shí)到了這里，你已經(jīng)對(duì)vscode定制代碼片段非常熟悉了，如果我上面寫的片段不符合你的要求，你可以自己改改喲，沒(méi)有什么復(fù)雜的操作。

{
    "css注釋:start": {
		"scope": "css",
		"prefix": "cs",
		"body": [
            "/* PROJECT 一段自定義描述 start */",
			"$0"
		],
		"description": "css注釋:start"
	},
	"css注釋:end": {
		"scope": "css",
		"prefix": "ce",
		"body": [
			"/* PROJECT 一段自定義描述 end */",
			"$0"
		],
		"description": "css注釋:end"
	},
    "css注釋:start&end": {
		"scope": "css",
		"prefix": "cse",
		"body": [
			"/* PROJECT 一段自定義描述 start */",
            "",
			"${1:你即將填充的內(nèi)容}",
            "",
            "/* PROJECT 一段自定義描述 end */",
		],
		"description": "css注釋:start&end"
	}
}

關(guān)鍵字說(shuō)明：

cs：css注釋:start
ce：css注釋:end
cse：css注釋:start&end

最后做個(gè)todo吧

{
    "TODO注釋:common": {
		"scope": "javascript,typescript,javascriptreact,typescriptreact,scss,less",
		"prefix": "tt",
		"body": [
			"// PRJECT-TODO:$0"
		],
		"description": "TODO注釋:common"
	},
    "TODO注釋:jsx": {
		"scope": "javascriptreact,typescriptreact",
		"prefix": "jt",
		"body": [
			"{/* PRJECT-TODO:$0 */}"
		],
		"description": "TODO注釋:jsx"
	},
    "TODO注釋:css": {
		"scope": "css",
		"prefix": "ct",
		"body": [
			"/* PRJECT-TODO:$0 */"
		],
		"description": "TODO注釋:css"
	},
}

關(guān)鍵字說(shuō)明：

tt：TODO注釋:common
jt：TODO注釋:jsx
ct：TODO注釋:css

感謝各位的閱讀，以上就是“vscode中如何定制代碼片段”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vscode中如何定制代碼片段這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！