Cara menggunakan phpcbf vscode

Visual Studio Code (VS Code) adalah sebuah teks editor multiplatform yang komplit dan handal buatan Microsoft. Selain tersedia untuk Windows, Visual Studio Code (VS Code)  juga tersedia untuk versi Linux dan Mac. Teks editor mendukung banyak bahasa pemrograman seperti  JavaScript, Typescript, dan Node.js, serta bahasa pemrograman lainnya dengan bantuan plugin yang dapat dipasang di Visual Studio Code seperti C++, C#, Python, Go, Java, dll.

Visual Studio Code (VS Code) bersifat open source. Hal ini juga yang membuat VS Code menjadi favorit para pengembang(developer) aplikasi, karena mereka dapat ikut serta  dalam proses pengembangan Visual Studio Code (VS Code).

Visual Studio Code (VS Code) menyediakan Intellisense, Git Integration, Debugging, dan fitur ekstensi. Fitur-fiturnya akan terus bertambah seiring dengan perkembangan versi Visual Studio Code. Perkembangan versi Visual Studio Code ini juga dilakukan berkala setiap bulan, dan inilah yang membuat VS Code unggul dibandingkan teks editor lainnya.

VS Code dapat digunakan langsung tanpa perlu ekstensi selama bahasa pemrogramannya sudah didukung langsung. Namun ada beberapa fitur yang perlu ditingkatkan sesuai dengan kebutuhan pengembang aplikasi. Disinilah kegunaan ekstensi untuk membuat Visual Code lebih powerfull dan menunjang produktifitas. Ekstensi VS Code banyak dibuat oleh pengembang pihak ketiga yang juga menjadi kontributor dari VS Code. Berikut ini adalah ekstensi VS Code rekomendasi kami:

Cara menggunakan phpcbf vscode

WakaTime

WakaTime, begitu namanya. Ekstensi ini melacak semua aktivitas koding kita, berapa waktu yang kita habiskan untuk koding dan bahasa apa yang sering kita pakai dan berapa banyak project yang telah kita selesaikan selama menggunakan Visual Studio Code.

Cara menggunakan phpcbf vscode

Visual Studio Intellicode

Ekstensi ini membantu kita dengan Artificial Intelligence-Assisted Intellisense yang bisa memberi saran kepada kita kode lanjutan dari kode yang sudah kita tuliskan.

Cara menggunakan phpcbf vscode

Live Server

Inilah ekstensi yang kita tungu-tunggu. Kita tidak perlu menekan tombol reload berkali-kali untuk setiap perubahan yang kita lakukan di project kita. Sangat membantu, bukan?

Cara menggunakan phpcbf vscode

Path Intellisense

Kita akan selalu membutuhkan ekstensi ini karena ekstensi ini sangat membantu dan berguna dalam hal import dependecies, memasukkan gambar ke dokumen, link file javascript atau css dan semua hal yang berkaitan dengan path file.

Cara menggunakan phpcbf vscode

Prettier

Masalah utama saat koding adalah indentasi yang meskipun secara teknis hanya berpengaruh apa python tetapi saat menulis kode dengan menggunakan indentasi yang benar maka hal itu akan sangat membantumu, lebih rapi dan tentu saja lebih cantik bukan?

Nah itu tadi beberapa ekstensi Visual Code yang sangat berguna bagi kita yang menggunakan Visual Code sebagai teks editor utama. Masih banyak ekstensi-ekstensi lain yang sangat menarik dibahas karena tiap hari terdapat ekstensi baru di direktori marketplace Visual Code.

Visual Studio Code, sebagai text editor yang mendukung berbagai macam bahasa pemrograman, juga memberikan dukungan terhadap php. Agar penggunaan php pada VSCode optimal, executable dari php sebaiknya dicantumkan pada settings. Berikut adalah caranya:

  1. Buka VSCode
  2. Pilih File > Preferences > Settings
  3. Lakukan pencarian menggunakan string “php”
  4. Pada “PHP > Validate: Run”, klik “Edit in settings.json”
  5. Tambahkan baris: “php.validate.executablePath”: “C:\\Programs\\xampp\\php\\php.exe”
  6. Tutup kembali (penyimpanan dilakukan otomatis)

Instalasi ekstensi Live Server untuk VSCode sangat mudah, kita hanya perlu membuka ekstensi di VSCode atau dengan menekan shortcut ctrl+shift+x kemudian ketik Live Server, pastikan Liver Server versi Ritwick Dey yang telah diunduh sekitar 18 juta kali lebih saat artikel ini diunggah. Jika sudah ketemu, silahkan klik instal dan tunggu prosesnya hingga selesai.

Setelah instalasi selesai, buka folder proyek dan buka berkas yang diedit. Kemudian pada bagian bawah, klik Go Live. Setelah itu, apapun yang disimpan pada berkas proyek akan secara otomatis merefresh halaman browser.

Cara menggunakan phpcbf vscode
Menu Go Live pada Ekstensi Live Server VSCode ada di bagian bawah

Ekstensi Live Server pada VSCode akan berjalan dengan baik jika berkas proyek merupakan berkas HTML. Namun, jika berkas proyek pada VSCode adalah berkas PHP, kita membutuhkan ekstensi Live Server tambahan pada browser Google Chrome.

Cara menggunakan phpcbf vscode
Cara Develop Website Live (PHP/HTML) Tanpa Perlu Refresh Browser di VSCode dengan Ekstensi Live Server Web Extension untuk Chrome

Instalasi Live Server pada Google Chrome dapat dilakukan melalui tautan https://chrome.google.com/webstore/detail/live-server-web-extension/ . Kemudian lakukan setting sebagai berikut:

Cara menggunakan phpcbf vscode
Setting Live Server Web Extension

Seting plugin/extension Google Shrome Live Server Web Extension dengan mengaktifkan live reload, kemudian actual server address isi dengan halaman localhost yang digunakan untuk melihat halaman php (localhost dari XAMPP atau sejenisnya). Live Server Address isi dengan alamat live server yang muncul pada browser saat mengklik Go Live pada VSCode. Klik apply dan setelah itu setiap perubahan yang terjadi pada VSCode akan merefresh otomatis di browser.