Bagaimana Anda memformat kode dalam Visual Studio Code (VSCode)

990

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

Brandon Clapp
sumber
47
Untuk semua yang berusaha mati-matian untuk memformat XML (yang tampaknya tidak mungkin dilakukan saat ini), Anda dapat mencapainya dengan memasang ekstensi. Saya telah menemukan Alat XML untuk menyelesaikan pekerjaan dengan baik. Penafian: Saya bukan penulis atau terkait dengan proyek ini ...
informatik01
Meskipun VSCode memiliki pilihan menu yang jauh lebih sedikit daripada VS (tren baru?), VSCode memiliki info dan tutorial yang luas di bawah menu BANTUAN, yang mungkin telah menjawab pertanyaan ini.
Roland
Untuk semua yang kesulitan mendapatkan pekerjaan pemformatan bahkan setelah mencoba kombinasi yang valid dalam Visual Studio Code, jangan lupa untuk memilih jenis bahasa pemrograman yang sesuai, itu ada di kanan bawah di jendela kode studio visual di sebelah smiley itu. Setelah Anda melakukannya saya menemukan itu berfungsi di luar kotak dan Anda tidak memerlukan plugin tambahan untuk memformat kode.
Mr.Hunt

Jawaban:

3845

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 .

Brandon Clapp
sumber
28
Perhatikan juga bahwa kode Bahasa harus benar. yaitu Format Kode tidak akan tersedia jika teks biasa dipilih tetapi beralih ke JSON (misalnya) akan memformat teks yang dipilih dengan senang hati. (bagaimanapun juga dapat dilakukan sebagai editor teks)
Stephen Price
4
@ Jojo: Di Ubuntu, saya membuka File> Preferensi> Pintasan Keyboard. Ada item untuk {"key": "ctrl + shift + i", "command": "editor.action.format", "when": "editorTextFocus"}. Perintah "ctrl + shift + i" bekerja untuk saya.
Asheesh
18
Juga, tampaknya file tersebut harus disimpan ke disk terlebih dahulu. Saya memiliki sepotong HTML + Javascript di mana ia tidak dapat memformat JS, jadi saya menempelkannya ke jendela sementara dan mengatur bahasa, tetapi ini tidak membantu sampai disimpan.
Jonas
9
Bagi orang yang mengatakan itu tidak berfungsi pada Mac, ini terlihat seperti konflik antara pintasan dan sistem input teks OS X untuk karakter beraksen yang tergantung pada pengaturan lokal dan pengaturan keyboard Anda: github.com/Microsoft/vscode/issues / 8914 # issuecomment-245947844
Chris Adams
8
Ini tidak berfungsi untuk saya pada VS Code versi terbaru dan menangkan 10 apakah ini mengasumsikan memiliki ekstensi tertentu diinstal?
JayPex
479

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 → PreferensiPengaturan 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.

Bharathi Devarasu
sumber
Juga berfungsi untuk bahasa lain dengan ini: Beautify Extension
equiman
3
tidak yakin mengapa itu berbeda di CentOS, tapi ituShift + Alt + I
a11smiles
2
beautify.onSave tidak valid dengan ekstensi eslint diinstal
Ben Petersen
Di ubuntu mate 17.04 Shift + Alt + Ijuga
Pini Cheyni
2
@ClintEeastwood coba gunakan prettier.singleQuote: truedalam pengaturan kode vs Anda.
Enn
216

Anda dapat menambahkan pengikat tombol di menu FilePreferences → Shortcut keyboard .

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

Atau Visual Studio seperti:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }
hardkoded
sumber
23
Di Windows, ganti cmddengan ctrl- jangan hanya menyalin dan menempel secara membabi buta seperti yang saya lakukan!
Jens Ehrich
3
"editor.action.format" berfungsi lagi. Sekarang memformat seluruh dokumen jika tidak ada yang dipilih, atau memformat pemilihan.
Red Riding Hood
198
  1. Klik kanan file tersebut
  2. Pilih Format Dokumen dari menu:
    • Windows: Alt Shift F
    • Linux: Alt Shift I
    • macOS: F

Masukkan deskripsi gambar di sini

Siddarth Kanted
sumber
18
Untuk Linux, pintasan keyboard adalah Ctlr + Shift + I
Lucas
Apa itu kotak menu?
Peter Mortensen
@PeterMortensen kotak di mana Anda melihat menu. Dalam tangkapan layar, itu kotak putih dengan "Format Dokumen", "Potong", "Salin", "Tempel", dll.
Ben Leggiero
117

Kombinasi tombol kanan adalah Shift+ Alt+ F.

Cesar
sumber
2
Ketika Anda hanya menyalin & menempelkan kode dari clipboard ke tab baru , maka tidak ada yang terjadi. Solusi: Simpan kode ke file dengan ekstensi file terkait (misalnya * .json). Lalu berhasil. Saya kira alasannya adalah bahwa ahli kecantikan tahu bahasa dari ekstensi dan tidak melakukan deteksi otomatis berdasarkan kode.
Kecantikan
Pintasan ini berfungsi untuk MAC. Di Windows format kode.
C. Damoc
63

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.
abyshukla
sumber
Dengan perintah ini, dalam file TypeScript saya, penawaran tunggal menjadi penawaran ganda. Bagaimana mengatasinya?
DioBrando
Tampaknya tidak dapat menemukan ini di UI pengaturan sampah yang baru.
Oliver Dixon
63

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.

Niklas R.
sumber
61

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

Dariusz
sumber
Saya menyarankan ekstensi EsLint untuk VS Code marketplace.visualstudio.com/...
Dariusz
44

Di Ubuntu itu Ctrl+ Shift+ I.

ranbuch
sumber
7
Saya kira itu tergantung bahasa. CTRL + SHIFT + Iberfungsi untuk JavaScript tetapi tidak untuk PHP, misalnya.
Jamie Carl
32

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.

Gerfried
sumber
1
Tentu, saya menggunakan Windows dan berfungsi seperti yang dijelaskan - mungkin tergantung pada versi VScode (harap perbarui!) Dan pada ekstensi file. Silakan uji dengan HTML.
Gerfried
32

File Menu → PreferensiPengaturan

"editor.formatOnType": true

Saat Anda memasukkan titik koma, itu akan diformat.

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

M Fatih Koca
sumber
anehnya, saya telah menemukan perilaku pengaturan ini dapat berbeda dari shift+alt+fdalam situasi tertentu. tidak tahu kenapa!
JzInqXc9Dg
Ketika saya mengaktifkan ini dan saya membuat fungsi dalam C #, saya dapat menyelesaikan semuanya dan melanjutkan namun fungsi tersebut tidak diformat hingga saya melakukan fitur "Format Document". Saya tidak tahu mengapa pengaturan di atas tidak memformat setelah mengetik fungsi.
Daniel Jackson
25

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

Piotrek Hryciuk
sumber
24

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 FilePreferencesShortcut KeyboardCommand+ K Command+ Slalu ketik Formatter dan tambahkan pintasan Anda.

Lihat sebuah contoh:

Masukkan deskripsi gambar di sini

Aleksander Tymczenko
sumber
23

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.

    Masukkan deskripsi gambar di sini

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

    Shift+ Alt+F

    Masukkan deskripsi gambar di sini

afeef
sumber
1
Beberapa kali saya menyalin paste xml ke file baru dan ingin memformatnya tanpa menyimpan file. Ini sempurna untuk situasi seperti itu!
user3885927
19

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

Burk
sumber
18

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.

Jo Smo
sumber
Untuk memformat C # orang perlu menginstal ekstensi. Biasanya omnisharp harus bekerja. Namun, ada bug di omnisharp. Sampai bug diperbaiki kita harus menggunakan ekstensi Leopotam.csharpfixformat. Itu menimpa omnisharp. Setelah menginstal C # ekstensi FixFormat saya dapat memformat dokumen lagi.
Oncel Umut TURER
18

Di Mac, Shift+ Alt+ Fbekerja untuk saya.

Anda selalu dapat memeriksa ikatan utama di menu:

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

Lukasz Czerwinski
sumber
14

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 FilePreferencesPengaturan 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).

    Bagaimana tampilannya

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 FilePreferensiPengaturan 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 .

Teknologi Saturnus
sumber
9

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!

mumair
sumber
Ya, tetapi hanya 2 dari 5 bintang? Serius?
kmoser
Sekadar pengingat: jawaban ini awalnya ditulis pada tahun 2017 dan waktu itu fungsi VS Code cukup fungsional melalui plugin atau peretasan lainnya, tidak ada solusi lain yang bekerja untuk saya saat itu sehingga saya menemukannya sendiri yang benar-benar berfungsi saat itu dan tidak peduli berapa banyak bintang yang dimilikinya :-) Sekarang 2020 dan dukungan format luar biasa.
mumair
Saya tidak berpikir VS Code belum mendukung pemformatan CSS di luar kotak. Saya menginstal plugin Prettier ( prettier.io ) yang menangani JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Kurang, HTML, Vue, Angular, GraphQL, Markdown, YAML. 5,6 juta pemasangan dan 4 bintang.
kmoser
Saya senang Anda menemukan lebih cantik: dukungan P Format ada tetapi tidak sebagus cantik, saya menggunakan lebih cantik sebagai dev-dependensi di semua proyek saya dengan .prettierrcdan plugin. Saya takut bahwa suatu hari cantik akan bergabung menjadi vs-kode :)
mumair
8

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

Masukkan deskripsi gambar di sini

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

Akhil Ghatiki
sumber
7

Di Mac, gunakan + Klalu + F.

Gopal Devra
sumber
7

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.

Rick
sumber
1
Di mana saya meletakkan ini? Ini juga membantu untuk menambahkan bahwa mempercantik adalah ekstensi ...
rotgers
Kamu bisa menyebutkan di mana harus meletakkan kode ini.
gromit190
6

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

Lihat screenshot ini:

img

Jerry Ni
sumber
6

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.

Nigel Feasey
sumber
Beautify bertanya kepada Anda apakah tidak tahu formatter mana yang harus digunakan, yang memungkinkan orang untuk melakukan style cshtml.
Cees Timmerman
6

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" .

Ashutosh Jha
sumber
5

Bukan yang ini. Gunakan ini:

File Menu → PreferensiPengaturan Workspace , "editor.formatOnType" : true

杨恩锋
sumber
3
Bukan yang ini apa? Apakah Anda mengacu pada jawaban lain? Jika ya, yang mana?
Peter Mortensen
2

Kode Visual Studio di Linux:

Ctrl+ [untuk membuka blokir kode dan

Ctrl+ ]untuk membuat lekukan massal

Hvitis
sumber