Bagaimana cara mempercantik javascript dalam kode studio visual?

Di postingan sebelumnya, VS Code. Anda tidak memerlukan ekstensi itu bagian 2, saya membahas bagaimana Anda mungkin tidak memerlukan ekstensi untuk (dengan cantik) memformat kode Anda (lihat item 5). Anda dapat menggunakan pemformat bawaan untuk sejumlah bahasa. Namun, saat itu, saran yang saya berikan memiliki beberapa peringatan

VS Code memiliki pemformat bawaan untuk HTML, JavaScript, TypeScript, dan JSON. Ini adalah dasar yang layak untuk pengembang frontend dan pengembang backend berorientasi JavaScript. Namun, tidak ada apa-apa untuk CSS dan sintaks seperti CSS. Kelalaian besar menurut saya

Ini telah diperbaiki di v1. 66 (Maret 2022). Ekstensi CSS bawaan sekarang disertakan dengan formatter. Pemformat berfungsi dengan CSS, LESS, dan SCSS. Ini diimplementasikan menggunakan perpustakaan JS Beautify. 🌟

Setelan untuk bahasa dengan pemformat bawaan

Untuk menggunakan pemformat bawaan, Anda dapat menambahkan pengaturan berikut ke Pengaturan Anda. json

"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript][javascriptreact][typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json][jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
},
"[css][scss][less]": {
    "editor.defaultFormatter": "vscode.css-language-features"
}

Masuk ke mode layar penuh Keluar dari mode layar penuh

Ini menggunakan , pada November 2021

Karena VS Code menggunakan pustaka JS Beautify, yang juga digunakan oleh ekstensi Beautify, Anda dapat mengharapkan hasil yang serupa dengan ekstensi tersebut. Ini mungkin sesuai selera Anda atau mungkin tidak, tetapi ini berfungsi dengan baik

Jarak tempuh Anda mungkin berbeda untuk pemformatan JSON, itu meminta ekstensi Fitur Bahasa JSON untuk menangani komentar "ilegal", tetapi tampaknya mengelola tanpa masalah. Saya tidak menggunakan React, jadi saya tidak bisa mengomentari seberapa baik kode React diformat

Pengaturan ditambahkan untuk mengontrol pemformatan CSS, LESS, dan SCSS

Anda mengonfigurasi cara pemformatan dilakukan dengan pengaturan berikut

• css.format.enable - Mengaktifkan/menonaktifkan pemformat CSS default
• css.format.newlineBetweenRules - Pisahkan kumpulan aturan dengan baris kosong
• css.format.newlineBetweenSelectors - Pisahkan pemilih dengan baris baru
• css.format.spaceAroundSelectorSeparator - Pastikan karakter spasi di sekitar pemisah pemilih '>', '+', '~' (misalnya, a > b)

Pengaturan yang sama juga ada untuk Less dan SCSS. Mungkin lebih banyak opsi konfigurasi JSBeautify akan diungkap nanti. Kita akan lihat, saya kira

Kata terakhir

Untuk pengembang frontend dan pengembang backend berorientasi JavaScript, pemformat bawaan seharusnya sudah Anda liput sekarang. Selama Anda puas dengan hasilnya, Anda mungkin tidak memerlukan ekstensi pemformatan lainnya

Dan karena, banyak ekstensi dukungan bahasa juga merupakan formatter e. g. Python, Dukungan Bahasa untuk Java oleh Red Hat, Ruby, YAML, XML Tools, Vetur untuk Vue, dan Svelte untuk VS Code. Sekarang, lebih mudah untuk tidak menggunakan ekstensi formatter khusus. 🆒

Dalam tutorial ini, panduan Langkah demi Langkah untuk memformat kode secara otomatis untuk menyimpan secara manual atau otomatis di Visual Studio?

Memformat kode adalah memperindah source code pada code editor menggunakan secara otomatis di save atau secara manual dengan perintah shortcut

perintah pintasan untuk pemformatan Kode

• mulai kode studio visual

• Pilih kode untuk diformat

• Silakan jalankan perintah berikut untuk memformat kode

  • Shift + Alt + F di Windows

  • Shift + Option +F di Mac

  • Ctrl + Shift + I di Linux

Dokumen-dokumen ini memformat seluruh file

Kami juga dapat memformat kode menggunakan pengaturan. json

• Buka File> Preferensi> jendela pengaturan dibuka, Pilih Ruang Kerja
• Buka pengaturan file. json di bawah. folder vscode
• perbarui pengaturan di bawah ini
  • mempercantik. onSave. Ini memungkinkan untuk memformat secara otomatis saat menyimpan setelah mengetik semi-warna atau baris berikutnya
  • editor. formatOnSave. Ini memungkinkan format saat disimpan
  • mempercantik. File JS. memformat jenis file

{
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

Ini adalah contoh format otomatis saat menyimpan file

Bagaimana cara mempercantik kode dalam kode Visual Studio?

Bagaimana cara memformat otomatis JavaScript Visual Studio Code?

Apa yang mempercantik ekstensi untuk kode Visual Studio?