[{"data":1,"prerenderedAt":551},["ShallowReactive",2],{"\u002Fblog\u002Fcode-snippets-vs-code":3},{"id":4,"title":5,"body":6,"category":533,"cover":534,"date":535,"description":536,"extension":537,"meta":538,"navigation":539,"path":540,"readingTime":541,"seo":542,"sitemap":543,"stem":544,"tags":545,"__hash__":550},"blog\u002Fblog\u002F05.code-snippets-vs-code.md","Code Snippets di Visual Studio Code",{"type":7,"value":8,"toc":526},"minimark",[9,14,31,38,42,80,83,407,417,421,424,480,484,487,508,512,519,522],[10,11,13],"h2",{"id":12},"pengertian-code-snippets","Pengertian Code Snippets",[15,16,17,21,22,26,27,30],"p",{},[18,19,20],"strong",{},"Code snippets"," adalah potongan kode atau template teks yg sering dipakai dan bisa disisipkan scr instan ke dlm editor lewat singkatan (",[23,24,25],"em",{},"prefix",") dan tombol pintasan (",[23,28,29],{},"shortcut",").",[15,32,33,34,37],{},"Snippets tersimpan di dlm pengaturan editor (Visual Studio Code) dan efektif banget buat ngeliminasi pengetikan kode ",[23,35,36],{},"boilerplate"," yg berulang\" tiap kali bikin komponen atau fungsi baru.",[10,39,41],{"id":40},"cara-nambah-snippets-di-vs-code","Cara Nambah Snippets di VS Code",[43,44,45,62,77],"ol",{},[46,47,48,49,53,54,57,58,61],"li",{},"Buka menu pengaturan snippets: Tekan ",[50,51,52],"code",{},"Ctrl + Shift + P"," (atau ",[50,55,56],{},"Cmd + Shift + P"," di macOS), lalu ketik ",[18,59,60],{},"Preferences: Configure User Snippets",".",[46,63,64,65,68,69,72,73,76],{},"Pilih bahasa spesifik (misal ",[50,66,67],{},"vue.json",", ",[50,70,71],{},"typescript.json",") atau pilih ",[18,74,75],{},"New Global Snippets file"," buat snippet yg berlaku di semua jenis berkas.",[46,78,79],{},"Tulis definisi snippet dlm format JSON.",[15,81,82],{},"Berikut contoh berkas konfigurasi snippet global yg saya pakai:",[84,85,91],"pre",{"className":86,"code":87,"filename":88,"language":89,"meta":90,"style":90},"language-json shiki shiki-themes github-light github-dark","{\n  \"Import Module\": {\n    \"scope\": \"javascript,typescript\",\n    \"prefix\": \"imp\",\n    \"body\": [\n      \"import { $1 } from '$2';\"\n    ],\n    \"description\": \"Import a module\"\n  },\n  \"Vue 3 Script Setup SFC\": {\n    \"scope\": \"vue\",\n    \"prefix\": \"vscript\",\n    \"body\": [\n      \"\u003Cscript setup lang=\\\"ts\\\">\",\n      \"$1\",\n      \"\u003C\u002Fscript>\",\n      \"\",\n      \"\u003Ctemplate>\",\n      \"  \u003Cdiv>\",\n      \"    $2\",\n      \"  \u003C\u002Fdiv>\",\n      \"\u003C\u002Ftemplate>\"\n    ],\n    \"description\": \"Vue 3 TypeScript Single File Component template\"\n  },\n  \"Define Props\": {\n    \"scope\": \"vue,typescript\",\n    \"prefix\": \"dprops\",\n    \"body\": [\n      \"defineProps\u003C{\",\n      \"  $1: $2;\",\n      \"}>();\"\n    ],\n    \"description\": \"Vue defineProps declaration\"\n  }\n}\n","global.code-snippets","json","",[50,92,93,102,112,128,141,150,156,162,173,179,187,199,211,218,237,245,253,261,269,277,285,293,299,304,314,319,327,339,351,358,366,374,380,385,395,401],{"__ignoreMap":90},[94,95,98],"span",{"class":96,"line":97},"line",1,[94,99,101],{"class":100},"sVt8B","{\n",[94,103,105,109],{"class":96,"line":104},2,[94,106,108],{"class":107},"sj4cs","  \"Import Module\"",[94,110,111],{"class":100},": {\n",[94,113,115,118,121,125],{"class":96,"line":114},3,[94,116,117],{"class":107},"    \"scope\"",[94,119,120],{"class":100},": ",[94,122,124],{"class":123},"sZZnC","\"javascript,typescript\"",[94,126,127],{"class":100},",\n",[94,129,131,134,136,139],{"class":96,"line":130},4,[94,132,133],{"class":107},"    \"prefix\"",[94,135,120],{"class":100},[94,137,138],{"class":123},"\"imp\"",[94,140,127],{"class":100},[94,142,144,147],{"class":96,"line":143},5,[94,145,146],{"class":107},"    \"body\"",[94,148,149],{"class":100},": [\n",[94,151,153],{"class":96,"line":152},6,[94,154,155],{"class":123},"      \"import { $1 } from '$2';\"\n",[94,157,159],{"class":96,"line":158},7,[94,160,161],{"class":100},"    ],\n",[94,163,165,168,170],{"class":96,"line":164},8,[94,166,167],{"class":107},"    \"description\"",[94,169,120],{"class":100},[94,171,172],{"class":123},"\"Import a module\"\n",[94,174,176],{"class":96,"line":175},9,[94,177,178],{"class":100},"  },\n",[94,180,182,185],{"class":96,"line":181},10,[94,183,184],{"class":107},"  \"Vue 3 Script Setup SFC\"",[94,186,111],{"class":100},[94,188,190,192,194,197],{"class":96,"line":189},11,[94,191,117],{"class":107},[94,193,120],{"class":100},[94,195,196],{"class":123},"\"vue\"",[94,198,127],{"class":100},[94,200,202,204,206,209],{"class":96,"line":201},12,[94,203,133],{"class":107},[94,205,120],{"class":100},[94,207,208],{"class":123},"\"vscript\"",[94,210,127],{"class":100},[94,212,214,216],{"class":96,"line":213},13,[94,215,146],{"class":107},[94,217,149],{"class":100},[94,219,221,224,227,230,232,235],{"class":96,"line":220},14,[94,222,223],{"class":123},"      \"\u003Cscript setup lang=",[94,225,226],{"class":107},"\\\"",[94,228,229],{"class":123},"ts",[94,231,226],{"class":107},[94,233,234],{"class":123},">\"",[94,236,127],{"class":100},[94,238,240,243],{"class":96,"line":239},15,[94,241,242],{"class":123},"      \"$1\"",[94,244,127],{"class":100},[94,246,248,251],{"class":96,"line":247},16,[94,249,250],{"class":123},"      \"\u003C\u002Fscript>\"",[94,252,127],{"class":100},[94,254,256,259],{"class":96,"line":255},17,[94,257,258],{"class":123},"      \"\"",[94,260,127],{"class":100},[94,262,264,267],{"class":96,"line":263},18,[94,265,266],{"class":123},"      \"\u003Ctemplate>\"",[94,268,127],{"class":100},[94,270,272,275],{"class":96,"line":271},19,[94,273,274],{"class":123},"      \"  \u003Cdiv>\"",[94,276,127],{"class":100},[94,278,280,283],{"class":96,"line":279},20,[94,281,282],{"class":123},"      \"    $2\"",[94,284,127],{"class":100},[94,286,288,291],{"class":96,"line":287},21,[94,289,290],{"class":123},"      \"  \u003C\u002Fdiv>\"",[94,292,127],{"class":100},[94,294,296],{"class":96,"line":295},22,[94,297,298],{"class":123},"      \"\u003C\u002Ftemplate>\"\n",[94,300,302],{"class":96,"line":301},23,[94,303,161],{"class":100},[94,305,307,309,311],{"class":96,"line":306},24,[94,308,167],{"class":107},[94,310,120],{"class":100},[94,312,313],{"class":123},"\"Vue 3 TypeScript Single File Component template\"\n",[94,315,317],{"class":96,"line":316},25,[94,318,178],{"class":100},[94,320,322,325],{"class":96,"line":321},26,[94,323,324],{"class":107},"  \"Define Props\"",[94,326,111],{"class":100},[94,328,330,332,334,337],{"class":96,"line":329},27,[94,331,117],{"class":107},[94,333,120],{"class":100},[94,335,336],{"class":123},"\"vue,typescript\"",[94,338,127],{"class":100},[94,340,342,344,346,349],{"class":96,"line":341},28,[94,343,133],{"class":107},[94,345,120],{"class":100},[94,347,348],{"class":123},"\"dprops\"",[94,350,127],{"class":100},[94,352,354,356],{"class":96,"line":353},29,[94,355,146],{"class":107},[94,357,149],{"class":100},[94,359,361,364],{"class":96,"line":360},30,[94,362,363],{"class":123},"      \"defineProps\u003C{\"",[94,365,127],{"class":100},[94,367,369,372],{"class":96,"line":368},31,[94,370,371],{"class":123},"      \"  $1: $2;\"",[94,373,127],{"class":100},[94,375,377],{"class":96,"line":376},32,[94,378,379],{"class":123},"      \"}>();\"\n",[94,381,383],{"class":96,"line":382},33,[94,384,161],{"class":100},[94,386,388,390,392],{"class":96,"line":387},34,[94,389,167],{"class":107},[94,391,120],{"class":100},[94,393,394],{"class":123},"\"Vue defineProps declaration\"\n",[94,396,398],{"class":96,"line":397},35,[94,399,400],{"class":100},"  }\n",[94,402,404],{"class":96,"line":403},36,[94,405,406],{"class":100},"}\n",[15,408,409,410,61],{},"Koleksi snippet pribadi saya yg lengkap dan terus diperbarui bisa diliat di ",[411,412,416],"a",{"href":413,"rel":414},"https:\u002F\u002Fgist.github.com\u002Fadydetra\u002F0f3bb1e9717a48b6ce568d1d2fcc85e2",[415],"nofollow","GitHub Gist ini",[10,418,420],{"id":419},"cara-pakai-snippets","Cara Pakai Snippets",[15,422,423],{},"Setelah snippet disimpan:",[43,425,426,455],{},[46,427,428,431,432,435,436,439,440,443,444,447,448,450,451,454],{},[18,429,430],{},"Import Module",": Cukup ketik ",[50,433,434],{},"imp"," di berkas TypeScript\u002FJavaScript lalu tekan ",[50,437,438],{},"Tab"," atau ",[50,441,442],{},"Enter",". Kursor bakal otomatis ada di ",[50,445,446],{},"$1"," (nama item yg di-import), lalu tekan ",[50,449,438],{}," lg buat pindah ke ",[50,452,453],{},"$2"," (nama path modul).",[46,456,457,460,461,464,465,468,469,471,472,475,476,479],{},[18,458,459],{},"Vue Template Instan",": Di berkas ",[50,462,463],{},".vue",", ketik ",[50,466,467],{},"vscript"," lalu tekan ",[50,470,438],{},". Seluruh struktur ",[50,473,474],{},"\u003Cscript setup lang=\"ts\">"," dan ",[50,477,478],{},"\u003Ctemplate>"," bakal langsung terisi rapi dlm sekejap.",[10,481,483],{"id":482},"variabel-bawaan-vs-code","Variabel Bawaan VS Code",[15,485,486],{},"Kamu jg bisa manfaatin variabel bawaan VS Code kayak:",[488,489,490,496,502],"ul",{},[46,491,492,495],{},[50,493,494],{},"$TM_FILENAME_BASE",": Nama berkas saat ini tanpa ekstensi (berguna buat otomatis namai komponen).",[46,497,498,501],{},[50,499,500],{},"$CURRENT_YEAR",": Tahun berjalan.",[46,503,504,507],{},[50,505,506],{},"$CLIPBOARD",": Nempelin teks yg lg ada di clipboard scr otomatis ke dlm template.",[10,509,511],{"id":510},"kesimpulan","Kesimpulan",[15,513,514,515,518],{},"Pakai snippets bkn sekadar ngirit beberapa detik waktu ngetik, tp jg njaga konsistensi standar kode dan ngurangin risiko kesalahan ketik (",[23,516,517],{},"typo",") di kode boilerplate.",[15,520,521],{},"Selamat nyoba dan selamat koding! 🚀",[523,524,525],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":90,"searchDepth":104,"depth":104,"links":527},[528,529,530,531,532],{"id":12,"depth":104,"text":13},{"id":40,"depth":104,"text":41},{"id":419,"depth":104,"text":420},{"id":482,"depth":104,"text":483},{"id":510,"depth":104,"text":511},"tech",null,"2024-05-21","Konsep code snippets kustom dan cara bikinnya di VS Code buat ningkatin produktivitas serta kecepatan koding.","md",{},true,"\u002Fblog\u002Fcode-snippets-vs-code","4 min read",{"title":5,"description":536},{"loc":540},"blog\u002F05.code-snippets-vs-code",[546,547,548,549],"VS Code","Productivity","Tooling","Vue","JjqfrvCHjLiPZ9P76Oh9eYsSiVyJaVNwtq3PlHO4lJw",1788619562632]