Bagaimana cara menyesuaikan faktor konversi tab-ke-ruang?


854

Bagaimana cara menyesuaikan faktor konversi tab-ke-ruang saat menggunakan Kode Visual Studio?

Sebagai contoh, sekarang dalam HTML tampaknya menghasilkan dua spasi per tekan TAB, tetapi dalam TypeScript menghasilkan 4.

Jawaban:


1362

Secara default, Visual Studio Code akan mencoba menebak opsi indentasi Anda tergantung pada file yang Anda buka.

Anda dapat mematikan lekukan menebak melalui "editor.detectIndentation": false.

Anda dapat menyesuaikan ini dengan mudah melalui tiga pengaturan ini untuk Windows di menu FilePreferencesPengaturan Pengguna dan untuk Mac di menu CodePreferencesSettings atau ⌘,:

// The number of spaces a tab is equal to. This setting is overridden
// based on the file contents when `editor.detectIndentation` is true.
"editor.tabSize": 4,

// Insert spaces when pressing Tab. This setting is overriden
// based on the file contents when `editor.detectIndentation` is true.
"editor.insertSpaces": true,

// When opening a file, `editor.tabSize` and `editor.insertSpaces`
// will be detected based on the file contents. Set to false to keep
// the values you've explicitly set, above.
"editor.detectIndentation": false

1
Hai Guss, apakah Anda bersedia mengarahkan saya ke file di mana tebakannya salah? Silakan juga bagikan bagaimana Anda telah mengkonfigurasi dua pengaturan ini (tabSize & insertSpaces) dan apa yang Anda harapkan. Terima kasih! :)
Alex Dima

5
Saya telah mengkonfigurasi kedua pengaturan untuk "otomatis", dan perilaku tidak seperti yang saya harapkan (meskipun saya tidak akan menyebutnya "salah"). Saya tidak tahu file apa yang harus diubah untuk mendukung konvensi saya, tetapi saya membuka tiket uservoice untuk itu , seperti yang disarankan dalam jawaban untuk pertanyaan # 30057721
Guss

4
Apakah ada opsi untuk mengatur default untuk file kosong baru? Tidak banyak yang bisa ditebak dalam skenario itu dan saya pikir VSCode akan default untuk menggunakan spasi (yang saya tidak suka) ...
Stijn de Witt

Namun, ada juga opsi pengaturan tempat kerja sehingga Anda dapat mengatur perilaku yang berbeda berdasarkan proyek yang mengesampingkan pengaturan pengguna. 2 ¢
ruffin

1
Terima kasih ruffin. Apakah ada cara untuk mengubah tabSizeper bahasa? mis. saat mengedit banyak file dengan bahasa berbeda di Workspace yang sama (mis. Ruby, JavaScript, CSS, dll.) - Ruby adalah 2spasi, tetapi CSS 4biasanya ... biasanya.
Jacob Barnard

693

Saya menjalankan versi 1.21, tetapi saya pikir ini mungkin berlaku untuk versi sebelumnya juga.

Lihatlah sisi kanan bawah layar. Anda harus melihat sesuatu yang mengatakan Spacesatau Tab-Size.

Milik saya menunjukkan spasi, →

Masukkan deskripsi gambar di sini

  1. Klik pada Spaces (atau Tab-Size )
  2. Pilih Indent Using Spaces atau Indent using Tabs
  3. Pilih jumlah spasi atau tab yang Anda suka.

Ini hanya berfungsi per dokumen, bukan di seluruh proyek. Jika Anda ingin menerapkannya di seluruh proyek, Anda juga perlu menambahkan "editor.detectIndentation": falseke pengaturan pengguna Anda.


bagaimana cara # 3 dilakukan? Setelah memilih # 2, tampaknya tidak ada cara untuk hanya "memilih jumlah ruang ... yang Anda suka". Terima kasih.
Chris22

Sepanjang waktu saya berpikir: "Entah bagaimana ini mungkin ..." Ini menjelaskan caranya.
vlz

189

Nah, jika Anda menyukai cara pengembangnya, Visual Studio Code memungkinkan Anda menentukan jenis file yang berbeda untuk tabSize. Berikut adalah contoh dari saya settings.jsondengan default empat spasi dan JavaScript / JSON dua spasi:

{
  // I want my default to be 4, but JavaScript/JSON to be 2
  "editor.tabSize": 4,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.tabSize": 2
  },

  // This one forces the tab to be **space**
  "editor.insertSpaces": true
}

PS: Ya, jika Anda tidak tahu cara membuka file ini (khususnya dalam versi baru dari Visual Studio Code), Anda dapat:

  1. Gigi kiri bawah →
  2. Pengaturan → kanan atas Pengaturan Terbuka

 

Masukkan deskripsi gambar di sini


105

Secara default, Visual Studio Code secara otomatis mendeteksi lekukan file terbuka saat ini. Jika Anda ingin menonaktifkan fitur ini dan membuat semua lekukan, misalnya, dua spasi, Anda akan melakukan yang berikut ini di Pengaturan Pengguna atau pengaturan Workspace Anda.

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

57

Kita dapat mengontrol ukuran tab berdasarkan jenis file dengan EditorConfig dan EditorConfig untuk ekstensi Kode VS. Kami kemudian dapat membuat Alt+ Shift+ Fspesifik untuk setiap jenis file.

Instalasi

ext install EditorConfig

Contoh Konfigurasi

.editorconfig

[*]
indent_style = space

[*.{js,ts,json}]
indent_size = 2

[*.java]
indent_size = 4

[*.go]
indent_style = tab

settings.json

EditorConfig mengesampingkan pengaturan apa pun. Jones mengkonfigurasi untuk editor. Tidak perlu berubah editor.detectIndentation.


Apa yang extAnda bicarakan ini (harap balas dengan mengedit jawaban Anda, bukan di sini dalam komentar (jika perlu))? Beberapa Node.js thingy? Platform apa?
Peter Mortensen

12

Jika Anda menggunakan ekstensi yang lebih cantik di Visual Studio Code, coba tambahkan ini ke file settings.json:

"editor.insertSpaces": false,
"editor.tabSize": 4,
"editor.detectIndentation": false,

"prettier.tabWidth": 4,
"prettier.useTabs": true  // This made it finally work for me

8

Dalam Visual Studio Code versi 1.31.1 atau lebih baru (saya pikir): Seperti sed Alex Dima , Anda dapat menyesuaikan ini dengan mudah melalui pengaturan ini untuk

  • Windows dalam menu FilePreferencesPengaturan Pengguna atau gunakan tombol pendek Ctrl+ Shift+P
  • Mac dalam menu KodePreferensiPengaturan atau ,

Masukkan deskripsi gambar di sini

Masukkan deskripsi gambar di sini


7

Anda ingin memastikan editorconfig Anda tidak bertentangan dengan konfigurasi pengaturan pengguna atau ruang kerja Anda, karena saya hanya sedikit jengkel berpikir pengaturan file pengaturan tidak diterapkan ketika itu adalah konfigurasi editor saya membatalkan perubahan itu.


7

Itu yang lonefy.vscode-js-css-html-formatterharus disalahkan. Nonaktifkan, dan instal HookyQR.beautify.

Sekarang simpan tab Anda tidak akan dikonversi.



4

Saat menggunakan TypeScript, lebar tab default selalu dua terlepas dari apa yang tertulis di bilah alat. Anda harus mengatur "prettier.tabWidth" di pengaturan pengguna Anda untuk mengubahnya.

Ctrl+ P, Ketik → pengaturan pengguna, tambahkan:

"prettier.tabWidth": 4

4

Jika jawaban yang diterima pada postingan ini tidak berfungsi, cobalah ini:

Saya memiliki EditorConfig untuk Visual Studio Code yang diinstal di editor saya, dan itu terus mengesampingkan pengaturan pengguna saya yang diatur ke indentasi file menggunakan spasi. Setiap kali saya beralih di antara tab editor, file saya akan secara otomatis diindentasikan dengan tab bahkan jika saya telah mengubah lekukan ke spasi !!!

Tepat setelah saya mencopot pemasangan ekstensi ini, lekukan tidak lagi berubah antara beralih tab editor, dan saya dapat bekerja lebih nyaman daripada harus secara manual mengkonversi tab ke spasi setiap kali saya beralih file - itu menyakitkan.


4

Sudah ada banyak jawaban bagus yang diberikan oleh anggota komunitas tercinta kami. Saya sebenarnya ingin menambahkan kode C # tabSize dan menemukan utas ini. Ada banyak solusi yang saya temukan dan dokumen VS Code resmi mengagumkan. Saya hanya ingin membagikan pengaturan C # saya:

"[csharp]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 4
},

cukup salin dan tempel kode di atas ke settings.jsonfile Anda dan simpan. Terima kasih


1
Ya, ini adalah cara untuk pergi jika Anda ingin mengatur format yang berbeda untuk bahasa tertentu. Saya suka menggunakan tab dengan tabWidth = 2, tetapi autopep8 hanya membenci itu.
Abhishek Kasireddy

2

File Menu → PreferensiPengaturan

Tambahkan ke pengaturan pengguna:

"editor.tabSize": 2,
"editor.detectIndentation": false

kemudian klik kanan dokumen Anda jika Anda sudah membuka dan klik Format Dokumen untuk meminta dokumen Anda yang sudah ada ikuti pengaturan baru ini.


2

Solusi @ alex-dima dari 2015 akan mengubah ukuran dan spasi tab untuk semua file dan solusi @ Tricky dari 2016 tampaknya hanya mengubah pengaturan untuk file saat ini.

Pada 2017, saya menemukan solusi lain yang berfungsi berdasarkan per-bahasa. Visual Studio Code tidak menggunakan ukuran tab yang tepat atau pengaturan ruang untuk Elixir , jadi saya menemukan bahwa saya bisa mengubah pengaturan untuk semua file Elixir.

Saya mengklik bahasa di bilah status ("Elixir" dalam kasus saya), memilih "Konfigurasikan pengaturan berbasis bahasa 'Elixir ...", dan mengedit pengaturan bahasa khusus Elixir. Saya baru saja menyalin pengaturan "editor.tabSize" dan "editor.insertSpaces" dari pengaturan default di sebelah kiri (saya sangat senang mereka ditampilkan) dan kemudian memodifikasinya di sebelah kanan.

Ini berfungsi dengan baik, dan sekarang semua file bahasa Elixir menggunakan ukuran tab dan pengaturan ruang yang tepat.


1

Saya harus melakukan banyak pengaturan edit seperti jawaban sebelumnya, jadi saya tidak tahu yang membuatnya berfungsi setelah banyak modifikasi.

Tidak ada yang berhasil sampai saya menutup dan membuka IDE saya, tetapi tiga hal terakhir yang saya lakukan adalah menonaktifkan lonefy.vscode-js-css-html-formatter, "html.format.enable": true,dan restart Visual Studio.

{
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "workbench.colorTheme": "Default Light+",
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features",
        "editor.tabSize": 2,
        "editor.detectIndentation": false,
        "editor.insertSpaces": true
    },
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
    "editor.tabSize": 2,
    "typescript.format.insertSpaceAfterConstructor": true,
    "files.autoSave": "afterDelay",
    "html.format.indentHandlebars": true,
    "html.format.indentInnerHtml": true,
    "html.format.enable": true,
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
}

0

Jika ini untuk Angular 2, dan CLI menghasilkan file yang ingin Anda format berbeda, Anda dapat mengedit file-file ini untuk mengubah apa yang dihasilkan:

npm_modules/@angular/cli/blueprints/component/files/__path__/*

Tidak direkomendasikan secara besar-besaran karena pembaruan npm akan menghapus pekerjaan Anda, tetapi itu menghemat banyak waktu saya.


0

Saya mencoba mengubah editor .tabSizemenjadi 4, tetapi .editorConfigmengabaikan pengaturan apa pun yang telah saya tentukan, jadi tidak perlu mengubah konfigurasi dalam pengaturan pengguna. Anda hanya perlu mengedit file .editorConfig:

set indent_size = 4

-1

User3550138 benar. lonefy.vscode-js-css-html-formattermengesampingkan semua pengaturan yang disebutkan dalam jawaban lain. Namun, Anda tidak harus menonaktifkan atau menghapusnya karena dapat dikonfigurasi.

Instruksi lengkap dapat ditemukan dengan membuka sidebar ekstensi dan mengklik ekstensi ini dan itu akan menampilkan instruksi konfigurasi di ruang kerja editor. Setidaknya itu berlaku untuk saya dalam Visual Studio Code versi 1.14.1.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.