Alat Pengubah Kode ke Cuplikan Online, Mendukung JavaScript / TypeScript / React / JSX / TSX      

Silakan masukkan nama cuplikan (name)
Harap masukkan awalan cuplikan (prefix)
Harap masukkan deskripsi cuplikan (description)
Silakan masukkan teks kode (code body)
Tipe Generasi
Hasil Cuplikan yang Dihasilkan

VSCode Cara menggunakan potongan kode


Snippets in Visual Studio Code
Cuplikan VS Code merupakan cara yang ampuh untuk meningkatkan produktivitas pengodean Anda dengan mengotomatiskan penyisipan blok kode yang umum digunakan. Cuplikan tersebut dapat berupa perluasan teks sederhana atau templat yang lebih kompleks dengan placeholder dan variabel. Berikut cara memanfaatkannya:

Membuat Cuplikan:

Akses Pengaturan Cuplikan: Buka File > Preferensi > Cuplikan Pengguna (Kode > Preferensi > Cuplikan Pengguna di macOS). Atau, gunakan palet perintah (Ctrl+Shift+P atau Cmd+Shift+P) dan ketik "Preferensi: Konfigurasikan Cuplikan Pengguna".

Pilih Bahasa: Anda akan diminta untuk memilih bahasa untuk cuplikan Anda (misalnya, javascript.json, python.json, dll.). Ini memastikan cuplikan hanya tersedia untuk bahasa tertentu. Anda juga dapat membuat file "Cuplikan Global" jika Anda ingin cuplikan dapat diakses di semua bahasa.

Tentukan Cuplikan: Cuplikan didefinisikan dalam format JSON. Setiap cuplikan memiliki nama, awalan (pintasan yang akan Anda ketik untuk memicu cuplikan), isi (kode yang akan disisipkan), dan deskripsi opsional.

Contoh (JavaScript):
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
Dalam contoh ini:

"For Loop": Nama cuplikan (untuk referensi Anda).

"forl": Awalan. Mengetik "forl" dan menekan Tab akan menyisipkan cuplikan.

"body": Kode yang akan disisipkan. $1, $2, dst. adalah tabstop (pengganti). $0 adalah posisi kursor terakhir.

"description": Deskripsi opsional yang ditampilkan dalam saran IntelliSense.

Menggunakan Cuplikan:

Ketik Awalan: Dalam file dengan jenis bahasa yang benar, mulailah mengetik awalan yang Anda tentukan (misalnya, forl).

Pilih Cuplikan: IntelliSense VS Code akan menyarankan cuplikan. Pilih dengan tombol panah atau dengan mengklik.

Menggunakan Tabstop: Tekan Tab untuk menavigasi antara tabstop ($1, $2, dst.) dan isi nilainya.

Variabel:

Cuplikan kode juga dapat menggunakan variabel seperti $TM_FILENAME, $CURRENT_YEAR, dll. Untuk daftar lengkap, lihat dokumentasi VS Code.

Contoh dengan Variabel (Python):
{
  "New Python File": {
    "prefix": "newpy",
    "body": [
      "#!/usr/bin/env python3",
      "# -*- coding: utf-8 -*-",
      "",
      "# ${TM_FILENAME}",
      "# Created by: ${USER} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ]
  }
}
Dengan menguasai snippet, Anda dapat mengurangi pengetikan berulang secara signifikan dan memastikan konsistensi dalam kode Anda. Bereksperimenlah dengan membuat snippet Anda sendiri untuk pola kode yang umum digunakan dan saksikan peningkatan efisiensi pengodean Anda.