Sekmeden uzaya dönüşüm faktörünü nasıl özelleştirebilirim?

Visual Studio Code kullanırken sekme-boşluk dönüştürme faktörünü nasıl özelleştirebilirim?

Örneğin, şu anda HTML'de her basışta iki boşluk ürettiği görülüyor TAB, ancak TypeScript'te 4 üretiyor.

Varsayılan olarak, Visual Studio Code, açtığınız dosyaya bağlı olarak girinti seçeneklerinizi tahmin etmeye çalışır.

Girintiyi tahmin etmeyi yoluyla kapatabilirsiniz "editor.detectIndentation": false.

Sen bu üç ayarları aracılığıyla kolayca özelleştirebilirsiniz Windows'un menüsünde Dosya → Tercihler → Kullanıcı Ayarları ve için Mac menü içinde Kanununun → Tercihler → Ayarlar veya ⌘,:

// 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.21 sürümünü çalıştırıyorum, ancak bunun önceki sürümler için de geçerli olabileceğini düşünüyorum.

Ekranın sağ alt tarafına bir göz atın. Sen diyor birşeyler görmelisiniz Spacesveya Tab-Size.

Benimki boşlukları gösteriyor, →

1. Tıklayın Spaces (veya Sekme Boyutu )
2. Boşluk Kullanarak Girinti veya Sekmeleri Kullanarak Girinti'yi seçin
3. İstediğiniz boşluk veya sekme miktarını seçin.

Bu yalnızca proje başına değil belge başına çalışır. Proje genelinde uygulamak istiyorsanız "editor.detectIndentation": false, kullanıcı ayarlarınıza da eklemeniz gerekir .

Peki, geliştirici yolunu beğenirseniz, Visual Studio Code için farklı dosya türlerini belirtmenize izin verir tabSize. İşte benim settings.jsonvarsayılan dört boşluk ve JavaScript / JSON iki boşluk ile benim örnek :

{
  // 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
}

Not: Bu dosyayı nasıl açacağınızı bilmiyorsanız (özellikle Visual Studio Code'un yeni bir sürümünde) şunları yapabilirsiniz:

1. Sol alt dişli →
2. Ayarlar → sağ üst Ayarlar'ı aç

Varsayılan olarak, Visual Studio Code geçerli açık dosyanın girintisini otomatik olarak algılar. Bu özelliği kapatmak ve tüm girintiyi (örneğin iki boşluk) yapmak istiyorsanız, Kullanıcı Ayarları veya Çalışma Alanı ayarlarınızda aşağıdakileri yaparsınız.

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

Sekme boyutunu VSCon uzantısıyla EditorConfig ve EditorConfig ile dosya türüne göre kontrol edebiliriz . Daha sonra her dosya türüne Alt+ Shift+ Fözgü yapabiliriz .

Kurulum

ext install EditorConfig

Örnek Yapılandırma

.editorconfig

[*]
indent_style = space

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

[*.java]
indent_size = 4

[*.go]
indent_style = tab

settings.json

EditorConfig, editör için yapılan tüm ayarları geçersiz kılar. Değiştirmeye gerek yok editor.detectIndentation.

Visual Studio Code'da daha güzel uzantı kullanıyorsanız, bunu settings.json dosyasına eklemeyi deneyin:

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

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

Gelen Visual Studio Kod sonraki sürüm 1.31.1 veya (Bence): gibi sed Alex Dima , sizin için bu ayarların üzerinden kolayca bu özelleştirebilirsiniz

• Dosya → Tercihler → Kullanıcı Ayarları menüsünde Windows veya Ctrl+ Shift+ kısa tuşlarını kullanınP
• Kod → Tercihler → Ayarlar menüsünde Mac veya ⌘,

Editör yapılandırmanızın, kullanıcı veya çalışma alanı ayarları yapılandırmanızla çakışmadığından emin olmak istiyorsunuz, çünkü bu değişiklikleri geri alan düzenleyici yapılandırmam olduğu zaman ayar dosyaları ayarlarının uygulanmadığını düşünerek biraz sıkıntı yaşadım.

Yani lonefy.vscode-js-css-html-formattersuçlu. Devre dışı bırakın ve yükleyin HookyQR.beautify.

Şimdi kaydet sekmeleriniz dönüştürülmez.

Sağ alt köşenizde Alanlar: Alanlar: 2

Burada girintiyi ihtiyaçlarınıza göre değiştirebilirsiniz: Girinti Seçenekleri

TypeScript kullanırken, araç çubuğunda söylediklerinden bağımsız olarak varsayılan sekme genişliği her zaman ikidir. Değiştirmek için kullanıcı ayarlarınızda "prettier.tabWidth" ayarını yapmanız gerekir.

Ctrl+ P, Yazım → kullanıcı ayarları, ekleyin:

"prettier.tabWidth": 4

Bu yayında kabul edilen cevap işe yaramazsa, bunu deneyin:

Ben Visual Studio Kod için EditorConfig editörüm yüklü ve boşluklar kullanılarak girinti dosyalara kuruldu benim kullanıcı ayarlarını geçersiz kılma tuttu. Editör sekmeleri arasında her geçiş yaptığımda, girintiyi boşluklara dönüştürsem bile dosyam otomatik olarak sekmelerle girintilendi!

Bu uzantıyı kaldırdıktan hemen sonra, girinti artık editör sekmeleri arasında geçiş yapmıyor ve dosyaları her değiştirdiğimde sekmeleri manuel olarak boşluklara dönüştürmek yerine daha rahat çalışabiliyorum - bu acı verici.

Sevgili topluluk üyelerimiz tarafından sağlanan çok sayıda iyi yanıt var. Aslında C # kod tabSize eklemek istedim ve bu iş parçacığı bulundu. Bulduğum birçok çözüm var ve resmi VS Code belgeleri harika. Sadece C # ayarımı paylaşmak istiyorum:

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

sadece yukarıdaki kodu kopyalayıp settings.jsondosyanıza yapıştırın ve kaydedin. Teşekkürler

Menü Dosyası → Tercihler → Ayarlar

Kullanıcı ayarlarına ekle:

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

daha önce açık bir tane varsa belgenizi sağ tıklayın ve mevcut belgenizin bu yeni ayarları izlemesi için Belgeyi Biçimlendir'i tıklayın.

@ alex-dima'nın 2015'teki çözümü tüm dosyalar için sekme boyutlarını ve boşluklarını değiştirecek ve @ Tricky'nin 2016'daki çözümü sadece geçerli dosya için ayarları değiştiriyor gibi görünüyor.

2017 itibariyle, dil başına çalışan başka bir çözüm buldum. Visual Studio Code Elixir için uygun sekme boyutlarını veya boşluk ayarlarını kullanmıyordu , bu yüzden tüm Elixir dosyaları için ayarları değiştirebileceğimi buldum.

Durum çubuğundaki dili tıkladım (benim durumumda "İksir"), "İksir 'dil tabanlı ayarları yapılandır ..." ı seçtim ve İksire özgü dil ayarlarını düzenledim. Soldaki varsayılan ayarlardan "editor.tabSize" ve "editor.insertSpaces" ayarlarını kopyaladım (gösterildiğine çok memnun oldum) ve sağda değiştirdim.

Harika çalıştı ve şimdi tüm Elixir dil dosyaları uygun sekme boyutu ve boşluk ayarlarını kullanıyor.

Önceki yanıtlar gibi birçok ayar düzenlemesi yapmak zorunda kaldım, bu yüzden birçok değişiklikten sonra hangisinin çalıştığını bilmiyorum.

Ben kapalı ve benim IDE openen ama yaptım son üç şey devre dışı olana kadar hiçbir şey çalıştı lonefy.vscode-js-css-html-formatter, "html.format.enable": true,ve Visual Studio yeniden başlatın.

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

Bu Açısal 2 içinse ve CLI farklı biçimlendirilmesini istediğiniz dosyalar oluşturuyorsa, oluşturulan dosyaları değiştirmek için bu dosyaları düzenleyebilirsiniz:

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

Bir npm güncellemesi çalışmanızı sileceği için şiddetle tavsiye edilmez, ancak bana çok zaman kazandırdı.

Düzenleyiciyi .tabSize4 olarak değiştirmeye çalıştım , ancak .editorConfigbelirttiğim ayarları geçersiz kıldım, bu nedenle kullanıcı ayarlarında herhangi bir yapılandırmayı değiştirmeye gerek yok. Sadece .editorConfig dosyasını düzenlemeniz gerekir:

set indent_size = 4

Kullanıcı3550138 doğru. lonefy.vscode-js-css-html-formatterdiğer yanıtlarda belirtilen tüm ayarları geçersiz kılar. Ancak, yapılandırılabileceği için devre dışı bırakmanız veya kaldırmanız gerekmez.

Tam talimatlar, uzantı kenar çubuğunu açıp bu uzantıya tıklayarak bulunabilir ve düzenleyici çalışma alanında yapılandırma talimatlarını görüntüler. En azından benim için Visual Studio Code sürüm 1.14.1.