Bagaimana cara mengubah indentasi dalam Visual Studio Code?

345

Untuk setiap file naskah, kode studio visual menggunakan indentasi otomatis 8 spasi. Ini agak terlalu banyak untuk seleraku, tetapi aku tidak bisa menemukan tempat untuk mengubahnya.

Mungkin ini tersedia sebagai pengaturan tetapi dengan nama yang berbeda karena saya tidak dapat menemukan apa pun yang terkait dengan indentasi.

MEMPERBARUI

Saya saat ini menggunakan formatter kode Prettier dan yang memecahkan semua masalah pemformatan dengan memformat otomatis pada save (jika tidak ada kesalahan sintaksis)

HMR
sumber

Jawaban:

113

Anda dapat mengubah ini di Userlevel global atau Workspacelevel.

Buka pengaturan: Menggunakan shortcut ctrl + ,atau klik File> Preferences> Settingsseperti yang ditunjukkan di bawah ini.

Pengaturan pada menu Kode VS

Lalu, lakukan 2 perubahan berikut: (ketik tabSizebilah pencarian)

  1. Hapus centang pada kotak centang Detect Indentation
  2. Ubah ukuran tab menjadi 2/4 (Meskipun saya pikir 2 benar untuk JS :))

masukkan deskripsi gambar di sini

Xin
sumber
1
Tolong, gunakan 4 spasi untuk lekukan.
Bohdan Kuts
3
@BohdanKuts ha ha, ini akan menjadi argumen yang tak ada habisnya
Xin
Yap :) Saya melakukan pencarian untuk itu dan menemukan mengapa itu menjadi 2 spasi. Dan bagi saya alasannya tampaknya sudah usang jadi saya akan merekomendasikan untuk menggunakan 4 spasi pasti.
Bohdan Kuts
Ini subyektif dan tidak memiliki keuntungan nyata, saya menyimpan 2 spasi untuk beberapa jenis file seperti js, html dan css, dan 3 spasi untuk kode, hanya untuk keterbacaan. Dalam HTML dan XML dengan 4 spasi Anda harus segera menggulir ke kanan.
Pablo Pazos
574

Di bilah alat di sudut kanan bawah Anda akan melihat item yang terlihat seperti berikut: masukkan deskripsi gambar di sini Setelah mengkliknya, Anda akan mendapatkan opsi untuk membuat indentasi menggunakan spasi atau tab. Setelah memilih jenis indentasi Anda, Anda akan memiliki opsi untuk mengubah seberapa besar indentasi. Dalam kasus contoh di atas, indentasi diatur ke 4 karakter spasi per indent. Jika tab dipilih sebagai karakter lekukan Anda, maka Anda akan melihat Ukuran Tab alih-alih Spasi

Jika Anda ingin ini berlaku untuk semua file dan tidak berdasarkan file individual, ganti pengaturan Editor: Tab Sizedan Editor: Insert Spacesdalam Pengaturan Pengguna atau Pengaturan Ruang Kerja tergantung pada kebutuhan Anda

Edit 1

Untuk sampai ke pengaturan pengguna atau ruang kerja Anda pergi ke Preferensi -> Pengaturan . Pastikan Anda berada di tab Pengguna atau Workspace tergantung pada kebutuhan Anda dan gunakan bilah pencarian untuk menemukan pengaturan. Anda mungkin juga ingin menonaktifkan Editor: Detect Indentationkarena pengaturan ini akan menimpa apa yang Anda tetapkan Editor: Insert Spacesdan Editor: Tab Sizekapan diaktifkan

elliot-j
sumber
Tautan gambar rusak.
34
Mengubah editor.tabSpacestidak tidak mengubah spasi dalam semua file. Itu hanya mengubahnya untuk file yang dibuat di masa depan. Masih belum ada solusi untuk memperbaiki semua file dalam satu tindakan.
Jacob Stamm
3
Wow. pikiran meledak. terkadang hal-hal hanya bersembunyi di depan mata
pingo
4
Ini sangat tidak intuitif. Saya sudah memiliki lekukan yang diatur untuk menggunakan spasi. Mengapa saya perlu mengklik opsi spasi untuk mendapatkan menu tersembunyi kedua untuk mengatur jumlah spasi? Setiap editor lain yang saya gunakan adalah satu klik pada rincian lekukan di bilah status dan ada sejumlah opsi spasi. Dalam VS Code saya perlu melihat ini di Stack Overflow karena menu yang saya inginkan tersembunyi di balik opsi yang saya tidak coba ubah.
ian.pvd
1
sepertinya selalu kembali ke default 4 spasi setiap kali saya membuat file baru?!?!
oldboy
143

Untuk mengubah lekukan berdasarkan bahasa pemrograman :

  1. Buka Command Palette ( CtrlShiftP| MacOS: P)
  2. Preferensi: Konfigurasi pengaturan bahasa tertentu ... (perintah id: workbench.action.configureLanguageBasedSettings)
  3. Pilih bahasa pemrograman (misalnya TypeScript)
  4. Tambahkan kode ini:

    "[typescript]": {
        "editor.tabSize": 2
    }
    

Lihat juga: VS Code Documents

Martin Schneider
sumber
Bagaimana (di mana) seseorang menggunakan id perintah? Saya tidak melihat "Konfigurasi Pengaturan Khusus Bahasa" di bawah File-Preferences.
Alan Baljeu
@AlanBaljeu Anda dapat menggunakan id perintah untuk pintasan keyboard, ekstensi, dll. Jadi, Anda dapat pergi ke File > Preferensi > Pintasan Keyboard , tempel ID untuk input dan tetapkan misalnya Ctrl + K Ctrl + L untuk perintah.
Martin Schneider
55

Anda mungkin juga ingin mengatur editor.detectIndentationke false, selain jawaban Elliot-J.

VSCode akan menimpa pengaturan Anda editor.tabSizedan editor.insertSpacesper file jika mendeteksi bahwa file memiliki pola lekukan tab atau spasi yang berbeda. Anda dapat mengalami masalah ini jika Anda menambahkan file yang ada ke proyek Anda, atau jika Anda menambahkan file menggunakan generator kode seperti Angular Cli. Pengaturan di atas mencegah VSCode dari melakukan ini.

RMuesi
sumber
44

Pintasan Pemformatan Kode:

VSCode pada Windows - Shift + Alt + F

VSCode pada MacOS - Shift + Option + F

VSCode di Ubuntu - Ctrl + Shift + I

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

pemilihan kolom dengan keyboard Ctrl + Shift + Alt + Arrow

Sujatha Girijala
sumber
1
Shift + Alt + Fmengubah semua indentasi dalam file saya dari 8 spasi menjadi 4 spasi default saya. Hanya apa yang saya cari :)
Harry12345
24

Dalam kasus saya, ekstensi " EditorConfig for VS Code " mengesampingkan pengaturan VSCode. Jika Anda menginstalnya, maka periksa file .editorconfig di folder root proyek.

Berikut ini contoh konfigurasi. "Indent_size" mengatur jumlah spasi untuk sebuah tab.

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
Aviw
sumber
7

Penjelasan sederhana dengan gambar untuk orang-orang yang googled "Ubah indentasi dalam VS Code"

Langkah 1: Klik Preferensi> Pengaturan

masukkan deskripsi gambar di sini

Langkah 2: Pengaturan yang Anda cari adalah "Detect Indentation", mulai mengetik itu. Klik pada "Editor: Ukuran Tab"

masukkan deskripsi gambar di sini

Langkah 3: Gulir ke bawah ke "Editor: Ukuran Tab" dan ketik 2 (atau apa pun yang Anda butuhkan).

masukkan deskripsi gambar di sini



Perubahan disimpan secara otomatis

masukkan deskripsi gambar di sini

Contoh perubahan saya

masukkan deskripsi gambar di sini

JGallardo
sumber
6

Untuk mengatur semua file yang ada dan file baru ke identifikasi ruang menjadi 2 cukup taruh di settingns.json Anda (di root json):

"[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features",
        "editor.tabSize": 2,
        "editor.insertSpaces": true,
        "editor.detectIndentation":false
 }

Anda dapat menambahkan jenis bahasa konfigurasi:

"[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation":false
} 
Reculos Gerbi Neto
sumber
Hari-hari ini saya menggunakan prettier.js dan plugin js karena itu merawat spasi dan lainnya menyelaraskan garis panjang serta kebanyakan hal lainnya.
HMR
1
Terima kasih, jawaban yang luar biasa, cara terbaik untuk saya.
Swetabja Hazra
5

Cara mengubah 4 spasi indentasi dalam semua file dalam Kode VS ke 2 spasi

  • Buka pencarian file
  • Aktifkan Ekspresi Reguler
  • Memasukkan: ( {2})(?: {2})(\b|(?!=[,'";\.:\*\\\/\{\}\[\]\(\)])) di bidang pencarian
  • Masukkan: $1di bidang ganti

Cara mengubah 2 spasi indentasi dalam semua file dalam Kode VS menjadi 4 spasi

  • Buka pencarian file
  • Aktifkan Ekspresi Reguler
  • Memasukkan: ( {2})(\b|(?!=[,'";\.:\\*\\\/{\}\[\]\(\)])) di bidang pencarian
  • Masukkan: $1$1di bidang ganti

CATATAN: Anda harus mengaktifkan PERL Regex terlebih dahulu. Begini caranya:

  • Buka pengaturan dan buka file JSON
  • tambahkan berikut ini ke file JSON "search.usePCRE2": true

Semoga seseorang melihat ini.

casual234
sumber
1
Khusus untuk Kode VS, ada juga ekstensi untuk mengkonversi 4 hingga 2 spasi.
tanius
4

Masalah: Jawaban yang diterima sebenarnya tidak memperbaiki lekukan di dokumen saat ini.

Solusi: Jalankan Format Documentuntuk memproses ulang dokumen sesuai dengan pengaturan saat ini (baru).

Masalah: Dokumen HTML di proyek saya bertipe "Django HTML" bukan "HTML" dan tidak ada formatter yang tersedia.

Solusi: Alihkan mereka ke sintaks "HTML", format mereka, lalu kembali ke "Django HTML."

Masalah: Pemformat HTML tidak tahu bagaimana menangani tag template Django dan membatalkan banyak dari sarang saya diterapkan dengan hati-hati.

Solusi: Instal ekstensi Indent 4-2 , yang melakukan indentasi dengan ketat, tanpa memperhatikan sintaksis bahasa saat ini (yang saya inginkan dalam kasus ini).

shacker
sumber
2

Saya ingin mengubah lekukan file HTML saya yang ada dari 4 spasi menjadi 2 spasi.

Saya mengklik tombol 'Spasi: 4' di bilah status dan mengubahnya menjadi dua di kotak dialog berikutnya.

Saya menggunakan ekstensi 'vim'. Saya tidak bisa kembali indentasi tanpa vim

Untuk indentasi ulang file saya saat ini, saya menggunakan ini:

gg

=

G
Rounak
sumber
0

Menambahkan: ya, Anda dapat menggunakan UI kanan bawah untuk mengonfigurasi pengaturan ruang. Tetapi jika Anda memiliki kode yang sudah ada yang tidak diformat ke spasi baru, maka Anda dapat mengklik kanan di mana saja di dalam file dan klik Format Dokumen . Butuh waktu beberapa saat untuk mencari tahu sampai saya menemukan masalah ini .

Format menu Dokumen

Wompinalong
sumber