Bagaimana Anda memformat kode dalam Visual Studio Code (VSCode)

Apa yang setara dengan Ctrl+ K+ Fdan Ctrl+ K+ Dpada Windows di Visual Studio untuk memformat, atau kode "mempercantik" dalam editor Visual Studio Code?

Pemformatan kode tersedia dalam Visual Studio Code melalui pintasan berikut:

• Di Windows Shift+ Alt+F
• Di Mac Shift+ Option+F
• Di Linux Ctrl+ Shift+I

Atau, Anda dapat menemukan pintasan, serta pintasan lainnya, melalui 'Palet Perintah' yang disediakan di editor dengan Ctrl+ Shift+ P(atau Command+ Shift+ Pdi Mac), lalu mencari format dokumen .

Pintasan Pemformatan Kode:

Kode Visual Studio pada Windows - Shift+ Alt+F

Kode Visual Studio pada MacOS - Shift+ Option+F

Kode Visual Studio di Ubuntu - Ctrl+ Shift+I

Anda juga dapat menyesuaikan pintasan ini menggunakan pengaturan preferensi jika diperlukan.

Pemformatan Kode Saat Menyimpan File:

Visual Studio Code memungkinkan pengguna untuk menyesuaikan pengaturan default.

Jika Anda ingin memformat konten secara otomatis saat menyimpan, tambahkan snipet kode di bawah ini dalam pengaturan ruang kerja dari Visual Studio Code.

File Menu → Preferensi → Pengaturan Workspace

{
    // Controls if the editor should automatically format the line after typing
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    // You can auto format any files based on the file extensions type.
    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

Catatan: sekarang Anda dapat memformat file TypeScript secara otomatis. Periksa pembaruan saya.

Anda dapat menambahkan pengikat tombol di menu File → Preferences → Shortcut keyboard .

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

Atau Visual Studio seperti:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }

1. Klik kanan file tersebut
2. Pilih Format Dokumen dari menu:
   • Windows: Alt Shift F
   • Linux: Alt Shift I
   • macOS: ⌥ ⇧ F

Kombinasi tombol kanan adalah Shift+ Alt+ F.

Untuk Fedora

1. Klik File-> Preferences-> Keyboard shortcuts.
2. Di bawah Default Keyboard Shortcuts, cari ( Ctrl+ F) untuk editor.action.format.

Milik saya baca "key": "ctrl+shift+i"

Anda bisa mengubahnya juga. Lihat jawaban ini tentang cara ... atau jika Anda merasa sedikit malas untuk menggulir ke atas:

Anda dapat menambahkan pengikat tombol di "Preferensi-> Pintasan keyboard"

{ "key": "cmd+k cmd+d", "command": "editor.action.format" }

Atau Visual Studio seperti:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }

Harap dicatat: cmdkunci hanya untuk Mac. Untuk Windows dan Fedora (keyboard Windows) gunakanCtrl

EDIT :

Sesuai versi Visual Code 1.28.2inilah yang saya temukan.

editor.action.formattidak ada lagi. Sekarang telah digantikan oleh editor.action.formatDocumentdan editor.action.formatSelection.

Ketik editor.action.formatdi kotak pencarian untuk melihat pintasan yang ada.

Untuk mengubah kombinasi tombol, ikuti langkah-langkah ini:

1. Klik editor.action.formatDocumentataueditor.action.formatSelection
2. Ikon seperti pena muncul di sebelah kiri - klik.
3. Munculan muncul. Tekan kombinasi tombol yang diinginkan dan tekan enter.

Di Linux itu Ctrl+ Shift+ I.

Di Windows itu Alt+ Shift+ F. Diuji dengan HTML / CSS / JavaScript dan Visual Studio Code 1.18.0.

Untuk bahasa lain, Anda mungkin perlu menginstal paket bahasa tertentu.

Visual Studio Code 1.6.1 mendukung " Format Saat Menyimpan " yang secara otomatis akan mengambil ekstensi formatter yang relevan dan memformat seluruh dokumen pada setiap penyimpanan.

Aktifkan "Format Saat Simpan" dengan mengatur

"editor.formatOnSave": true

Dan ada pintasan keyboard yang tersedia (Visual Studio Code 1.7 dan lebih tinggi):

Memformat seluruh dokumen : Shift+ Alt+F

Hanya Pemilihan Format : Ctrl+ K, Ctrl+F

Di Ubuntu itu Ctrl+ Shift+ I.

Cukup klik kanan pada teks dan pilih "Format kode".

Visual Studio Code menggunakan secara js-beautifyinternal, tetapi tidak memiliki kemampuan untuk mengubah gaya yang ingin Anda gunakan. Ekstensi "mempercantik" memungkinkan Anda menambahkan pengaturan.

File Menu → Preferensi → Pengaturan

"editor.formatOnType": true

Saat Anda memasukkan titik koma, itu akan diformat.

Atau, Anda juga dapat menggunakan "editor.formatOnSave": true.

Shift+ Alt+ Fmelakukan pekerjaan dengan baik di 1.17.2 dan di atas.

Untuk beberapa alasan Alt+ Shift+ Ftidak bekerja untuk saya di Mac Visual Studio Code 1.3.1, dan sebenarnya perintah "Format Document" tidak berfungsi sama sekali. Tetapi perintah Formatter bekerja dengan sangat baik.

Jadi Anda dapat menggunakan Command+ Shift+ Pdan mengetik Formatter atau buat pintasan Anda sendiri di menu File → Preferences → Shortcut Keyboard → Command+ K Command+ Slalu ketik Formatter dan tambahkan pintasan Anda.

Lihat sebuah contoh:

Memformat kode dalam Visual Studio.

Saya sudah mencoba memformat di Windows 8.

Ikuti saja tangkapan layar di bawah ini.

1. Klik pada Lihat pada bilah menu atas, dan kemudian klik pada Palet Perintah.

   

2. Maka kotak teks akan muncul di mana kita perlu mengetikkan Format

   Shift+ Alt+F

   

Dalam Visual Studio Code, Shift+ Alt+ Fmelakukan apa yang dilakukan Ctrl+ K+ Ddi Visual Studio.

Pintasan format di C # tidak berfungsi untuk saya sampai saya menginstal Mono untuk Mac OS X, DNVM dan DNX .

Sebelum saya menginstal Mono, pintasan format-otomatis ( Shift+ Alt+ F) hanya berfungsi untuk .jsonfile.

Di Mac, Shift+ Alt+ Fbekerja untuk saya.

Anda selalu dapat memeriksa ikatan utama di menu:

File Menu → Preferensi → Pintasan Keyboard dan filter berdasarkan kata kunci 'format'.

Sementara mengubah perilaku default untuk Visual Studio Code memerlukan ekstensi, Anda dapat mengganti perilaku default di ruang kerja atau tingkat pengguna. Ini berfungsi untuk sebagian besar bahasa yang didukung (Saya dapat menjamin HTML, JavaScript, dan C #).

Tingkat ruang kerja

Manfaat

• Tidak memerlukan ekstensi
• Dapat dibagikan di antara tim

Hasil

• .vscode/settings.json dibuat di folder root proyek

Bagaimana caranya?

1. Pergi ke: Menu File → Preferences → Pengaturan Workspace

2. Tambah dan simpan "editor.formatOnType": trueke settings.json (yang mengesampingkan perilaku default untuk proyek yang Anda kerjakan dengan membuat file .vscode / settings.json).

   

Tingkat lingkungan pengguna

Manfaat

• Tidak memerlukan ekstensi
• Lingkungan pengembangan pribadi tweeking untuk mengatur semuanya (pengaturan :))

Hasil

• Pengguna settings.jsondiubah (lihat lokasi dengan sistem operasi di bawah)

Bagaimana caranya?

1. Pergi ke: menu File → Preferensi → Pengaturan Pengguna

2. Tambahkan atau ubah nilai "editor.formatOnType": falsemenjadi "editor.formatOnType": truedi pengaturan pengguna.json

Pengguna Visual Studio Code Anda settings.jsonLokasi adalah:

Pengaturan lokasi file tergantung pada platform Anda, file pengaturan pengguna terletak di sini:

• Windows: %APPDATA%\Code\User\settings.json
• Mac: $HOME/Library/Application Support/Code/User/settings.json
• Linux: $HOME/.config/Code/User/settings.jsonFile pengaturan ruang kerja terletak di bawah folder .vscode di proyek Anda.

Detail lebih lanjut dapat ditemukan di sini .

Default kunci ini tidak berfungsi untuk saya pada dokumen HTML, CSS, dan JavaScript.

Setelah mencari, saya menemukan plugin populer JS-CSS-HTML Formatter dengan 133.796 pemasangan .

Setelah instalasi, muat ulang windows dan tekan Ctrl+ Shift+ F, dan itu berhasil!

Pilih teks, klik kanan pada pilihan, dan pilih opsi "palet perintah":

Jendela baru terbuka. Cari "format" dan pilih opsi yang memiliki format sesuai kebutuhan.

Cukup instal Visual Studio Keymap oleh Microsoft. Masalah terpecahkan. : p

Di Mac, gunakan ⌘+ Klalu ⌘+ F.

Bagi mereka yang ingin menyesuaikan apa file JavaScript untuk format, Anda dapat menggunakan ekstensi apa pun di JSfilesproperti. Hal yang sama berlaku untuk HTML.

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

Ini akan memungkinkan mempercantik saat penyimpanan untuk TypeScript, dan Anda dapat menambahkan dalam XML ke opsi HTML.

Jika Anda ingin menyesuaikan gaya dokumen-format, Anda harus menggunakan Beautify ekstensi.

Lihat screenshot ini:

Anda harus menginstal plug-in yang sesuai terlebih dahulu (yaitu, XML, C #, dll.).

Pemformatan tidak akan tersedia sebelum Anda menginstal plugin yang relevan, dan menyimpan file dengan ekstensi yang sesuai.

Cara paling sederhana yang saya gunakan dalam Visual Studio Code (Ubuntu) adalah:

Pilih teks yang ingin Anda format dengan mouse.

Klik kanan dan pilih "Format pemilihan" .

Bukan yang ini. Gunakan ini:

File Menu → Preferensi → Pengaturan Workspace , "editor.formatOnType" : true

Gunakan ekstensi ...

Mengaktifkan pemformatan otomatis kode ketika Anda menyimpan file.

Luncurkan Kode Visual Studio dan Buka Cepat ( Ctrl+ P), rekatkan perintah berikut, dan tekan Enter.

ext install format-on-save

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save

Kode Visual Studio di Linux:

Ctrl+ [untuk membuka blokir kode dan

Ctrl+ ]untuk membuat lekukan massal