Code Snippets VS Code

Pengertian Code Snippets

Code snippets adalah potongan kode yang sering digunakan atau template kode yang dapat disisipkan dengan cepat ke dalam kode.

Snippets ini biasanya disimpan dalam editor atau IDE yang digunakan, dan dapat dipanggil dengan mudah melalui pintasan keyboard atau perintah tertentu.

Pada kali ini saya memberikan caranya dengan menggunakan Visual Studio Code.

Cara Menggunakan

1. Menambahkan Code Snippets

Membuat atau menambahkan file snippets melalui menu ⚙ Preferences > User Snippets dan memilih bahasa atau membuat snippets global.

Berikut adalah contoh file snippets yang sudah jadi dengan nama global.code-snippets:

{
  "import": {
    "scope": "javascript,typescript",
    "prefix": "imp",
    "body": [
      "import { $1 } from '$2';"
    ],
    "description": "Import a module"
  },
  "define-props": {
    "scope": "javascript,typescript",
    "prefix": "define",
    "body": [
      "defineProps<{",
      "  // ?  = any",
      "  title$1?: string;",
      "}>();"
    ],
    "description": "Define Props"
  },
  "vue-script-setup": {
    "scope": "vue",
    "prefix": "<scr",
    "body": [
      "<script setup lang=\"ts\">",
      "$1",
      "</script>"
    ]
  },
  "vue-template": {
    "scope": "vue",
    "prefix": "<temp",
    "body": [
      "<template>",
      "  <div>",
      "    <slot />",
      "  </div>",
      "</template>"
    ]
  }
}

Code snippet saya pribadi secara penuh dan ter update bisa lihat disini.

2. Menggunakan Code Snippets

Setelah snippets ditambahkan, Anda dapat menggunakannya dalam editor kode VS Code.

• Import a Module
  Ketik imp lalu tekan Tab / Enter, snippets ini akan menambahkan template:
  import { $1 } from '$2';
  

  
  Kemudian dapat mengisi $1 dengan nama komponen atau fungsi dan $2 dengan nama modul atau path.
• Vue Template
  Ketik <temp lalu tekan Tab / Enter, snippets ini akan menambahkan template:
  <template>
    <div>
      <slot />
    </div>
  </template>
  

Kesimpulan

Menggunakan snippets dapat menghemat waktu dan mengurangi kesalahan penulisan kode.

Pastikan mengatur dan memanfaatkan snippets sesuai dengan kebutuhan proyek, dan jangan ragu untuk menyesuaikan atau membuat snippets baru untuk lebih sesuai dengan gaya pengembangan.

Untuk informasi lebih lanjut tentang cara menggunakan dan mengelola snippets di VS Code, bisa merujuk pada dokumentasi resmi VS Code di Visual Studio Code User Snippets.

Selamat coding! 🚀