Extension vscode adalah assisten kita didalam web programming

Halo temen temen semua, menyambung dari bagian kemarin seputaran vscode, kali ini kita juga akan membahas seputar ekstensi yang ada di visual studio code berserta fungsi nya yang dimana hal ini kita perlukan tentunya untuk web programming agar lebih mudah lagi tentunya, mengingat kita memerlukan bantuan beberapa tools ini agar mempermudah kita dalam mengerjakan struktur html, css dan js bukan? maka dari itu silahkan perhatikan beberpa ekstensi berikut ini!

Prettier

Prettier yang asli

Apa itu prettier?

yak untuk di bagian pertama tentunya kita akan memilih prettier sebagai ekstensi pertama yang saya sangat amat rekomendasikan hanya karena ekstensi ini lah yang membantu saya dalam merapihkan kode dengan lebih baik lagi untuk saya yang bekerja dengan html css dan juga javascript, tak jarang juga saya menggunakan prettier ini untuk vue dan json juga agar merapihkan kodenya dengan lebih rapih, cara nya jika kalian ingin merapihkan codenya dengan lebih cepat disatu halaman tersebut kalian bisa dengan lebih mudah dengan menekan shortcut seperti berikut

Windows : Alt + Shift + F

Linux : Ctrl + Shift + I

Dan kalian dapat lebih mudah dalam merapihkan kode kalian dari yang awalnya berantakan bisa menjadi rapih dengan format dokumen kalian menggunakan ekstensi prettier ini, that’s very cool at all.

Path Intellisense & Error lens

Path Intellisense

kita mulai dulu dari path intellisense, Path Intellisense adalah ekstensi di VSCode yang membantu Anda dengan autocompletion untuk jalur file dan direktori. Ini sangat berguna ketika Anda mengerjakan proyek yang melibatkan banyak file, karena Anda tidak perlu mengetikkan jalur file secara manual. Sebagai gantinya, ekstensi ini memberikan saran otomatis berdasarkan file dan folder yang ada di proyek Anda.

Cara Kerjanya:

1. Autocompletion: Saat Anda mengetikkan jalur file atau direktori dalam kode Anda, Path Intellisense akan menampilkan daftar saran yang sesuai dengan file dan folder yang ada dalam proyek Anda.
2. Penelusuran Jalur: Ini memungkinkan Anda untuk dengan mudah menavigasi jalur relatif dan absolut, serta memastikan bahwa jalur yang Anda ketikkan benar.
3. Dynamic Suggestions: Ekstensi ini secara otomatis memperbarui daftar saran saat Anda menambahkan atau menghapus file dan folder dalam proyek.

Penggunaan Umum:

• Dalam file HTML, saat Anda mengaitkan file CSS atau JavaScript.
• Dalam file konfigurasi seperti webpack.config.js atau tsconfig.json untuk menentukan jalur file.

Error Lens

Kedua kita memiliki ekstensi yang bernama Error Lens, Apa itu? Apa yang bisa kita dapatkan dengan ekstensi tersebut? begini penjelasannya! Error Lens adalah ekstensi yang membantu Anda dalam melihat dan mengelola kesalahan dan peringatan di kode Anda dengan lebih efisien. Ekstensi ini meningkatkan visibilitas pesan kesalahan dan peringatan dengan menyorot baris kode yang bermasalah dan menampilkan informasi kesalahan secara lebih jelas.

Cara Kerjanya:

1. Highlighting: Error Lens menyoroti baris kode yang memiliki kesalahan atau peringatan. Ini membuatnya lebih mudah untuk melihat di mana masalah terjadi tanpa harus mencari di panel masalah atau jendela terminal.
2. Inline Messages: Alih-alih hanya menampilkan pesan kesalahan di panel bawah, Error Lens menampilkan pesan kesalahan dan peringatan di dekat baris kode yang terkait. Ini memberikan konteks langsung dan memungkinkan Anda untuk memperbaiki masalah dengan cepat.
3. Customizable: Anda dapat menyesuaikan tampilan dan gaya highlighting sesuai preferensi Anda, seperti mengubah warna atau format pesan kesalahan dan peringatan.

Penggunaan Umum:

• Selama pengembangan kode, saat Anda ingin segera mengetahui dan memperbaiki kesalahan sintaksis atau logika.
• Membantu dalam mempercepat debugging dengan memberikan umpan balik visual yang lebih langsung.

Kedua ekstensi ini meningkatkan alur kerja pengembangan dengan membuatnya lebih mudah untuk menavigasi jalur file dan menangani kesalahan secara efisien. Jika Anda bekerja dengan VSCode secara rutin, menggunakan ekstensi ini dapat sangat mempercepat dan mempermudah proses pengkodean Anda.

Live Server & Live Preview

kalau kalian sedang mencari preview yang dapat secara live dilihat maka saya memiliki 2 opsi yakni Live Server Dan Live Preview namun kedua ini memiliki sedikit perbedaan, mari kita simak penjelasan berikut! Live Server dan Live Preview adalah dua ekstensi untuk Visual Studio Code (VSCode) yang dirancang untuk meningkatkan pengalaman pengembangan web dengan memberikan pratinjau langsung dari halaman web yang Anda kerjakan. Meskipun keduanya memiliki fungsi serupa, mereka memiliki fitur dan cara kerja yang sedikit berbeda tapi bisa kalian install keduanya itu tidak ada masalah.

Live Server

Live Server adalah ekstensi VSCode yang memungkinkan Anda untuk menyajikan halaman web Anda secara langsung di browser dan secara otomatis memperbarui tampilan browser setiap kali Anda menyimpan perubahan di kode Anda.

Cara Kerjanya:

1. Mengaktifkan Server: Setelah menginstal ekstensi Live Server, Anda dapat memulai server lokal dengan mengklik tombol “Go Live” di pojok kanan bawah jendela VSCode atau dengan menggunakan perintah dari Command Palette (Ctrl+Shift+P atau Cmd+Shift+P di macOS) dan mencari "Live Server: Open with Live Server".
2. Auto-Reload: Live Server secara otomatis memonitor perubahan pada file Anda dan menyegarkan browser setiap kali Anda menyimpan perubahan, sehingga Anda bisa melihat hasilnya secara real-time.
3. Port Konfigurasi: Secara default, Live Server menggunakan port 5500, tetapi Anda dapat mengonfigurasinya jika diperlukan.

Kelebihan:

• Instan Preview: Menyediakan pratinjau langsung dari halaman web tanpa harus menyegarkan browser secara manual.
• Sederhana dan Cepat: Mudah diatur dan digunakan, ideal untuk pengembangan frontend.

Kekurangan:

• Terbatas pada Kebutuhan Server: Hanya cocok untuk pengembangan lokal dan mungkin tidak menawarkan fitur server yang lebih kompleks.

Live Preview

Live Preview adalah ekstensi yang lebih baru dan sering dianggap sebagai alternatif dari Live Server. Ia menyediakan pratinjau langsung halaman web Anda dengan beberapa fitur tambahan.

Cara Kerjanya:

1. Live Preview: Setelah menginstal ekstensi Live Preview, Anda dapat memulai pratinjau langsung dari file HTML dengan mengklik tombol “Open Preview to the Side” atau menggunakan perintah dari Command Palette.
2. Previews in Split View: Live Preview memungkinkan Anda melihat tampilan halaman web dalam panel terpisah di jendela VSCode, yang memungkinkan Anda bekerja di editor dan pratinjau secara bersamaan.
3. Automatic Reload: Seperti Live Server, Live Preview juga secara otomatis menyegarkan tampilan ketika Anda melakukan perubahan pada file.

Kelebihan:

• Integrasi yang Baik dengan VSCode: Menyediakan pengalaman yang lebih terintegrasi dalam lingkungan VSCode dengan tampilan yang seringkali lebih baik.
• Mendukung Berbagai Jenis File: Selain HTML, sering kali juga mendukung berbagai format file lain yang dapat Anda pratinjau secara langsung.

Kekurangan:

• Kurang Populer: Meskipun semakin populer, Live Preview mungkin tidak memiliki fitur atau dukungan yang sama luasnya seperti Live Server di beberapa kasus.

Pilihan Antara Keduanya:

• Jika Anda membutuhkan solusi yang cepat dan sederhana untuk pratinjau halaman web di browser dengan pembaruan otomatis, Live Server adalah pilihan yang solid.
• Jika Anda lebih suka pengalaman pratinjau yang terintegrasi langsung di dalam VSCode dan seringkali ingin menghindari penggunaan browser eksternal, Live Preview bisa menjadi opsi yang lebih baik.

Keduanya sangat berguna dan dapat mempercepat alur kerja pengembangan web, jadi pilihan antara keduanya dapat tergantung pada preferensi pribadi dan kebutuhan spesifik proyek Anda.

Tema & Icon (Opsional tapi saya butuh tampilan yang cantik)

Mengingat kita semua menggunakan vscode tak jarang rasanya kita bosan dengan tampilan default nya hanya karena tampilannya begitu begitu saja, tapi tenang kali ini saya akan berikan rekomendasi beberapa tema dan icon yang bisa kalian cari cari sendiri tentunya dengan melihat rekomendasi tema dan icon dibawah ini agar supaya kalian dapat dengan lebih mudah memilih sesuai keinginan kalian, saya sendiri disini menggunakan tema dari noctis dengan temanya noctis minimus dengan material icon, kalian bisa ikuti dengan sama seperti saya atau memilih rekomendasi lain dengan melihat bagian dibawah saya ini

Tema VSCode

1. One Dark Pro

• Deskripsi: Salah satu tema gelap paling populer di VSCode. Terinspirasi oleh tema One Dark dari Atom.
• Fitur: Warna yang kontras dengan teks yang mudah dibaca, desain yang bersih.
• Link: One Dark Pro

1. Dracula Official

• Deskripsi: Tema gelap dengan palet warna yang sangat kontras dan mata nyaman.
• Fitur: Cocok untuk coding larut malam dengan dukungan luas untuk banyak bahasa pemrograman.
• Link: Dracula Official

1. Solarized Dark

• Deskripsi: Tema dengan skema warna Solarized, dirancang untuk mengurangi kelelahan mata.
• Fitur: Warna-warna lembut dan kontras rendah yang nyaman untuk mata.
• Link: Solarized Dark

1. Nord

• Deskripsi: Tema dengan palet warna dingin yang terinspirasi oleh alam Nordik.
• Fitur: Warna-warna dingin yang menenangkan, desain modern.
• Link: Nord

1. Ayu

• Deskripsi: Tema yang menawarkan tiga variasi warna (Light, Mirage, dan Dark).
• Fitur: Desain yang bersih dan mudah dibaca dengan opsi tema yang fleksibel.
• Link: Ayu

Ikon VSCode

1. Material Icon Theme

• Deskripsi: Menambahkan ikon yang jelas dan konsisten untuk berbagai jenis file dan folder.
• Fitur: Ikon yang terinspirasi dari Material Design, sangat populer.
• Link: Material Icon Theme

1. vscode-icons

• Deskripsi: Mengubah ikon file dan folder dengan desain yang bersih dan beragam.
• Fitur: Menyediakan ikon yang dapat diubah sesuai dengan berbagai jenis file.
• Link: vscode-icons

1. Seti Icons

• Deskripsi: Tema ikon yang stylish dengan desain yang modern dan beragam.
• Fitur: Ikon dengan warna-warna cerah dan desain yang menarik.
• Link: Seti Icons

1. Octicons

• Deskripsi: Ikon dengan gaya GitHub Octicons yang bersih dan mudah dikenali.
• Fitur: Desain minimalis dan konsisten dengan gaya GitHub.
• Link: Octicons

1. Codicons

• Deskripsi: Ikon default dari VSCode yang menawarkan simbol yang sederhana dan jelas.
• Fitur: Ikon yang digunakan dalam VSCode, sederhana dan fungsional.
• Link: Codicons

Tips Menggunakan Tema dan Ikon:

• Kombinasikan dengan Cermat: Pilih tema dan ikon yang saling melengkapi. Misalnya, tema gelap seringkali bekerja dengan baik dengan ikon yang lebih terang dan sebaliknya.
• Cobalah Beberapa: Jangan ragu untuk mencoba beberapa tema dan ikon untuk melihat mana yang paling nyaman untuk Anda.
• Kustomisasi: VSCode memungkinkan kustomisasi lebih lanjut, seperti menyesuaikan warna tema atau mengubah ikon, jadi manfaatkan fitur ini jika diperlukan.

Dengan memilih tema dan ikon yang sesuai, Anda bisa menciptakan lingkungan pengembangan yang tidak hanya produktif tapi juga menyenangkan untuk digunakan!

Penutup

Okay kurang lebih segitu dulu rekomendasi dari saya dan nantinya kalian sendiri lah yang dapat memilih sesuai dengan preferensi anda semuanya bagi saya mungkin segitu dulu nantinya kita akan bahas seputar programming web cara memanfaatkan shortcut emmet didalam vscode

Sekian, Terima kasih