聊聊vscode中怎么定制代碼片段,讓編碼快到飛起!

vscode中怎么定制代碼片段?下面本篇文章給大家介紹一下給vscode中定制屬于自己的代碼片段,讓編碼快到飛起的方法,希望對大家有所幫助!

聊聊vscode中怎么定制代碼片段,讓編碼快到飛起!

vscode的用戶片段非常的方便,比如我想規(guī)范注釋、快速生成代碼呀,vscode的用戶片段都可以幫我實(shí)現(xiàn),而且是那種非常定制化去實(shí)現(xiàn)。定義好片段后,你還可以通過腳手架去生成一個(gè)vscode插件,并不復(fù)雜。【推薦學(xué)習(xí):《vscode》】

基本指南

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

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

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

聊聊vscode中怎么定制代碼片段,讓編碼快到飛起!

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

聊聊vscode中怎么定制代碼片段,讓編碼快到飛起!

開始定制自己的代碼片段

目前我只先做一個(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":?[ 			"/**rn?*?PROJECT?一段自定義描述?start", 			"?*?$0", 			"?*?*/", 			"" 		], 		"description":?"多行注釋:start" 	}, 	"多行注釋:end":?{ 		"scope":?"javascript,typescript,javascriptreact,typescriptreact", 		"prefix":?"me", 		"body":?[ 			"/*?PROJECT?一段自定義描述?end?*/", 			"" 		], 		"description":?"多行注釋:end" 	} }

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

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

聊聊vscode中怎么定制代碼片段,讓編碼快到飛起!

代碼片段的關(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)作占位符,可以給你很清楚的提示。

聊聊vscode中怎么定制代碼片段,讓編碼快到飛起!

關(guān)鍵字說明:

ts:單行注釋:star
te:單行注釋: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" 	} }

效果如圖:

聊聊vscode中怎么定制代碼片段,讓編碼快到飛起!

關(guān)鍵字說明:

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

再來一個(gè)css的

其實(shí)到了這里,你已經(jīng)對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)鍵字說明:

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)鍵字說明:

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

總結(jié)

有了這些代碼片段之后,其實(shí)還可以做一個(gè)vscode的插件,也比較的簡單,這篇vscode中寫了很詳細(xì)了,照著做基本沒啥問題。

關(guān)鍵字匯總說明

js、ts、less、scss文件中能夠用到的

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

聊聊vscode中怎么定制代碼片段,讓編碼快到飛起!

jsx、tsx文件中能夠用到的

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

聊聊vscode中怎么定制代碼片段,讓編碼快到飛起!

css文件中能夠用到的

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

聊聊vscode中怎么定制代碼片段,讓編碼快到飛起!

上述三種文件中都能用到的todo

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

聊聊vscode中怎么定制代碼片段,讓編碼快到飛起!

更多關(guān)于VSCode的相關(guān)知識,請?jiān)L問:vscode!!

以上就是聊聊

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點(diǎn)贊9 分享