vscode中如何定制代碼片段

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

為吉利等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及吉利網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、吉利網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

基本指南

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

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

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

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

開始定制自己的代碼片段

目前我只先做一個(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定制代碼片段非常熟悉了，如果我上面寫的片段不符合你的要求，你可以自己改改喲，沒有什么復(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)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前文章：vscode中如何定制代碼片段
URL網(wǎng)址：http://muchs.cn/article30/iepipo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站收錄、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站維護(hù)、虛擬主機(jī)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容