Bagaimana cara menyesuaikan faktor konversi tab-ke-ruang?

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.

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 File → Preferences → Pengaturan Pengguna dan untuk Mac di menu Code → Preferences → Settings 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

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, →

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.

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

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
}

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.

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

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 File → Preferences → Pengaturan Pengguna atau gunakan tombol pendek Ctrl+ Shift+P
• Mac dalam menu Kode → Preferensi → Pengaturan atau ⌘,

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.

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

Sekarang simpan tab Anda tidak akan dikonversi.

Di sudut kanan bawah Anda, Anda memiliki Spaces: Spaces: 2

Di sana Anda dapat mengubah lekukan sesuai kebutuhan Anda: Opsi Lekukan

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

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.

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

File Menu → Preferensi → Pengaturan

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.

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.

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,
}

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.

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

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.