Cara Menyesuaikan Kode Visual Studio

Visual Studio Code, editor kode sumber terbuka baru dari Microsoft menyediakan banyak fitur luar biasa kepada pengembang memfasilitasi proses pengeditan kode sumber. Selain itu, Visual Studio Code juga memastikan pengguna tidak akan bosan ketika mereka bekerja dengannya, karena memungkinkan mereka untuk melakukannya menyesuaikan beberapa bagian dari penampilannya, seperti warna, font, spasi, dan pemformatan teks, sama seperti banyak fungsi, seperti linting dan aturan validaton.

Dalam posting ini, pada awalnya kita akan melihat cara mengubah tampilan dari ruang kerja Visual Studio Code, maka saya akan menunjukkan kepada Anda bagaimana menyesuaikan pengaturan default dengan bantuan dua JSON-file konfigurasi yang diformat.

Cara Mengatur Tema Warna pada Kode VS

Visual Studio Code memungkinkan Anda untuk melakukannya mengatur tema warna khusus untuk editor Anda.

Untuk menggunakan tema yang sudah dibuat sebelumnya, klik pada File> Preferensi> Tema Warna menu di bilah menu atas. Ketika Anda menekan “Memasukkan”, Command Palette muncul, dan menampilkan daftar dropdown dari tema yang dapat Anda pilih.

Anda dapat mencapai efek yang sama jika Anda menekan F1 untuk membuka Command Palette, dan ketik Preferensi: Tema Warna perintah ke bidang input.

Ketika Anda menggulingkan opsi dalam daftar dropdown, tampilan ruang kerja berubah secara real-time, sehingga Anda dapat dengan cepat melihat tema mana yang paling sesuai dengan kebutuhan Anda.

Saya memilih “Kontras tinggi” tema warna, karena mata saya bukan yang terbaik. Seperti inilah tampilan saya.

Cara Memasang Tema dari VS Code Marketplace

Jika Anda tidak menyukai salah satu tema warna yang ditawarkan VS Code secara default, Anda dapat mengunduh banyak lainnya dari VS Code Marketplace.

Di sini Anda dapat melihat tema-tema yang dimiliki Marketplace saat ini. Jika Anda ingin memasang tema dari Marketplace, tekan F1 tepat di dalam editor Kode VS Anda untuk membuka Command Palette, lalu ketik ext instal perintah ke dalam kolom input, akhirnya pilih Ekstensi: Instal Ekstensi pilihan dari daftar yang muncul.

Ketika Anda mengklik opsi ini, contoh baru dari Palet Perintah muncul. Ketikkan "ext install theme" perintah ke bidang input baru, dan Anda akan dapatkan daftar semua tema yang tersedia dari VS Code Marketplace.

Saya memilih tema yang disebut “Perangkat Tema Bahan”, dan instal dengan mengkliknya. Untuk memiliki tema baru dalam daftar Tema Warna, di tempat yang sama dengan tema default lainnya, Anda harus melakukannya restart VS Code. Setelah memulai kembali, tema baru muncul di daftar tema, dan Anda dapat mengaturnya dari Command Palette.

Dengan Tema Material baru, editor saya sekarang terlihat seperti ini:

Anda dapat kembali ke tema sebelumnya (seperti yang saya lakukan, karena saya masih lebih suka tema itu) atau Anda dapat bermain-main lagi dengan tema lain untuk melihat mana yang paling cocok untuk Anda.

Jika mau, Anda juga bisa buat tema khusus Anda, dan menerbitkannya di VS Code Marketplace dengan menggunakan alat pengelola ekstensi VSce.

Ubah Pengaturan Pengguna dan Workspace

Kode VS tidak hanya memungkinkan Anda untuk mengatur tema khusus, tetapi Anda juga bisa konfigurasikan banyak pengaturan lainnya, seperti aturan pemformatan, penggunaan berbagai fitur, laporan kerusakan, pengaturan HTTP, asosiasi file, aturan linting, dan banyak lagi.

Anda dapat melakukan ini dengan mengedit dua file konfigurasi, keduanya dalam format JSON. Jangan khawatir, Anda tidak perlu menjadi profesional, karena VS Code menawarkan cara yang mudah dan intuitif untuk menambahkan kustomisasi Anda dengan cepat.

Pada awalnya, mari kita lihat apa perbedaan antara dua file konfigurasi. Kode VS memiliki dua cakupan (global dan lokal) untuk pengaturan, maka dua file terpisah:

1. global pengaturan.json, di mana aturan konfigurasi berlaku untuk setiap ruang kerja
2. terkait dengan ruang kerja .vscode / settings.json, itu hanya terkait dengan ruang kerja individu

Itu global pengaturan.json file dapat ditemukan di folder tempat sistem operasi Anda menyimpan setiap file konfigurasi terkait aplikasi lainnya, masing-masing:

• di Windows: % APPDATA% \ Code \ User \ settings.json
• di Linux: $ HOME / .config / Code / User / settings.json
• di Mac: $ HOME / Perpustakaan / Dukungan Aplikasi / Kode / Pengguna / settings.json

Itu terkait ruang kerja pengaturan.json file disimpan dalam folder proyek Anda saat ini. Secara default, file ini tidak ada, tetapi segera setelah Anda menambahkan Pengaturan Workspace kustom, VS Code menciptakan .vscode / settings.json file sekaligus, dan tempatkan konfigurasi khusus ruang kerja khusus ke dalamnya.

Jadi kapan Anda menggunakan pengaturan.json file?

Jika Anda ingin VS Code menggunakan aturan konfigurasi khusus di semua proyek Anda, masukkan ke dalam global pengaturan.json mengajukan.

Jika Anda ingin pengaturan Anda hanya valid di proyek saat ini, menempatkan mereka ke dalam ruang kerja yang terkait pengaturan.json mengajukan.

Pengaturan ruang kerja menimpa pengaturan global, jadi berhati-hatilah.

Pengaturan global disebut “Pengaturan pengguna” dalam VS Code. Buka keduanya dengan mengklik File> Preferensi> Pengaturan Pengguna menu, atau dengan mulai mengetik ekspresi “Pengaturan pengguna” ke dalam Palette Perintah (buka dengan F1).

Kode VS membuka dua panel di sebelah satu sama lain: yang kiri berisi semua opsi yang mungkin untuk dikonfigurasi, dan yang kanan menampilkan global pengaturan.json mengajukan. Anda perlu menempatkan aturan konfigurasi khusus ke file ini.

Seperti yang Anda lihat, Anda tidak perlu melakukan hal lain, cukup salin dan tempel pengaturan yang ingin Anda ubah dari sisi kiri ke kanan, dan tambahkan nilai yang dimodifikasi.

Mari kita lihat contoh singkat (tetapi Anda dapat membuat modifikasi lain sesuai dengan kebutuhan pribadi Anda). Saya akan mengubah keluarga font, mengurangi panjang a tab dari default empat spasi menjadi dua, kurangi jumlah maksimum file yang berfungsi dari sembilan menjadi lima, dan ubah salah satu aturan linting CSS tentang gaya duplikat dari "mengabaikan" untuk "peringatan".

Setelah copy paste, global saya pengaturan.json file terlihat seperti ini:

 // Tempatkan pengaturan Anda di file ini untuk menimpa pengaturan default "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "peringatan" 

Setelah menyimpan yang dimodifikasi pengaturan.json file, penampilan editor saya berubah sekaligus (pada tangkapan layar di bawah ini hanya perubahan font yang terlihat):

Anda dapat mengubah Pengaturan Workspace dengan cara yang sama. Sekarang Anda perlu mengklik File> Preferensi> Pengaturan Workspace di bilah menu atas untuk mengakses yang terkait dengan ruang kerja .vscode / settings.json mengajukan.

Pengaturan Workspace memiliki opsi konfigurasi yang sama persis dengan Pengaturan Pengguna, dan Anda dapat menggunakan teknik menempel-salin. Hanya ada dua perbedaan, cakupan (lokal bukan global), dan pengaturan.json file di mana konfigurasi khusus Anda akan disimpan.