Bagaimana cara menambahkan cuplikan kode khusus di VSCode?

106

Apakah mungkin untuk menambahkan cuplikan kode kustom dalam Visual Studio Code? Dan jika ya, bagaimana caranya? VSCode didasarkan pada Atom, jadi itu harus memungkinkan.

BeastCode
sumber
2
Anda juga dapat pergi ke Preferensi> Cuplikan Pengguna, lalu pilih bahasa yang Anda inginkan untuk membuat cuplikan.
Amituuush
Apakah memang ada hubungan antara VS Code sebagai Atom selain fakta bahwa mereka berdua menggunakan Electron di bawah tenda?
skelliam
Gunakan layanan codessnippet untuk melakukan itu. Anda dapat membuat cuplikan khusus, mengedit dan menyinkronkan dengan codessnippet cli semua cuplikan sekaligus, cukup menarik dari server!
pengguna13428826
Saya ingin menambahkan tautan halaman web dalam deskripsi, apakah ada yang tahu bagaimana melakukannya?
januw a

Jawaban:

121
  1. Tekan> shift+ command+ pdan ketik cuplikan
  2. Pilih Preferensi: Buka Cuplikan Pengguna
  3. Pilih jenis bahasa yang ingin Anda tambahi cuplikan khusus
  4. vscode memiliki komentar untuk menjelaskan tentang cara menambahkan potongan, seperti yang dijelaskan di:> vsdoc

Katakanlah, kami ingin membuka cuplikan khusus untuk bahasa GO. Kemudian kita bisa melakukan:

  1. Tekan> command+p
  2. Ketik: go.json + enterDan Anda masuk ke halaman cuplikan kustom

Cuplikan didefinisikan dalam format JSON dan disimpan dalam file .json per pengguna (languageId). Misalnya, cuplikan penurunan harga masuk ke file markdown.json.


Perbarui alat baru: Situs pembuat
cuplikan: https://snippet-generator.app/

Chandan Nayak
sumber
4
generator potongan sangat membantu
rainversion_3
72

opsi - 1 Ada Plugin VsCode bernama: snippet creator ..

Setelah menginstalnya, yang harus Anda lakukan adalah:

  1. Pilih kode yang Anda inginkan untuk dijadikan cuplikan.
  2. Klik kanan padanya dan pilih "Command Palette" (atau Ctrl+ Shift+ P).
  3. Tulis "Buat Cuplikan".
  4. Pilih jenis file yang perlu diawasi untuk memicu pintasan cuplikan Anda.
  5. Pilih pintasan cuplikan.
  6. Pilih nama cuplikan.

opsi - 2 periksa situs web ini . Anda dapat membuat cuplikan untuk kode vs, teks luhur dan atom.

Setelah cuplikan dibuat di situs ini. Buka file cuplikan IDE masing-masing dan tempel yang sama. Misalnya untuk potongan JS dalam kode VS pergi ke File-> preferensi-> potongan pengguna kemudian itu membuka file javascript.json kemudian tempel kode potongan dari situs di atas di dalam ini dan kami siap melakukannya.

Pranay Kumar
sumber
8
Ini adalah alat yang luar biasa! Saya tidak tahan menulis cuplikan boilerplate html khusus yang harus mengutip dan keluar dari setiap baris, jadi ini benar-benar jawaban yang saya cari.
Nabrown
3
Serius, penyelamat di sini.
JeremyW
Wah ini alat yang hebat bekerja dengan sempurna. Harus ditandai sebagai jawaban yang benar
StefanBob
Tautan Penghasil cuplikan rusak. Silakan ikuti tautan ini: snippet-generator.app
Sandip Subedi
1
mengapa Anda menulis langkah1 dan langkah2? ini terasa lebih seperti opsi1 dan opsi2, atau apakah mereka terkait?
Xsmael
26

Mulai versi 0.10.6 Anda dapat menambahkan cuplikan khusus. Baca dokumentasi tentang Membuat Cuplikan Anda Sendiri . Anda dapat menemukan / membuat cuplikan khusus dengan menempatkan file json di C:\Users\<yourUserName>\AppData\Roaming\Code\User\snippets. Misalnya, cuplikan javascript khusus akan ada di file\snippets\javascript.json

Anda juga dapat mempublikasikan cuplikan yang merupakan fitur yang sangat rapi juga. John Papa membuat potongan skrip + sudut bagus yang dapat Anda unduh sebagai ekstensi di pasar .

Berikut adalah contoh potongan yang diambil untuk dokumentasi pada javascript for loop:

"For Loop": {
    "prefix": "for",
    "body": [
        "for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
        "\tvar ${element} = ${array}[${index}];",
        "\t$0",
        "}"
    ],
    "description": "For Loop"
},

Dimana

  • For Loop adalah nama cuplikan
  • prefixmendefinisikan prefiks yang digunakan di drop-down IntelliSense. Dalam hal ini untuk.
  • bodyadalah konten cuplikan. Variabel yang mungkin adalah:
    • $ 1, $ 2 untuk tab stop
    • $ {id} dan $ {id: label} dan $ {1: label} untuk variabel
    • Variabel dengan id yang sama dihubungkan.
  • description adalah deskripsi yang digunakan di tarik-turun IntelliSense
Prancer
sumber
7
Mereka benar-benar membutuhkan semacam sintaks literal string multi-baris atau cara untuk menarik isi ke dalam file terpisah. Mengutip dan keluar dari setiap baris itu gila.
Mark Wilbur
Maaf atas suara tidak suka pada jawaban ini, itu adalah klik nakal 🙄
Giles Butler
16

Anda dapat melihat video ini untuk tutorial singkat singkat

https://youtu.be/g1ouTcFxQSU

Buka File -> Preferensi -> Cuplikan Pengguna . Pilih bahasa pilihan Anda.
Sekarang ketikkan kode berikut untuk membuat cuplikan for loop:

  "Create for loop":{
    "prefix": "for",
    "body":[
      "for(int i = 0; i < 10; i++)",
      "{",
      "   //code goes here",
      "}"
    ],
   "description": "Creates a for loop"
  }

Kamu selesai.
Ketik "untuk" di editor dan gunakan prediksi pertama.

JALAN PINTAS--

  1. instal ekstensi pembuat cuplikan .
  2. Sorot kode yang Anda perlukan untuk membuat cuplikan.
  3. tekan ctrl+ shift+ Pdan ketik "Buat potongan" pada palet perintah dan tekan ENTER.
  4. pilih bahasa yang ingin Anda buat cuplikannya (misalnya: -CPP), lalu ketik
    nama cuplikan, jenis pintasan cuplikan, dan deskripsi jenis cuplikan.
    Anda sekarang baik untuk pergi.
    Ketik pintasan cuplikan di editor yang Anda masukkan pada langkah 4, dan pilih
    prediksi (jika tidak ada prediksi yang muncul, tekan ctrl + spasi) yang muncul lebih dulu.

Semoga ini membantu :)

Catatan: buka File-> Preferensi-> Cuplikan Pengguna. Kemudian pilih bahasa tempat Anda
membuat cuplikan. Anda akan menemukan potongannya di sana.

vinod
sumber
9

Ada Plugin VsCode bernama: snippet creator ..

Setelah menginstalnya, yang harus Anda lakukan adalah:

  1. Pilih kode yang Anda inginkan untuk dijadikan cuplikan.
  2. Klik kanan padanya dan pilih "Command Palette" (atau Ctrl+ Shift+ P).
  3. Tulis "Buat Cuplikan".
  4. Pilih jenis file yang perlu diawasi untuk memicu pintasan cuplikan Anda.
  5. Pilih pintasan cuplikan.
  6. Pilih nama cuplikan.

Itu saja ..

Catatan: jika Anda ingin mengedit cuplikan Anda, Anda akan menemukannya di [fileType] .json
Contoh: Ctrl+ P, lalu pilih "javascript.json"

Peter Shaker
sumber
6

Anda dapat menambahkan skrip kustom, buka File --> Preferences --> User Snippets. Pilih bahasa pilihan Anda.

Jika Anda memilih Javascript, Anda dapat melihat skrip kustom default untuk console.log(' ');seperti ini:

"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
},
Madhankumar
sumber
5

Saya mencoba dengan menambahkan cuplikan di javascriptreact.json tetapi tidak berhasil untuk saya.

Saya mencoba menambahkan cuplikan ke dalam cakupan global, dan berfungsi seperti pesona.

FILE --> Preferences --> User snippets

disini pilih New Global Snippets File, beri nama javas criptreact.code-snippets.

Untuk bahasa lain, Anda dapat memberi nama seperti [bahasa_anda] .potongan kode

masukkan deskripsi gambar di sini

Lakkanna walikar
sumber
4

Ini adalah fitur yang tidak terdokumentasi sampai sekarang tetapi akan segera hadir. Ada folder tempat Anda dapat menambahkannya dan folder tersebut akan muncul, tetapi dapat berubah (tidak terdokumentasi karena suatu alasan).

Saran terbaik adalah menambahkan ini ke situs uservoice dan menunggu sampai hasil akhirnya. Tapi itu akan datang.

John Papa
sumber
1

VSCode memperkenalkan ini dalam versi 0.5, lihat di sini . Sintaks cuplikan mengikuti sintaks cuplikan TextMate dan dapat menulis di Preferensi Pengguna.

Abraão Alves
sumber
0

Jika Anda lebih suka tidak berurusan dengan menulis cuplikan Anda di JSON, lihat Snipster . Ini memungkinkan Anda menulis cuplikan seperti Anda akan menulis kode itu sendiri - tidak harus membungkus setiap baris dalam tanda kutip, karakter escape, menambahkan informasi meta, dll.

Ini juga memungkinkan Anda menulis sekali, menerbitkan di mana saja . Jadi, Anda dapat menggunakan cuplikan Anda di VS Code, Atom, dan Sublime, plus editor lainnya di masa mendatang. Info selengkapnya di sini .

jhanstra.dll
sumber
0

Ini mungkin bukan jawaban yang sebenarnya (seperti yang telah dijawab oleh beberapa orang di atas), tetapi jika Anda tertarik untuk membuat cuplikan kode khusus untuk orang lain, Anda dapat membuat ekstensi menggunakan yeoman dan npm (yang secara default disertakan dengan NodeJS). CATATAN: Ini hanya untuk membuat cuplikan untuk sistem lain. Tapi itu juga berhasil untuk Anda! Kecuali Anda membutuhkan kode JS untuk semuanya.

airax86
sumber