Bagaimana Anda memformat kode simpan di VS Code

185

Saya ingin memformat kode TypeScript secara otomatis menggunakan build-in formatter ketika saya menyimpan file dalam Visual Studio Code.

Saya mengetahui opsi berikut, tetapi tidak ada yang cukup bagus:

  • Memformat secara manual Shift + Alt + F
  • Format pada tipe "editor.formatOnType": true
    • Ini memformat garis ketika Anda menekan enter. Sayangnya, itu tidak diformat ketika Anda mengklik mouse pada baris lain atau tekan panah atas / bawah.
  • Gunakan ekstensi yang ada
    • Saya mencoba ini satu , tetapi tampaknya tidak bekerja terlalu baik.
  • Gunakan mempercantik "beautify.onSave": true
    • Itu tidak bekerja dengan TypeScript
  • Tulis ekstensi khusus
    • Sulit jika Anda ingin menangani autosave dan build dengan benar.
visual-studio-code vscode-settings code-formatting Tomas Nikodym
sumber

Jawaban:

279

Pada September 2016 (VSCode 1.6), ini sekarang didukung secara resmi .

Tambahkan yang berikut ke settings.jsonfile Anda :

"editor.formatOnSave": true
Tomas Nikodym
sumber
5
apakah ada cara untuk mengecualikan beberapa file? yaitu saya ingin hanya memformat file .js bukan file .html.
gabrielAnzaldo
@ gabodev77prettier dalam VS Code memiliki opsi untuk ini (mis. prettier.javascriptEnable, prettier.cssEnable ...) meskipun tidak untuk HTML.
Freewalker
7
Bisakah ini diformat di Autosave? formatOnSave hanya berfungsi untuk saya ketika saya menekan Cmd + S secara manual.
Freewalker
@gabrielAnzaldo Lihat pertanyaan ini untuk cara mengecualikan file / tipe file tertentu: stackoverflow.com/questions/44831313/…
Gama11
@LukeWilliams Saat ini tidak memungkinkan, ada permintaan fitur untuk itu di sini: github.com/microsoft/vscode/issues/45997
Gama11
63

Untuk memformat kode secara otomatis di save:

  • Tekan Ctrl ,untuk membuka preferensi pengguna

  • Masukkan kode berikut dalam file pengaturan yang dibuka

    {
    "editor.formatOnSave": true
}

  • Menyimpan file

Sumber

Zameer
sumber
33

Jika Anda ingin memformat otomatis di save hanya dengan sumber Javascript, tambahkan yang ini ke Users Setting(tekan Cmd,atau Ctrl,):

"[javascript]": { "editor.formatOnSave": true }
Long Nguyen
sumber
versi saya, saya mulai mencari "formatOnSave" dan hanya perlu mengklik kotak centang di UI Pengaturan Kode Vs
Akin Hwan
25

Tidak perlu menambahkan perintah lagi. Bagi mereka yang baru mengenal Visual Studio Code dan mencari cara mudah untuk memformat kode pada tabungan, silakan ikuti langkah-langkah di bawah ini.

  1. Buka Pengaturan dengan menekan [Cmd+,]Mac atau menggunakan tangkapan layar di bawah ini.

Kode VS - Buka Gambar Perintah Perintah

  1. Ketik ' format ' di kotak pencarian dan aktifkan opsi ' Format Pada Simpan '.

masukkan deskripsi gambar di sini

Kamu selesai. Terima kasih.

Balasubramani M
sumber
4

Untuk pengguna MAC , tambahkan baris ini ke Pengaturan Default Anda

Jalur file adalah: / Pengguna / USER_NAME / Perpustakaan / Dukungan Aplikasi / Kode / Pengguna / settings.json

"tslint.autoFixOnSave": true

Contoh file tersebut adalah:

{
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-icons",
    "typescript.check.tscVersion": false,
    "vsicons.projectDetection.disableDetect": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "eslint.autoFixOnSave": true,
    "tslint.autoFixOnSave": true
}
Richard
sumber