vscode中如何定制代碼片段

這篇文章主要講解了“vscode中如何定制代碼片段”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vscode中如何定制代碼片段”吧！

基本指南

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

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

然后你就在當前目錄下看到這個了。

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

開始定制自己的代碼片段

目前我只先做一個通用的，可以在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:你即將填充的內容}",
            "",
            "// 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的注釋代碼塊，不同的人有不同的風格，你簡單改改成你自己的了。

使用說明：代碼片段是需要通過 關鍵字 才能呼喚出來的。比如 如上的普通的單行注釋就是通過 ts呼喚出來的，然后按一下補全的鍵，進行常規補全操作即可，就像windows系統的tab鍵。

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

關鍵字說明：

ts：單行注釋:star
te：單行注釋:end
tse：單行注釋:start&end
ms:  多行注釋:start
me：多行注釋:end

繼續定制jsx和tsx的代碼片段

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

{
	"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:你即將填充的內容}",
            "",
            "{/* PROJECT 一段自定義描述 end */}",
		],
		"description": "jsx&tsx注釋:start&end"
	}
}

關鍵字說明：

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

再來一個css的

其實到了這里，你已經對vscode定制代碼片段非常熟悉了，如果我上面寫的片段不符合你的要求，你可以自己改改喲，沒有什么復雜的操作。

{
    "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:你即將填充的內容}",
            "",
            "/* PROJECT 一段自定義描述 end */",
		],
		"description": "css注釋:start&end"
	}
}

關鍵字說明：

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

最后做個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"
	},
}

關鍵字說明：

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

感謝各位的閱讀，以上就是“vscode中如何定制代碼片段”的內容了，經過本文的學習后，相信大家對vscode中如何定制代碼片段這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！