タブからスペースへの変換係数をカスタマイズするにはどうすればよいですか？

Visual Studio Codeを使用する場合、タブからスペースへの変換係数をどのようにカスタマイズしますか？

たとえば、現在HTMLではTAB、1回のプレスで2つのスペースが生成されるように見えますが、TypeScriptでは4つ生成されます。

デフォルトでは、Visual Studio Codeは、開いているファイルに応じてインデントオプションを推測しようとします。

を介してインデントの推測をオフにすることができます"editor.detectIndentation": false。

あなたはこれらのための3つの設定を経てこれを簡単にカスタマイズすることができますWindowsのメニューでファイル → 設定 → ユーザー設定とのためのMacのメニューでコード → 設定 → 設定か⌘,：

// 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を実行していますが、これは以前のバージョンにも当てはまると思います。

画面の右下を見てください。あなたは言う何か見るべきSpacesかをTab-Size。

鉱山はスペースを示しています→

1. スペース（またはTab-Size）をクリックします。
2. スペースを使用したインデントまたはタブを使用したインデントを選択します
3. スペースまたはタブの数を選択します。

これは、プロジェクト全体ではなく、ドキュメントごとにのみ機能します。プロジェクト全体に適用する場合は"editor.detectIndentation": false、ユーザー設定にも追加する必要があります。

まあ、開発者の方法が好きな場合は、Visual Studio Codeを使用して、にさまざまなファイルタイプを指定できますtabSize。settings.jsonデフォルトの4つのスペースとJavaScript / JSONの2つのスペースを使用した私の例を次に示します。

{
  // 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：ええと、このファイルを開く方法がわからない場合（特にVisual Studio Codeの新しいバージョンの場合）、次のことができます。

1. 左下の歯車→
2. 設定→右上設定を開く

デフォルトでは、Visual Studio Codeは現在開いているファイルのインデントを自動検出します。この機能をオフにしてすべてのインデント（たとえば2つのスペース）を行う場合は、ユーザー設定またはワークスペース設定で次のようにします。

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

私たちはできるファイルの種類によってタブのサイズを制御してEditorConfigとそのVSコードについてEditorConfig拡張。次に、各ファイルタイプに特定のAlt+ Shift+をF指定できます。

取り付け

ext install EditorConfig

構成例

.editorconfig

[*]
indent_style = space

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

[*.java]
indent_size = 4

[*.go]
indent_style = tab

settings.json

EditorConfigは、エディター用に構成されたsettings.jsonをオーバーライドします。変更する必要はありませんeditor.detectIndentation。

Visual Studio Codeでよりきれいな拡張機能を使用する場合は、これをsettings.jsonファイルに追加してみてください。

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

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

ではVisual Studioのコードバージョン1.31.1以降（と思う）：同様のsedのアレックス・ディマを、あなたがのために、これらの設定を経てこれを簡単にカスタマイズすることができます

• メニュー内のWindows ファイル → 設定 → ユーザー設定または短いキーを使用Ctrl+ Shift+P
• Macのメニューでコード → 設定 → 設定や⌘、

editorconfigがユーザーの設定やワークスペースの設定と競合していないことを確認する必要があります。設定ファイルの設定が、エディターの設定が適用されていないときに適用されないのではないかと少し迷惑をかけたためです。

それはlonefy.vscode-js-css-html-formatter非難することです。それを無効にして、をインストールしてくださいHookyQR.beautify。

保存すると、タブは変換されません。

右下隅にスペースがあります。 スペース：2があります。

そこで、必要に応じてインデントを変更できます： インデントオプション

TypeScriptを使用する場合、ツールバーの表示内容に関係なく、デフォルトのタブ幅は常に2です。変更するには、ユーザー設定で「prettier.tabWidth」を設定する必要があります。

Ctrl+ P、タイプ →ユーザー設定、追加：

"prettier.tabWidth": 4

この投稿で承認された回答が機能しない場合は、試してみてください。

私が持っていたVisual StudioのコードのためのEditorConfigを私のエディタにインストールされ、それがスペースを使ってインデントファイルに設定された私のユーザー設定を上書きし続けました。エディターのタブを切り替えるたびに、インデントをスペースに変換した場合でも、ファイルがタブで自動的にインデントされます。

この拡張機能をアンインストールした直後は、インデントがエディターのタブを切り替えるときに変更されなくなり、ファイルを切り替えるたびに手動でタブをスペースに変換する必要がなく、快適に作業できます。

私たちの最愛のコミュニティメンバーから提供された良い答えはすでにたくさんあります。私は実際にC＃コードtabSizeを追加したかったのですが、このスレッドを見つけました。私が見つけた多くのソリューションがあり、公式のVS Codeドキュメントは素晴らしいです。C＃設定を共有したいだけです。

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

上記のコードをコピーしてsettings.jsonファイルに貼り付け、保存するだけです。ありがとう

メニューファイル → 設定 → 設定

ユーザー設定に追加：

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

次に、文書を既に開いている場合は右クリックし、[文書の書式設定]をクリックして、既存の文書がこれらの新しい設定に従うようにします。

2015年の@ alex-dimaのソリューションはすべてのファイルのタブサイズとスペースを変更し、2016年の@Trickyのソリューションは現在のファイルの設定のみを変更するように見えます。

2017年の時点で、言語ごとに機能する別のソリューションを見つけました。Visual Studio CodeはElixirに適切なタブサイズまたはスペース設定を使用していませんでしたにため、すべてのElixirファイルの設定を変更できることがわかりました。

ステータスバーの言語（私の場合は「Elixir」）をクリックし、「 'Elixir'言語ベースの設定を構成...」を選択して、Elixir固有の言語設定を編集しました。左側のデフォルト設定から「editor.tabSize」と「editor.insertSpaces」の設定をコピーし（これらが表示されてうれしい）、次に右側で変更しました。

それはうまくいきました、そして今すべてのエリクサー言語ファイルは適切なタブサイズとスペース設定を使います。

以前の回答のように多くの設定編集を行わなければならなかったので、多くの変更を行った後、どれがそれを機能させたのかわかりません。

IDEを閉じて開くまで何も機能しませんでしたが、最後に行った3つのことはを無効にしlonefy.vscode-js-css-html-formatter、 "html.format.enable": true,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,
}

これがAngular 2用であり、CLIが異なるフォーマットのファイルを生成している場合、これらのファイルを編集して、生成されるものを変更できます。

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

npmの更新により作業が削除されるため、あまりお勧めしませんが、多くの時間を節約できました。

エディター.tabSizeを4 に変更しようとしました.editorConfigが、指定した設定はすべて上書きされるため、ユーザー設定の構成を変更する必要はありません。.editorConfigファイルを編集するだけです。

set indent_size = 4

User3550138は正しいです。lonefy.vscode-js-css-html-formatter他の回答で言及されているすべての設定を上書きします。ただし、設定できるため、無効化またはアンインストールする必要はありません。

詳細な説明は、拡張機能のサイドバーを開いてこの拡張機能をクリックすると表示され、エディターのワークスペースに構成手順が表示されます。少なくとも、Visual Studio Codeバージョン1.14.1ではそれが可能です。