Vscode adalah sahabat developer seperti kita semua
halo temen-temen semua, kali ini kita akan bahas seputaran konfigurasi berserta dengan beberapa ekstensi yang dapat membantu kita dalam melakukan sesi pembelajaran seputar web developer khususnya bagi yang sedang mencari cara agar menggunakan visual studio code dapat lebih cepat dan mudah bagi temen temen yang sedang belajar web programming. Di sesi kita kali ini saya akan bagi dua cabang yang pertama adalah konfigurasi didalam visual studio code nya mulai dari mengatur estetika hingga dengan mempermudah kalian dalam proses membuat website.
Konfigurasi Tampilan Awal
Ada kala dimana kita sedang ingin mengerjakan programming menggunakan visual studio code terasa memusingkan hanya karena tampilan diawalnya saja begitu ramai sekali which is saya tidak menyukai tampilan yang ramai dan saya ingin tampilan yang simple dan to the point, hal ini juga yang membuat beberapa orang tidak menyukainya dan maka dari itu saya akan buat visual studio code yang saya miliki terlihat lebih simple. Oh ya sebagai catatan desktop yang saya gunakan saat ini adalah ubuntu, bagi kalian yang menggunakan windows ataupun mac itu tidak jadi masalah karena softwarenya tetap sama
1. Berhentikan Welcome Page Agar Lebih Rapih
Di bagian atas terlihat sangat ramai sekali dan simple nya halaman home nantinya kita tidak perlukan lagi, maka dari itu kita dapat unchecklist bagian yang ada di bawah yaitu “Show welcome page on startup” agar tampilan berikut tidak terbuka lagi ketika kita membuka vscode nya lagi
2. Sidebar secara horizontal
Bagian ini adalah preferensi masing masing karena saya tidak menyukai sidebar yang menetap disamping maka dari itu tampilannya akan saya ubah dari yang awalnya seperti diatas saya akan ubah tampilannya menjadi dibawah agar supaya tampilan vscode nya jauh lebih rapih lagi dan lebih cantik lagi, lagipula saya lebih terbiasa menggunakan shortcut yang sudah ada didalam vscodenya hanya karena shortcut seperti yang kita tau adalah sebuah pintasan yang mampu membantu kita bekerja dengan lebih cepat dan juga lebih enak pokoknya buat kita kerja, bagi yang mau tau caranya adalah
- Klik kanan pada sidebar
- Klik Activity bar position
- Pilih bagian yang bottom
Dan ketika sudah maka tampilan iconnya akan seperti ini
3. Lakukan modifikasi dibagian menu bar
Saya akan buka satu contoh project web sederhana dimana ini masih kosong dan saya hanya berikan satu template sederhana di html dan kalian bisa lihat bagaimana vscode terlalu ramai ditampilannya yang mana saya tidak suka, coba lihat bagian yang saya screenshot dibawah ini
Kita akan hapus bagian yang diatas seperti minimap dan juga bagian yang ada diatas yang disebut dengan breadcrumbs yang mana sebenarnya hal ini bisa kita hapus saja agar tampilannya jauh lebih clean dan rapih sehingga kita bisa dengan lebih enak melihat kodenya dengan jauh lebih lega daripada yang sekarang mari kita rapihkan terlebih dahulu cara nya adalah ke bagian view diatas setelah itu kebagian appearance
Kalau kalian sudah maka seharusnya tampilan yang kalian dapatkan kurang lebih seperti ini
dan silahkan kalian uncheck dibagian minimap, toggle breadcrumbs dan sticky scrollnya agar supaya kalau kalian memiliki struktur html yang kompleks maka tidak menempel dan mengganggu. Oh ya disini saya juga mematikan bagian menunya agar tidak terlihat sempit dan setelah sudah maka ini lah yang akan kalian lihat
Terlihat lebih rapih bukan? kalau sudah maka kita akan modifikasi tampilan sidebarnya dengan menghilangkan bagian outline dan juga timeline agar tidak terlihat ramai, dengan cara klik kanan di outline dan unchecklist, berlaku juga dengan timeline.
Kalian matikan dan biarkan tidak ada agar sidebar menjadi lebih kosong dan menyisakan isi folder kalian saja agar jauh lebih lega daripada sebelumnya.
Hasil nya seperti apa sekarang?
jika kalian penasaran hasilnya seperti apa setelah kita lakukan modifikasi sederhana dengan visual studio code maka tampilannya akan seperti dibawah ini
Terlihat minimalist dan clean tentunya, tapi kita masih bisa modifikasi lagi seperti memperbesar dan memperkecil huruf, memberikan jarak serta memberikan smoothness pada bagian tempat kita menuliskan kode agar jauh terlihat lebih halus lagi tentunya dengan cara berikut
Sekedar tambahan kita juga bisa hide bagian atas agar lebih kosong dengan cara klik kanan dibagian atas dan matikan centang yang ada diatas
maka tampilannya akan seperti ini
dan saya akan langsung matikan saja agar lebih kosong dan mungkin saya akan hide bagian atasnya ketika tutorial ini sudah selesai. Kalau penasaran apabila saya hide bagian custom title bar nya kalian bisa lihat gambar dibawah ini
Pergi ke setting yang ada di pojok kanan layar lalu pergi ke settings atau kalian bisa menggunakan shortcut ctrl + , agar lebih cepat
Jika sudah maka akan tampil seperti yang ada digambar dibawah ini
1. Perbesar ukuran font
Langsung saja dibagain perbesar font kalian bisa perbesar font kalian langsung diawal setting dengan cara lihat digambar yang sudah saya screenshot diatas dengan cara kita perbesar dari yang 14px mungkin 20px tidak ada masalah agar font terlihat lebih besar seperti berikut
dan maka hasilnya akan seperti berikut
2. Berikan jarak antar baris atas dan bawah
ketika kita ingin melakukan programming dengan lebih nyaman tak ada salahnya kita memberikan jarak atas dan bawah sedikit lebih renggang dengan cara di setting kita cari line height dan berikan sedikit line height seperti 3px sampai 4px agar lebih renggang dan lebih lega kita lihatnya
dan kurang lebih setelah kita berikan 4px maka tampilannya akan jauh lebih renggang lagi
Sesuaikan preferensi mu dibagian ini tapi kalau bagi saya 4 sudah cukup mungkin jika ingin sedikit lebih rapat kalian bisa berikan sekitar 2–3 saja sudah cukup.
3. Berikan efek smooth
Mungkin hal ini terdengar seperti lucu hanya karena saya ingin suka coding dengan suasana yang smooth disegala sisinya maka dari itu caranya adalah coba cari dibagian setting dengan kata kunci smooth dan maka ini yang akan kalian dapatkan
Dan maka dari itu saya akan beri centang kesemua agar supaya di dalama code editor bahkan sampai ke bagian sidebar dan terminal akan lebih smooth lagi ketika kita scroll, Jangan lupa juga aktifkan bagian cursor caret agar terasa ketika kita mengetikan sesuatu seperti ada animasi yang berjalan serta dibagian cursor blinking saya akan pilih expand agar supaya lebih smooth lagi
4. Autosave agar tidak terjadi drama lupa save
sama seperti 3 diatas, coba kalian search yang namanya afterDelay dan berikan respon sebesar 10ms atau 1ms, maka nantinya yang akan terjadi, project kalian akan auto save setiap 10ms, which is that is what we want apa bila kita takut project kita hilang hanya karena kita lupa melakukan save dalam project kita
5. Mouse Zoom In And Out
kadang kala kita ingin memperbesar ukuran font didalam code editor kita maka solusi yang akan kita kerjakan adalah melakukan masuk lagi ke setting hanya untuk memperbesar dan memperkecil font dan itu tidak efisien bahkan terasa seperti lebih lambat, maka dari itu kita akan melakukan konfigurasi dengan cara mengetikan Mouse Wheel Zoom agar supaya kita bisa melakukan memperbesar dan memperkecil font dengan cara menekan ctrl kiri pada keyboard dan scroll keatas atau kebawah untuk memperbesar dan memperkecil tulisannya
Apabila kalian centang keduanya maka hal ini dapat dimanfaatkan yang satu untuk bagian bawah untuk terminal di visual studio code dan bagian atas satu lagi adalah bagian untuk code editor.
Settings.json -> kalian bisa langsung copy & paste
dibagian ini jika kalian sudah membacanya namun konfigurasinya ternyata berbeda dengan yang saya miliki maka tenang saja kalian masih dengan mudah dapat mengikuti konfigurasi yang saya miliki dengan cara
- tekan ctrl + shift + p
- ketik >Preferences: Open User Settings(json)
kalau sudah maka silahkan copy dan code dibawah setelah itu replace bagian yang ada di settings.json kalian
{
"workbench.startupEditor": "none",
"workbench.activityBar.location": "bottom",
"editor.minimap.enabled": false,
"breadcrumbs.enabled": false,
"editor.stickyScroll.enabled": false,
"window.menuBarVisibility": "toggle",
"editor.fontSize": 20,
"window.commandCenter": false,
"workbench.layoutControl.enabled": false,
"editor.lineHeight": 4,
"editor.cursorSmoothCaretAnimation": "on",
"workbench.list.smoothScrolling": true,
"editor.smoothScrolling": true,
"terminal.integrated.smoothScrolling": true,
"editor.cursorBlinking": "expand",
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 10,
"editor.mouseWheelZoom": true,
"terminal.integrated.mouseWheelZoom": true
}Namun jika kalian ingin melihat konfigurasi saya, maka kalian bisa lihat kode dibawah yang mana ini menjadi salah satu settingan favorit saya ketika saya harus mengerjakan project web ataupun sedang mengajar, terkadang konfigurasi ini opsional bisa di ikuti atau tidak tapi saya biasanya membuat settingan ini hanya karena saya sudah terbiasa, jadi kalau kalian tidak terbiasa lebih baik dipelajari terlebih dahulu! Berikut source code dari setting saya
{
"window.commandCenter": false,
"workbench.layoutControl.enabled": false,
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 10,
"editor.stickyScroll.scrollWithEditor": false,
"workbench.tree.enableStickyScroll": false,
"editor.hover.sticky": false,
"editor.stickyScroll.enabled": false,
"editor.cursorSmoothCaretAnimation": "on",
"workbench.list.smoothScrolling": true,
"editor.smoothScrolling": true,
"terminal.integrated.smoothScrolling": true,
"editor.cursorBlinking": "smooth",
"editor.lineHeight": 4,
"editor.mouseWheelZoom": true,
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"workbench.startupEditor": "none",
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Parsinta Exclusive",
"breadcrumbs.enabled": false,
"editor.minimap.enabled": false,
"window.menuBarVisibility": "toggle",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"explorer.confirmDelete": false,
"terminal.integrated.defaultProfile.windows": "Git Bash",
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.donotShowInfoMsg": true,
"explorer.confirmPasteNative": false,
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.statusBar.visible": false,
"workbench.activityBar.location": "hidden",
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.guides.indentation": false,
"workbench.editor.showTabs": "none",
"workbench.editor.editorActionsLocation": "hidden",
"editor.lineNumbers": "off",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}Apa maksud dari kode diatas?
Penjelasan dari konfigurasi yang saya buat kurang lebih seperti ini, oh ya jika kalian ingin menggunakan settingan yang ada diatas maka saya sarankan langsung copy yang diatas saja karena yang bawah ini terlalu panjang dan nantinya kalian bisa pelajari sendiri dan beberapa konfigurasi membuat vscode saya terlihat simple dan kalau kalian tidak terbiasa maka tidak jadi masalah, ini hanya karena saya suka tampilan yang minimalist dan clean tentunya dimana disaat nanti saya harus jadi pengajar, atau disaat saja bekerja bahkan disaat saya sedang kuliah maka ini lah tampilan yang mungkin teman-teman saya, beberapa murid saya dan juga beberapa orang akan lihat kalau saya membuat tutorial seperti apa tampilan vscode saya. sekali lagi saya tekankan jangan di ikuti kalau kalian tidak terbiasa karena saya hanya sharing. Kita lanjut lihat penjelasan dari code json saya yang diatas dan berikut penjelasannya
{
// Menonaktifkan Command Center yang muncul pada menu di macOS atau Linux
"window.commandCenter": false,
// Menonaktifkan kontrol tata letak di Workbench
"workbench.layoutControl.enabled": false,
// Mengatur auto-save untuk menyimpan file setelah delay tertentu
"files.autoSave": "afterDelay",
// Menentukan delay dalam milidetik sebelum file disimpan secara otomatis
"files.autoSaveDelay": 10,
// Menonaktifkan sticky scroll pada editor, sehingga scroll tidak mengikuti editor
"editor.stickyScroll.scrollWithEditor": false,
// Menonaktifkan sticky scroll pada tree view di Workbench
"workbench.tree.enableStickyScroll": false,
// Menonaktifkan sticky hover pada editor
"editor.hover.sticky": false,
// Menonaktifkan sticky scroll pada editor
"editor.stickyScroll.enabled": false,
// Mengaktifkan animasi caret yang halus pada editor
"editor.cursorSmoothCaretAnimation": "on",
// Mengaktifkan smooth scrolling pada list di Workbench
"workbench.list.smoothScrolling": true,
// Mengaktifkan smooth scrolling pada editor
"editor.smoothScrolling": true,
// Mengaktifkan smooth scrolling pada terminal
"terminal.integrated.smoothScrolling": true,
// Mengatur blinking caret pada editor menjadi smooth
"editor.cursorBlinking": "smooth",
// Menentukan tinggi baris di editor menjadi 4px
"editor.lineHeight": 4,
// Mengaktifkan zoom dengan mouse wheel pada editor
"editor.mouseWheelZoom": true,
// Mengaktifkan format otomatis pada saat menyimpan file
"editor.formatOnSave": true,
// Mengaktifkan format otomatis pada saat menempelkan teks
"editor.formatOnPaste": true,
// Menonaktifkan editor startup (halaman yang ditampilkan saat VSCode dibuka)
"workbench.startupEditor": "none",
// Mengatur tema ikon Workbench ke "material-icon-theme"
"workbench.iconTheme": "material-icon-theme",
// Mengatur tema warna Workbench ke "Parsinta Exclusive"
"workbench.colorTheme": "Parsinta Exclusive",
// Menonaktifkan breadcrumbs di editor
"breadcrumbs.enabled": false,
// Menonaktifkan minimap di editor
"editor.minimap.enabled": false,
// Mengatur visibilitas menu bar menjadi toggle (dapat ditampilkan atau disembunyikan)
"window.menuBarVisibility": "toggle",
// Menentukan format default untuk file HTML menggunakan Prettier
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// Menonaktifkan konfirmasi saat menghapus file di Explorer
"explorer.confirmDelete": false,
// Mengatur profil default terminal pada Windows ke "Git Bash"
"terminal.integrated.defaultProfile.windows": "Git Bash",
// Menonaktifkan verifikasi tag pada Live Server
"liveServer.settings.donotVerifyTags": true,
// Menonaktifkan info message pada Live Server
"liveServer.settings.donotShowInfoMsg": true,
// Menonaktifkan konfirmasi saat menempelkan file di Explorer
"explorer.confirmPasteNative": false,
// Menentukan format default untuk file CSS menggunakan Prettier
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// Menentukan format default untuk file JSONC menggunakan Prettier
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// Menonaktifkan status bar di Workbench
"workbench.statusBar.visible": false,
// Menyembunyikan activity bar di Workbench
"workbench.activityBar.location": "hidden",
// Menentukan format default untuk file Vue menggunakan Prettier
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// Mengatur jenis font editor menjadi "Fira Code"
"editor.fontFamily": "Fira Code",
// Mengaktifkan ligatur font pada editor
"editor.fontLigatures": true,
// Menonaktifkan panduan indentasi di editor
"editor.guides.indentation": false,
// Menyembunyikan tab editor di Workbench
"workbench.editor.showTabs": "none",
// Menyembunyikan lokasi tindakan editor di Workbench
"workbench.editor.editorActionsLocation": "hidden",
// Menonaktifkan nomor baris di editor
"editor.lineNumbers": "off",
// Menentukan format default untuk file JavaScript menggunakan Prettier
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}Penutup
Kurang lebih segitu dulu untuk bagian konfigurasi vscode yang sudah kita lakukan agar kalian dapat melakukan programming dengan jauh lebih mudah lagi dan nanti kita akan bahas seputar ekstensi yang dapat kalian manfaatkan didalam visual studio code untuk web programming kita nanti karena bagian web programming yang saya sering ajarkan itu tidak jauh dari php dan js maka kita akan pindah ke tab selanjutnya.
Sekian, Terima kasih
