Code Snippets di Visual Studio Code

Pengertian Code Snippets

Code snippets adalah potongan kode atau template teks yg sering dipakai dan bisa disisipkan scr instan ke dlm editor lewat singkatan (prefix) dan tombol pintasan (shortcut).

Snippets tersimpan di dlm pengaturan editor (Visual Studio Code) dan efektif banget buat ngeliminasi pengetikan kode boilerplate yg berulang" tiap kali bikin komponen atau fungsi baru.

Cara Nambah Snippets di VS Code

1. Buka menu pengaturan snippets: Tekan Ctrl + Shift + P (atau Cmd + Shift + P di macOS), lalu ketik Preferences: Configure User Snippets.
2. Pilih bahasa spesifik (misal vue.json, typescript.json) atau pilih New Global Snippets file buat snippet yg berlaku di semua jenis berkas.
3. Tulis definisi snippet dlm format JSON.

Berikut contoh berkas konfigurasi snippet global yg saya pakai:

{
  "Import Module": {
    "scope": "javascript,typescript",
    "prefix": "imp",
    "body": [
      "import { $1 } from '$2';"
    ],
    "description": "Import a module"
  },
  "Vue 3 Script Setup SFC": {
    "scope": "vue",
    "prefix": "vscript",
    "body": [
      "<script setup lang=\"ts\">",
      "$1",
      "</script>",
      "",
      "<template>",
      "  <div>",
      "    $2",
      "  </div>",
      "</template>"
    ],
    "description": "Vue 3 TypeScript Single File Component template"
  },
  "Define Props": {
    "scope": "vue,typescript",
    "prefix": "dprops",
    "body": [
      "defineProps<{",
      "  $1: $2;",
      "}>();"
    ],
    "description": "Vue defineProps declaration"
  }
}

Koleksi snippet pribadi saya yg lengkap dan terus diperbarui bisa diliat di GitHub Gist ini.

Cara Pakai Snippets

Setelah snippet disimpan:

1. Import Module: Cukup ketik imp di berkas TypeScript/JavaScript lalu tekan Tab atau Enter. Kursor bakal otomatis ada di $1 (nama item yg di-import), lalu tekan Tab lg buat pindah ke $2 (nama path modul).
2. Vue Template Instan: Di berkas .vue, ketik vscript lalu tekan Tab. Seluruh struktur <script setup lang="ts"> dan <template> bakal langsung terisi rapi dlm sekejap.

Variabel Bawaan VS Code

Kamu jg bisa manfaatin variabel bawaan VS Code kayak:

• $TM_FILENAME_BASE: Nama berkas saat ini tanpa ekstensi (berguna buat otomatis namai komponen).
• $CURRENT_YEAR: Tahun berjalan.
• $CLIPBOARD: Nempelin teks yg lg ada di clipboard scr otomatis ke dlm template.

Kesimpulan

Pakai snippets bkn sekadar ngirit beberapa detik waktu ngetik, tp jg njaga konsistensi standar kode dan ngurangin risiko kesalahan ketik (typo) di kode boilerplate.

Selamat nyoba dan selamat koding! 🚀