スペースをタブに変換する


138

私が書いTypeScriptているのはHTMLファイルで、タブがスペースに変換されます。

私のTypeScriptプロジェクトでは、すべてのタブがスペースに変換されます。これをオフにして、スペースではなくタブを使用します。

これは私の設定です:

{
  "editor.insertSpaces": false
}

編集1:

.htmlファイルでは機能するようですが、ファイルでは.ts機能しません。

回答:


246

には3つのオプションがあります.vscode/settings.json

// The number of spaces a tab is equal to.
"editor.tabSize": 4,

// Insert spaces when pressing Tab.
"editor.insertSpaces": true,

// When opening a file, `editor.tabSize` and `editor.insertSpaces` will be detected based on the file contents.
"editor.detectIndentation": true

editor.detectIndentationファイルから検出した場合は、無効にする必要があります。それでも問題が解決しない場合は、優先度の高い設定がないことを確認してください。たとえば、ユーザー設定に保存すると、プロジェクトフォルダーにあるワークスペース設定によって上書きされる可能性があります。

更新:

ファイル » 設定 » 設定を開くか、ショートカットを使用します。

CTRL+ , (Windows、Linux)

+ , (Mac)

更新:

これで、これらのオプションを手動で編集する代わりになります。エディターの右下
にあるセレクターSpaces:4をクリックします。
Ln44、Col。 [スペース:4]。 BOMを使用したUTF-8。 CTRLF。 HTML。 :)

既存のwsをタブに変換する場合は、Marketplaceから拡張機能をインストールします
編集:
既存のインデントをスペースからタブに変換するには、Ctrl+ Shift+キーを押して次のように入力しますP

>Convert indentation to Tabs

これにより、定義された設定に基づいてドキュメントのインデントがタブに変更されます。


1
@Viragos settings.json
v-andrew

1
ワークスペース内のすべてのファイルに対してこのコマンドを実行するにはどうすればよいですか。
Vijender Kumar

134

タブ設定を変更するには、vscodeウィンドウの右下にあるステータスバーのLn / Colテキストの右側のテキスト領域をクリックします。

名前はTab SizeまたはSpacesです。

使用可能なすべてのアクションと設定がメニューに表示されます。

ここに画像の説明を入力してください


3
私にとって、これは現在表示している特定のファイルのこれらの設定のみを変更します。プロジェクト内の他のファイルは古い設定を保持します。どのように普遍的に設定しますか?
カイルヴァセッラ

通常、必要に応じて、単純な正規表現 `{4}`のプロジェクト検索を実行してすべてのファイルを一度に置き換え、\ t(タブの場合)で置き換えます。通常、複数行の文字列リテラルなど、何も壊れないことを確認するために、一致を一目見ます。明らかに、これらの設定を適用して、新しいインデントも目的の文字になるようにします。
cossacksman


13

スペースの代わりにタブを使用したい場合

これを試して:

  1. 進みます。FilePreferencesSettingsか、単にプレスCtrl +を ,
  2. 検索設定トップインサートのバーeditor.insertSpaces
  3. 次のようなものが表示されます。エディタ:スペース挿入すると、おそらくチェックされます。下の画像に示すように、チェックを外してください

エディター:スペースの挿入

  1. Visual Studio Codeを再読み込みします(Press F1キーを押し、➤ reload windowキーを押しますEnter)。

うまくいかない場合は、これを試してください:

インストールされたプラグインJS-CSS-HTML Formatterが原因である可能性があります

(あなたがに行くことによってそれを確認することができFilePreferencesExtensionsか、単に押すCtrl + Shift + X、に有効リストあなたが見つけるJS-CSS-HTMLフォーマッタを

その場合は、このプラグインを変更できます。

  1. Pressを押すF1➤をFormatter config押す➤押すEnter(ファイルが開きますformatter.json
  2. 次のようにファイルを変更します。
 4|    "indent_size": 1,
 5|    "indent_char": "\t"
——|
24|    "indent_size": 1,
25|    "indentCharacter": "\t",
26|    "indent_char": "\t",
——|
34|    "indent_size": 1,
35|    "indent_char": "\t",
36|    "indent_character": "\t"
  1. 保存します(File➤に移動するSaveか、単にCtrl +を 押しますS
  2. Visual Studio Codeを再読み込みします(Press F1キーを押し、➤ reload windowキーを押しますEnter)。

あなたがしたい場合は、スペースの代わりにタブ、修正formatter.jsonファイル:置く1つのスペース任意の引用符ではなく、\t(そうは"\t"なった" ")、そして置く4あなたが見る1。したがって、あなたはこのようになるかもしれません "indent_size": 4, "indent_char": " " "indent_size": 4, "indentCharacter": " ", "indent_char": " ", "indent_size": 4, "indent_char": " ", "indent_character": " "
Alex Logvin

1
RELOAD WINDOWステップは、私が欠けていたものでした。私がしなければならなかったすべてがウィンドウをリロードするだけであったときに、変更を行わないようにするためにボックスをチェックし、設定をいじるプロセスを3回行ったのでイライラしました。先端をありがとう!
RinとLen

8

私の場合、問題は1月の更新後にインストールされたJS-CSS-HTML Formatter拡張機能でした。デフォルトのindent_charプロパティはスペースです。アンインストールすると、奇妙な動作が停止します。


ああ、これは私にとって実際の問題でした。VSコードの設定にいじくり回すのに多くの時間を費やします。最後にこの拡張機能を無効にすることで問題が解決しました。
Avijeet

8

これを公式のvscode設定から確認してください:

// Controls whether `editor.tabSize#` and `#editor.insertSpaces` will be automatically detected when a file is opened based on the file contents.
"editor.detectIndentation": true,

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

// Config the editor that making the "space" instead of "tab"
"editor.insertSpaces": true,

// Configure editor settings to be overridden for [html] language.
"[html]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.autoIndent": false
}

7

以下の設定は私にとってうまくいきます、

"editor.insertSpaces": false,
"editor.formatOnSave": true, // only if you want auto fomattting on saving the file
"editor.detectIndentation": false

上記の設定はすべてのファイルに反映され、適用されます。すべてのファイルを手動でインデント/フォーマットする必要はありません。


3

ファイル - > 設定 - > [設定]または押すだけCtrl+ ,を検索し、スペース、そしてちょうどこのオプションを無効にします:

ここに画像の説明を入力してください

変更を有効にするには、ファイルを再度開く必要がありました。


1
  1. コードを強調表示します(ファイル内)
  2. アプリケーションウィンドウの右下隅にある[タブサイズ]をクリックします。 アプリケーションウィンドウ画像の右下隅のタブサイズ
  3. 適切なインデントをタブに変換するを選択します 適切なインデントをタブに変換する画像を選択します

1

多くのファイルでタブをスペースに変更したいが、個別に開きたくない場合は、左端のツールバーの[ 検索と置換 ]オプション使用するだけでも同様に機能することがわかりました。

最初のボックス(Find)に、ソースコードからタブをコピーして貼り付けます。

2番目のボックス(Replace)に、使用するスペースの数(2または4)を入力します。

押すと...、ボタンを、あなたはすなわち(含めるか、無視するディレクトリを指定することができますsrc/Data/Json)。

最後に、結果のプレビューを確認し、[ すべて置換]をクリックします。ワークスペース内のすべてのファイルが影響を受ける可能性があります。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.