Ekstensi dan Settingan Visual Studio Code Untuk Ngoding Codeigniter
Programming
Halo Sobat Teknisi, Keberadaan ekstensi sangat membantu programmer dalam mempercepat menulis kode program. Visual Studio Code memiliki marketplace, dan berisi kumpulan plugin yang dapat diinstal ke teks editor untuk membuatnya lebih powerfull. Bagi pengguna Windows dapat menampilkan jendela ekstensi dengan Ctrl+Shift+X.
Berikut ini adalah daftar ekstensi Visual Studio Code terutama bagi pengembang frontend yang menggunakan Codeigniter, Bootsrap.
1. Auto Rename Tag
Ekstensi ini memungkinkan untuk mengganti tag <ini-tag></ini-tag> secara otomatis jika tag pembukanya diganti. Bayangkan jika kita memiliki kode program yang banyak dan panjang maka untuk mencari tag nya juga memerlukan waktu serta tenaga. Jadi dengan kita menggunakan ekstensi ini tidak perlu untuk mencari ujung dari tag yang akan diubah tersebut, cukup mencari head tag nya maka ujung dari tag juga otomatis telah diubah.
Untuk mendapatkan ekstensi bisa menggunakan link di bawah ini:
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
2. IntelliSense for CSS class names in HTML
Menurut dari deskripsi ekstensinya, Ekstensi Visual Studio Code yang menyediakan pelengkapan nama kelas CSS untuk atribut kelas HTML berdasarkan definisi yang ditemukan di ruang kerja Anda atau file eksternal yang direferensikan melalui elemen tautan.
Ekstensi ini dapat ditemukan di sini:
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
3. Live Server
Ekstensi ini berfungsi sebagai web server lokal di komputer kita, mirip-mirip seperti XAMPP jika di Windows.
Sobat bisa mendapatkannya di sini:
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
4. One Dark Pro
Ekstensi ini merupakan tema yang menyerupai kode editor Atom bagi Sobat yang suka tema gelap-gelapan bisa untuk menginstall ekstensi ini.
https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
5. open in browser
Saat menulis kode kita juga perlu melihat tampilannya akan seperti apa, ekstensi ini dapat dengan mudah membuka dokumen yang sedang kita tulis kodenya dibuka di browser dengan mengklik kanan lalu open in default browser. Maka browser akan menampilkan tampilan dokumen yang sedang kita develop.
Berikut ini adalah shortcut yang bisa digunakan untuk membuka berdasarkan default browser atau browser lain yang terinstal di komputer.
| Key | Command |
|---|---|
Alt + B |
open in default browser |
Shift + Alt + B |
open in specified browser |
Sobat bisa mendapatkan ekstensinya di bawah ini:
https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
6. PHP intellisense for codeigniter
Ekstensi yang khusus untuk framework CodeIgniter, cara kerjanya menyajikan prediksi kata saat menulis program dengan CI.
https://marketplace.visualstudio.com/items?itemName=small.php-ci
7. PHP Intelephense
Intelephense adalah server bahasa PHP berkinerja tinggi yang dikemas penuh dengan fitur-fitur penting untuk pengembangan PHP yang produktif.
https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
Begitu temen-temen ekstensi yang dapat Sobat instal di Visual Studio Code untuk ngoding Codeigniter.
Settingan VSCode Untuk Ngoding Codeigniter
1. Menonaktifkan PHP Suggest Basic
Karena tadi di atas kita sudah menginstall ekstensi PHP Intelephense maka kita perlu mendisable PHP Suggest bawaan dari VSCode jadi kita hanya memaksimalkan dari kinerja ekstensi
Cara setting VSCode Menonaktifkan PHP Suggest Basic:
Pilih File >> Preferensces >> Setting atau cara cepatnya Ctrl+,
Jika sudah masuk di setting nya ketikkan php maka akan muncul PHP > Suggest: Basic lalu unchek
2. Nayalakan Format On Save
Kode program jika dilihat sangatlah membosankan karena hampir semuanya berisi baris kode, namun jika tampilan kodenya rapi merupakan daya tarik tersendiri dan juga kita tidak bingung saat melakukan debugging. Format On Save pada VSCode berfungsi merapikan baris kode yang kita buat setelah kita melakukan save.
Cara setting VSCode menyalakan Format On Save:
Kembali ke setting seperti petunjut pada nomor 1 di atas,
Jika sudah masuk di setting nya ketikkan format on save maka akan muncul Editor: Format On Save lalu kita checklist
Saya kira sekian artikel kali ini kurang lebihnya mohon maaf, semoga dapat bermanfaat. Apabila Sobat memiliki rekomendasi ekstensi yang lain untuk VSCode jangan ragu menuliskannya di komentar.
Jangan lupa juga untuk membagikan ke teman yang lainnya juga, terimakasih.