web-dev-qa-db-ja.com

Visual Studioコードで空白文字を表示する

スペース文字のように空白文字をVisual Studioコードで表示することは可能ですか？

settings.jsonにはそれに対するオプションはありませんが（ Atom.io のオプションですが）、CSSを使用して空白文字を表示することはできませんでした。

visual-studio-codewhitespacevscode-settings
294
eirvandelden

VS Code 1.6.0以上

aloisdg below ）で述べたように、editor.renderWhitespaceはnone、boundaryまたはallのいずれかを取るenumになりました。すべての空白を見るには：

"editor.renderWhitespace": "all",

VS Code 1.6.0より前

1.6.0より前では、editor.renderWhitespaceをtrueに設定する必要がありました。

"editor.renderWhitespace": true
463
revo

メインメニュー View -> Toggle Render Whitespaceからも実行できます。その間、Visual Studioコードを使用していますv 1.8.x

66
Coder Absolute

キーボードショートカットを使用して空白文字を切り替えるを使用したい場合は、keybindings.jsonファイルにカスタムバインディングを追加できます（ ファイル>設定>キーボードショートカット）.

例：

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "ctrl+shift+i",
        "command": "editor.action.toggleRenderWhitespace"
    }
]

ここで私はの組み合わせを割り当てました Ctrl+Shift+i 目に見えない文字を切り替えるには、もちろん他の組み合わせを選ぶことができます。

49
informatik01

Visual Studioコードで空白文字を表示する

次のコードを追加して、setting.jsonを変更してください。

// Place your settings in this file to overwrite default and user settings.
{
    "editor.renderWhitespace": "all"
}

こんな感じ！
（PS： "true" option！はありません、それでも動作します。） enter image description here

45
xgqfrms

editor.renderWhitespace : trueがあなたのVSCodeに与える変更を説明するために、私はこのスクリーンショットを追加しました：
enter image description here .

どこで Tab →と Space.は

24
Zack S

それはもうbooleanではありません。彼らはenumに切り替えました。これで、none、boundary、およびallから選択できます。

// Controls how the editor should render whitespace characters,
// posibilties are 'none', 'boundary', and 'all'.
// The 'boundary' option does not render single spaces between words.
"editor.renderWhitespace": "none",

オリジナルの差分は GitHub で見ることができます。

15
aloisdg

F1ボタンを押してから、「Toggle Render Whitespace」と入力するか、覚えている部分を入力します。

私はvscodeバージョン1.22.2を使っているので、これは2015年には存在しなかった機能かもしれません。

4
Stevelot

Diffにgit diffと同様に空白を表示させるには、diffEditor.ignoreTrimWhitespaceをfalseに設定します。 edit.renderWhitespaceはほんのわずかしか役に立ちません。

// Controls if the diff editor shows changes in leading or trailing whitespace as diffs
"diffEditor.ignoreTrimWhitespace": false,

設定を更新するには

ファイル>設定>ユーザー設定

Macユーザーの方へ：環境設定メニューはファイルではなくコードの下にあります。例えば、「コード」>「設定」>「ユーザー設定」などです。

これにより、「デフォルト設定」というタイトルのファイルが開きます。エリア//Editorを展開します。今、あなたはこれらすべての神秘的なeditor.*設定がどこにあるのか見ることができます。 （CTRL + F）でrenderWhitespaceを検索してください。私の箱には、

// Controls how the editor should render whitespace characters, posibilties are 'none', 'boundary', and 'all'. The 'boundary' option does not render single spaces between words.
"editor.renderWhitespace": "none",

混乱を招くように、 left ウィンドウの "Default Settings"は編集できません。 "settings.json"というタイトルの right ウィンドウを使用してそれらを上書きする必要があります。貼り付け設定を「デフォルト設定」から「settings.json」にコピーできます。

// Place your settings in this file to overwrite default and user settings.
{
     "editor.renderWhitespace": "all",
     "diffEditor.ignoreTrimWhitespace": false
}

私はrenderWhitespaceをオフにしました。

4
P.Brian.Mackey

空白を表示するオプションは、表示メニューのオプションとして、Visual Studio Codeのバージョン1.15.1の "Toggle Render Whitespace"として表示されます。

4
Dragonthoughts

  1. ユーザー設定を開きます。キーボードショートカット：CTR + SHIFT + P->設定：ユーザー設定を開きます。

  2. 検索フィールドに挿入ホワイトスペース、選択allパラメーター enter image description here

2
Andrey Patseiko

V1.37の更新：選択したテキスト内の空白のみをレンダリングするオプションを追加します。 v1.37リリースノート、空白のレンダリング を参照してください。

editor.renderWhitespace設定はselectionオプションをサポートするようになりました。このオプションを設定すると、選択したテキストにのみ空白が表示されます。

"editor.renderWhitespace": "selection"

そして

"workbench.colorCustomizations": {    
  "editorWhitespace.foreground": "#fbff00"
}

demo of whitespace render in selection

2
Mark