web-dev-qa-db-ja.com

Visual Studioのコードを使用するときにタブからスペースへの変換係数をカスタマイズする方法

Visual Studioのコードを使用するときにタブからスペースへの変換係数をカスタマイズする方法

たとえば、今HTMLでは、1回のプレスで2つのスペースが作成されるようです。 TABしかし、TypeScriptでは4を生成します。

visual-studio-codevscode-settings
645
J. Abrahamson

既定では、Visual Studioコードは、開いたファイルに応じてインデントオプションを推測しようとします。

あなたは"editor.detectIndentation": falseによって推測される字下げをオフにすることができます。

Windows メニューのFile→Preferences→User Settingsおよび Mac のメニューで、これら3つの設定を使って簡単にカスタマイズできますコード→設定→設定または⌘,：

// 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
888
Alex Dima

私はバージョン1.21を実行していますが、これは以前のバージョンにも当てはまるかもしれないと思います。

画面の右下を見てください。 SpacesまたはTab-Sizeのようなものが見えるはずです。

私のものはスペースを示しています - > enter image description here

  1. Spaces（またはTab-Size）をクリックしてください
  2. Indent Using SpacesまたはIndent using Tabsを選択してください
  3. あなたが好きなスペースまたはタブの量を選択してください。

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

510
Tricky

まあ、新しいバージョンのVisual Studio Codeでは、tabSizeに異なるファイルタイプを指定することができます。これが、デフォルトの4つのスペースとJavaScript/JSON 2のスペースを持つsettings.jsonの例です。

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

シモンズ：まあ、あなたはこのファイルを開く方法がわからない場合は、次のことができます。左下の歯車をクリックしてから - >設定

114
Xin Wang

デフォルトでは、Visual Studio Codeは現在開いているファイルのインデントを自動検出します。この機能をオフにして、2つのスペースなど、すべてのインデントを作成する場合は、[ユーザー設定]または[ワークスペース]設定で次の操作を行います。

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}
102
Jim Doyle

EditorConfig とその Visual Studioコード拡張 でファイルタイプでタブサイズを制御できます。それから私達は作ることができます Alt + Shift + F 各ファイルタイプに固有のものです。

Installation

ext install EditorConfig

設定例

.editorconfig

[*]
indent_style = space

[*.{cs,js}]
indent_size = 4

[*.json]
indent_size = 2

settings.json

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

49
Shaun Luttin

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

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

6
user3550138

私のエディタ設定がそれらの変更を元に戻したときに設定ファイルの設定が適用されていなかったことに少し煩わしさがあったので、あなたのeditorconfigがあなたのユーザまたはワークスペースの設定と衝突しないようにしたいです。

6
Travis Brown

右下隅に、Spaces： Spaces：2 があります。

ニーズに合わせてインデントを変更できます。 インデントオプション

3
Dacomis

この記事で受け入れられた答えがうまくいかない場合は、これを試してみてください。

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

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

2
dhruvpatel

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

ユーザー設定に追加します。

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

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

1
Gmoney Mozart

VSCバージョン1.31.1以上で（私は思う）。 sed Alex Dima。のようにこれを簡単にカスタマイズすることができます。 

  • ウィンドウのメニューのファイル→設定→ユーザー設定または短いキーを使用ctr + shift + p
  • Macの場合はメニューコード→設定→設定または⌘、

enter image description here

enter image description here

1
Andrey Patseiko

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

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

"prettier.tabWidth": 4
1
Steve Hanov

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

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

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

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

1
Kevin Peter

Vscodeできれいな拡張子を使用する場合は、これをsettings.jsonファイルに追加してみてください。

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

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

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

set indent_size = 4
0
Gh111

キーボードのcmdまたはctrlをクリックするだけで、設定ページが開き、下にスクロールすると、タブサイズの場所が表示されます。

0
Samuel Chen

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

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

Npmアップデートはあなたの仕事を削除するので大いに推奨されませんが、それは私に多くの時間を節約させました。

0
Ben Taliadoros

User3550138は正しいです。 lonefy.vscode-js-css-html-formatterは、他の回答に記載されているすべての設定をオーバーライドします。ただし、構成できるので無効にしたりアンインストールしたりする必要はありません。

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

0
DRL