Jumat, 30 August 2024

Buat Snippet VS Code dengan Nama Komponen Otomatis

Dalam artikel kali ini, saya akan menunjukkan pengalaman yang buruk di vscode namun bisa kita selesaikan dengan beberapa pattern dari regex.

Visual Studio Code

Daftar Isi

Dalam artikel kali ini, saya akan menunjukkan pengalaman yang buruk di vscode namun bisa kita selesaikan dengan beberapa pattern dari regex. Saya sendiri sering bermain dengan React.js.

Tentu saya perlu snippet untuk membuat boilerplate. Dan muscle memory saya dari phpstorm itu adalah rsc, yang mana dia akan menggenerasi sintak seperti:

export function Component() {
  return (
    <div>
      
    </div>
  )
}

Buat Snippet

Snippet tentu bisa dibuat dengan bahasa apa pun yang Anda inginkan. Untuk contoh kali ini, saya akan menggunakan TypeScript React.

Untuk membuat snippet, buka Command Palette atau tekan (Cmd/Ctrl + Shift + P), lalu cari kata "snippet". Akan muncul beberapa pilihan seperti Configure Snippet, Insert Snippet, dan Fill File with Snippets. Pilih Configure Snippet, ketik typescript, lalu pilih typescriptreact.json. Tekan Enter, dan tampilannya akan seperti ini:

{
	// Place your snippets for bibtex here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

Dan itu akan modifikasi menjadi seperti:

{
  "Create react function component": {
    "prefix": "rsc",
    "body": [
      "export function ${1}() {",
      "  return (",
      "    <div>",
      "      ${2}",
      "    </div>",
      "  )",
      "}",
      ""
    ],
    "description": "Create react function .component"
  }
}

Kemudian, simpan, buat file dengan nama text.tsx, ketik rsc, lalu tekan Tab atau pilih dari autocompletions dan tekan Enter. Maka akan menjadi seperti:

export function () {
  return (
    <div>

    </div>
  )
}

Default Name

Tentu kita tidak ingin menuliskan nama file itu terus menerus, jadi kita akan menambahkan nama komponen sesuai dengan nama file-nya. Buka kembali snippet yang tadi, dengan cara yang sama seperti langkah di awal.

{
  "Create react function component.": {
    "prefix": "rsf",
    "body": [
      "export function ${TM_FILENAME_BASE}() {",
      "  return (",
      "    <div>",
      "      ${1}",
      "    </div>",
      "  )",
      "}",
      ""
    ],
    "description": "Create react function component."
  }
}

Dengan begitu, maka sekarang ketika kita buat ulang jalankan ulang rsc, maka akan jadi seperti:

export function text() {
  return (
    <div>

    </div>
  )
}

Tentu kita tidak mau seperti itu; kita ingin nama komponen menjadi title case. Jadi, jika nama file adalah user.tsx, hasilnya harusnya menjadi User(). Untuk itu, silakan modifikasi snippet tadi menjadi seperti:

{
  "Create react function component.": {
    "prefix": "rsf",
    "body": [
      "export function ${1:${TM_FILENAME_BASE/(?:^|-)(\\w)/${1:/upcase}/g}}() {",
      "  return (",
      "    <div>",
      "      ${1}",
      "    </div>",
      "  )",
      "}",
      ""
    ],
    "description": "Create react function component."
  }
}

Dengan begitu, sekarang tentu kita sudah mendapatkan title casenya, bahkan jika nama file nya update-profile.tsx akan menjadi:

export function UpdateProfile() {
  return (
    <div>
      UpdateProfile
    </div>
  )
}

Perhatikan bahwa isi dari div tersebut langsung menjadi nama file-nya, dan itu terjadi karena kita menggunakan variabel name dari atas.

Jika ingin menambahkan spasi, misalnya UpdateProfile menjadi Update Profile, modifikasi snippet seperti:

{
  "Create react function component": {
    "prefix": "rsf",
    "body": [
      "export function ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}() {",
      "  return (",
      "    <div>",
      "      ${TM_FILENAME_BASE/(^|\\-)([a-z])/ ${2:/upcase}/g}",
      "    </div>",
      "  )",
      "}"
    ],
    "description": "Create react function component."
  }
}

Dengan begitu, seandainya nama file nya user-password-form.tsx, maka itu akan menjadi seperti:

export function UserPasswordForm() {
  return (
    <div>
       User Password Form
    </div>
  )
}

Kesimpulan

Jadi, apapun bahasa yang kalian gunakan, tentu bisa disesuaikan dengan apa yang kita inginkan. Intinya, tidak ada yang sulit ketika kita ingin mencari caranya. Semoga artikel ini bermanfaat dan sampai jumpa di artikel selanjutnya.

Irsyad A. Panjaitan

Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.

Irsyad A. PanjaitanGo to Irsyad A. Panjaitan profile

Follow me on

Support me

Github