Laman » Reka Bentuk Web » Cara Menyesuaikan Kod Visual Studio

    Cara Menyesuaikan Kod Visual Studio

    Kod Studio Visual, editor kod sumber terbuka baru Microsoft menyediakan pemaju dengan banyak ciri hebat yang ketara memudahkan proses penyuntingan kod sumber. Selain itu, Visual Studio Code juga memastikan pengguna tidak akan bosan apabila mereka bekerja dengannya, kerana ia membolehkan mereka menyesuaikan beberapa bahagian penampilannya, seperti warna, fon, jarak, dan pemformatan teks, seperti banyak fungsi, seperti linting dan peraturan validaton.

    Dalam siaran ini, pada mulanya kita akan melihatnya bagaimana untuk mengubah rupa ruang kerja Kod Studio Visual, maka saya akan menunjukkan kepada anda cara menyesuaikan tetapan lalai dengan bantuan dua JSON-fail konfigurasi diformat.

    Bagaimana Menetapkan Tema Warna pada Kod VS

    Kod Studio Visual membolehkan anda tetapkan tema warna tersuai untuk editor anda.

    Untuk meletakkan tema pra-dibuat untuk digunakan, klik pada Fail> Pilihan> Tema Warna menu di bar menu atas. Apabila anda melanda “Masukkan”, Palette Command muncul, dan memaparkan senarai jatuh turun tema yang boleh anda pilih.

    Anda boleh mencapai kesan yang sama jika anda menekan F1 untuk membuka Palet Perintah, dan taipkan Pilihan: Tema Warna arahan ke medan input.

    Semasa anda melancarkan pilihan dalam senarai jatuh turun, penampilan ruang kerja berubah masa nyata, jadi anda boleh dengan cepat melihat tema mana yang sesuai dengan keperluan anda yang terbaik.

    Saya chooe itu “Kontras tinggi” tema warna, kerana mata saya bukan yang terbaik. Berikut adalah pandangan saya.

    Cara Pasang Tema dari Marketplace Code VS

    Sekiranya anda tidak suka mana-mana tema warna VS Code menawarkan secara lalai, anda boleh memuat turun banyak lagi dari VS Code Marketplace.

    Di sini anda boleh melihat tema yang ada di pasaran saat ini. Jika anda mahu memasang tema dari Marketplace, tekan F1 tepat di dalam editor Kod VS anda untuk membuka Palet Perintah, kemudian taipkan pemasangan pas arahan ke medan input, akhirnya pilih Sambungan: Pasang Pelanjutan pilihan dari senarai yang muncul.

    Apabila anda mengklik pilihan ini, contoh Palette Command muncul. Taipkan "ext memasang tema" arahan ke medan input baru, dan anda akan dapatkan senarai semua tema yang boleh didapati dari Marketplace Code VS.

    Saya memilih tema yang dipanggil “Kit Tema Bahan”, dan pasangkannya dengan mengklik padanya. Untuk mempunyai tema baru dalam senarai Warna Tema, di tempat yang sama di mana tema lalai lain adalah, anda perlu mulakan semula Kod VS. Setelah memulakan semula, tema baru muncul dalam senarai tema, dan anda boleh menetapkannya dari Palet Perintah.

    Dengan Tema Bahan baru, editor saya kini kelihatan seperti ini:

    Anda boleh kembali ke tema sebelumnya (seperti yang saya lakukan, kerana saya masih lebih suka tema itu) atau anda boleh bermain lebih lanjut dengan tema lain untuk melihat yang paling sesuai untuk anda.

    Jika anda mahu, anda juga boleh buat tema tersuai anda, dan menyiarkannya di VS Code Marketplace dengan menggunakan alat pengurus sambungan vsce.

    Tukar Tetapan Pengguna dan Ruang Kerja

    Kod VS bukan sahaja membenarkan anda menetapkan tema tersuai, tetapi anda juga boleh konfigurasikan banyak tetapan lain, seperti peraturan pemformatan, penggunaan ciri-ciri yang berbeza, laporan ranap, tetapan HTTP, persatuan fail, peraturan linting, dan banyak lagi.

    Anda boleh melakukan ini dengan mengedit dua fail konfigurasi, dalam format JSON. Jangan risau, anda tidak perlu menjadi pro, seperti Kod VS menawarkan cara yang cukup mudah dan intuitif untuk menambahkan penyesuaian dengan cepat.

    Pada mulanya, mari kita lihat apa perbezaan antara kedua-dua fail konfigurasi. Kod VS mempunyai dua skop (global dan tempatan) untuk tetapan, dengan itu kedua-dua fail yang berasingan:

    1. yang global settings.json, di mana peraturan konfigurasi sah untuk setiap ruang kerja
    2. yang berkaitan dengan ruang kerja .vscode / settings.json, itu hanya berkaitan dengan ruang kerja individu

    The global settings.json fail boleh didapati di folder di mana sistem operasi anda menyimpan setiap fail konfigurasi yang berkaitan dengan aplikasi, masing-masing:

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

    The berkaitan dengan ruang kerja settings.json fail disimpan dalam folder projek semasa anda. Secara lalai, fail ini tidak wujud, tetapi sebaik sahaja anda menambah Tetapan Ruang Kerja tersuai, Kod VS mewujudkan .vscode / settings.json fail sekaligus, dan letakkan konfigurasi khusus ruang kerja khusus ke dalamnya.

    Jadi apabila anda menggunakannya settings.json fail?

    Jika anda mahu Kod VS menggunakan peraturan konfigurasi tersuai anda semua projek anda, meletakkannya ke dalam dunia global settings.json fail.

    Sekiranya anda mahu tetapan anda hanya berlaku di dalam anda projek semasa, letakkannya ke ruang kerja yang berkaitan settings.json fail.

    Tetapan ruang kerja mengatasi tetapan global, jadi berhati-hati.

    Tetapan Global dipanggil “Tetapan Pengguna” dalam Kod VS. Buka mereka sama ada dengan mengklik pada Fail> Pilihan> Tetapan Pengguna menu, atau dengan mula menaip ungkapan “Tetapan Pengguna” ke Palet Command (buka dengan F1).

    Kod VS membuka dua panel di sebelah antara satu sama lain: sebelah kiri mengandungi semua pilihan yang mungkin untuk mengkonfigurasi, dan yang betul memaparkan global settings.json fail. Anda perlu meletakkan peraturan tatarajah tersuai anda ke dalam fail ini.

    Seperti yang anda dapat lihat, anda tidak perlu melakukan apa-apa lagi, hanya copy-paste tetapan yang anda ingin ubah dari sebelah kiri ke kanan, dan tambahkan nilai yang diubahsuai.

    Mari kita lihat pada contoh ringkas (tetapi anda boleh membuat pengubahsuaian lain mengikut keperluan individu anda). Saya akan menukar keluarga font, mengurangkan panjang a tab dari empat ruang lalai hingga dua, mengurangkan jumlah maksimum fail kerja dari sembilan hingga lima, dan tukar salah satu kaedah CSS linting mengenai gaya pendua dari "abai" kepada "amaran".

    Selepas menyalin, saya global settings.json fail kelihatan seperti ini:

     // Letakkan tetapan anda dalam fail ini untuk menulis ganti tetapan lalai "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "amaran"

    Selepas menyimpan yang diubah suai settings.json fail, perubahan editor saya sekaligus (pada tangkapan skrin di bawah hanya perubahan keluarga font yang boleh dilihat):

    Anda boleh menukar Tetapan Ruang Kerja sama. Sekarang anda perlu klik pada Fail> Keutamaan> Tetapan Ruang Kerja di bar menu atas untuk mengakses ruang kerja yang berkaitan .vscode / settings.json fail.

    Tetapan Ruang Kerja mempunyai pilihan konfigurasi yang sama seperti Tetapan Pengguna, dan anda boleh menggunakan teknik menyalin salinan yang sama. Terdapat hanya dua perbezaan, skop (tempatan bukan global), dan settings.json fail ke dalam mana konfigurasi tersuai anda akan disimpan.