Help us understand the problem. What is going on with this article?

VS Code でドキュメントの空白文字を見やすくしてみる

More than 1 year has passed since last update.

VS Code で、ドキュメント内の空白文字を可視化させて、判別し易くしてみるにはどうすれば良いか? 一例として、ちょっとまとめてみました。

もともとは、下記のようなつぶやきを見つけたので、

このように返してみたら、

と、返ってきたので調べてみた。(考えもしなかった)

勉強になりました。

標準設定 editor.renderWhitespace で空白文字表示有効にしつつ

VS Code 1.6 で実装された機能。
エディタで空白文字を可視化する手段としては、settings.json に editor.renderWhitespace 設定が提供され、これを有効にすると、空白文字を「・」(ビュレット(bullet)、中点、中黒) に置き換えて表示してくれるようになりました。

設定可能な値:

  • none : スペースを表示しない
  • all : すべてのスペースを表示する
  • boundary : 単語間の単一スペースは表示しない

none (ビュレットは表示されない):
2017-01-01-22-12-23.png

all (全ての空白にビュレットを表示):
2017-01-01-22-13-25.png

boundary (単語間の単一スペースにはビュレットを表示しない):
2017-01-01-22-14-29.png

allboundary は好みで。

詳しくは、September 2016 (version 1.6) のリリースノートで。

さらに Whitespace+ で色づけして

空白文字に色づけをして表示することが可能な拡張機能。

さらに、空白文字を検出するためのパターンを正規表現でカスタマイズすることが可能。
enabled/disabled はトグル操作となるため、必要なときにコマンドパレットから Whitespace+ Toggle を実行するか、Whitespace+ Config コマンドを実行し、"autoStart":true に設定することで常に有効にすることもできる。

または、拡張機能のコマンドを適当なキーバインドに割り当てます。(thanks! @takemori_kondo)

コマンド デフォルトのキーバインド 概要
extension.toggleWhitespacePlus なし Toggle the display of the extension

Ctrl + Shift + tab キーに、割り当てる例:
ファイル > 基本設定 > キーボードショートカット > keybindings.json

// 既定値を上書きするには、このファイル内にキー バインドを挿入します
[
    // https://github.com/davidhouchin/whitespace-plus/blob/master/package.json
    { "key": "ctrl+shift+tab",        "command": "extension.toggleWhitespacePlus",
                                         "when": "editorTextFocus" }
]

表示対象となるのは space, tab, newline, trailing (trailing のみ default disabled で Whitespace+ Mode コマンドで切り替えるか Whitespace+ Config で trailing を "enabled": true にする) となり、space は、editor.renderWhitespace のビュレットを表示しつつ色づけしてくれる。
色も、VS Code に適用している light または dark テーマ別に設定できる。

space のデフォルトパターンは

"pattern": "\\s"

となっているので、スペースはすべて検出対象となる。全角スペースも対象になる。

"editor.renderWhitespace": "boundary" 設定のように、単語間の単一スペースを対象としたくない場合は、

"pattern": "\\s{2,}"

のようにすると良いみたいだけど、これだと、連続したスペースの場合、スペース毎の区切りが表示されなくなってしまう。 

Whitespace+ 無効 ("pattern": "\\s", "editor.renderWhitespace": "boundary"):
2017-01-01-22-33-12.png

Whitespace+ 有効 ("pattern": "\\s", "editor.renderWhitespace": "all"):
2017-01-01-22-50-17.png

Whitespace+ 有効 ("pattern": "\\s"):
2017-01-01-22-34-18.png

Whitespace+ 有効 ("pattern": "\\s{2,}"):
2017-01-01-22-37-17.png

indent-rainbow でグラデーションにする

インデントを 4 色で識別し易くする拡張機能。
Whitespace+ で利用する色と不透明度の指定次第になりますが、重ねてグラデーションのように表示することも可能です。
不透明が高いと意味ないのであまりオススメしません。が、Whitespace+ を無効にしたときには、インデントが見やすくなるのでインストールしておいても損はないと思ってます。

indent-rainbow + "editor.renderWhitespace": "all":
2017-01-01-22-58-42.png

indent-rainbow + Whitespace+ ("pattern": "\\s", "editor.renderWhitespace": "all"):
2017-01-01-23-16-46.png

indent-rainbow + Whitespace+ ("pattern": "\\s{2,}", "editor.renderWhitespace": "all"):
2017-01-01-23-16-03.png

そして全角スペースも

全角のスペースも時には気が付きにくく。
Whitespace+ では全角スペースも判別してくれるけど、editor.renderWhitespace の設定は適用されないのでビュレットは表示されず少し見づらくなる。
そこで、zenkaku 拡張機能を追加することで、全角スペースだけを □ で表示してくれるようになり見やすくなる。

なにもなし:
2017-01-01-21-45-43.png

zenkaku 拡張機能を有効に:
2017-01-01-21-46-39.png

Whitespace+ のみ ("pattern": "\\s"):
2017-01-01-21-52-33.png

zenkaku + Whitespace+ 拡張機能の組み合わせ "pattern": "\\s":
2017-01-01-21-50-24.png

Whitespace+ のみ ("pattern": "\\s{2,}"):
2017-01-01-21-54-37.png

zenkaku + Whitespace+ 拡張機能の組み合わせ "pattern": "\\s{2,}":
2017-01-01-21-56-08.png

まとめ

よくわからなくなってしまったけど、Whitespace+ 使ってみると、思わぬところにスペースを入れてしまっているのがわかったりと見えないものが見えるひとつの手がかりになることがわかりました。

色をいじるときは

Color Highlight 拡張機能をインストールしておけば、ドキュメント内に書かれているカラーコードをその色でハイライト表示してくれます。
さらに、Color Picker 拡張機能があれば、カラーコードにカーソルを置き、Color Picker を呼び出すことで、値を渡すことができるので色々と捗るかと思います。

2017-01-01-23-11-03.png

satokaz
コリドラスがスキ
oracle
Oracle Cloudは、最先端の機能をSoftware as a Service、Platform as a ServiceおよびInfrastructure as a ServiceおよびData as a Serviceとして提供します。
https://cloud.oracle.com/ja_JP/home
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした