自定義代碼片段snippets
作為一名碼農(nóng)殖告，碼字過程中總會(huì)遇到一些重復(fù)性的代碼阿蝶，如果我可以像快捷鍵一樣輸入一個(gè)命令就可以調(diào)出這些代碼多好，那么學(xué)會(huì)snippets對(duì)于提高工作效率必不可少黄绩。
1.創(chuàng)建自定義的片段
打開編輯器>文件>首選項(xiàng)>用戶代碼片段>輸入要?jiǎng)?chuàng)建的代碼類型>會(huì)生成一個(gè)json文件
image
那么如何編寫自己的代碼片段呢羡洁？這里我先介紹些snippets的語(yǔ)法。
snippets語(yǔ)法
prefix :代碼片段名字爽丹，即輸入此名字就可以調(diào)用代碼片段筑煮。
body :這個(gè)是代碼段的主體.需要編寫的代碼放在這里,
$1 :生成代碼后光標(biāo)的初始位置.
$2 :生成代碼后光標(biāo)的第二個(gè)位置,按tab鍵可進(jìn)行快速切換,還可以有$3,$4,$5.....
${1,字符} :生成代碼后光標(biāo)的初始位置(其中1表示光標(biāo)開始的序號(hào)，字符表示生成代碼后光標(biāo)會(huì)直接選中字符粤蝎。)
description :代碼段描述,輸入名字后編輯器顯示的提示信息真仲。
注：
如果沒有description，默認(rèn)提示信息是類似上圖中Print to console一樣的信息（即key值）
代碼多行語(yǔ)句的以 , 隔開
每行代碼需要用引號(hào)包裹住
-
字符串間如果值里包含特殊字符需要 \ 進(jìn)行轉(zhuǎn)義.
換行：\r或者\(yùn)n tab鍵制表符：\t 如果多個(gè)初澎，比如
{1,字符2} ${2,字符3}秸应，光標(biāo)開始會(huì)選中字符1和字符2，點(diǎn)擊tab會(huì)切換到字符3
demo
工作中會(huì)經(jīng)常使用面向?qū)ο蟮姆绞綄慾s以及調(diào)試使用console.log()碑宴，如下
console.log()
var obj = {
fn_test:function(){
},
init: function () {
this.fn_test();
}
}
$(function () {
obj.init()
})
下面貼上自己的代碼片段
// 輸出console.log()软啼，光標(biāo)首先定位至$1,然后按tab切換到$2(會(huì)生成新行)
"console": {
"prefix": "console",
"body": [
"console.log($1);",
"$2"
],
"description": "console.log"
},
// js面向?qū)ο髮懛?"obj":{
"prefix": "obj",
"body": [
"var ${1:obj} = {",
"\tfn_${2:test}:function(){",
"\t},",
"\tinit: function () {",
"\t\tthis.fn_${2:test}();",
"\t}",
"}",
"$(function () {",
"\t${1:obj}.init()",
"})",
],
"description": "面向?qū)ο?
},
運(yùn)行結(jié)果如圖
image
