VSCodeで半角スペースと全角スペースを可視化する方法【インストールしたら必ず設定】

VSCode、スペースを可視化 プログラミング

VSCodeをインストールした後の初期設定では半角スペースと全角スペースが見た目で判別できにくいんですよね。

このままだと全角スペースが知らぬ間に紛れて、事故の元になってしまいます。

この記事では、VSCodeの半角スペースと全角スペースを可視化して一目でわかるように設定する方法を紹介します。

設定後の表示

半角スペースと全角スペース、可視化後の比較

この記事の通りに設定すると上記の画像のような表示になります。

半角スペースは「・」、全角スペースは灰色の四角でハイライトで表示されます。

おーむ
おーむ

一目で分かりやすい!!

手順を解説していきます。

※以下のVSCodeの画面の画像は日本語化されているので実際の画面と異なる場合があります。

半角スペースを見やすくする

VSCodeを開きます。

VSCodeのメニュー

左上のVSCodeのメニューから「基本設定」→「設定」を開きます。

VSCodeの設定

次に、設定の項目の中から「テキストエディター」→「ファイル」を開いた画面から「settings.jsonで編集」をクリックします。

settings.jsonのファイルに下記のコードを追記します。

"editor.renderWhitespace": "all",

これで半角スペースが薄く「・」で表示されるようになります。

全角スペースを可視化する

こちらは、VSCodeの拡張機能を使います。

拡張機能の検索画面から「zenkaku」を検索して、インストールします。

VSCodeで拡張機能「zenkaku」を検索

インストールが完了したら、「zenkaku」の拡張機能を有効化する必要があります。

まず、⌘command + shift + P でコマンドパレットを開き、「zenkaku」と入力します。

  • Enable Zenkaku:有効化
  • Disable Zenkaku:無効化

「Enable Zenkakuを」を選択して有効化します。

これで全角スペースが四角のハイライト表示となり、一目でわかるようになります。

「zenkaku」を常に適用するには?

こちらの拡張機能「zenkaku」はとても便利なのですが、VSCode起動直後は「zenkaku」の機能が適用されていません。

なので、毎回有効化しないといけないので地味に面倒です。

この面倒くささを解消する為に「zenkaku」を常に有効化する設定も同時に行うこともおすすめします。

まず、ホームディレクトリから.vscode/extensions/mosapride.zenkaku-◯.◯.◯/extension.jsを開きます。

おーむ
おーむ
.vscodeが見当たらない!?っていう人は、⌘command + shift + .
隠しファイルが見えるようになるよ!

5行目のvar enabled = false; var enabled = true; に変更します。

VSCodeを再起動後します。

これでVSCode起動直後から「zenkaku」の拡張機能が有効化された状態になります。

全角スペースの事故を無くそう

色々とスペースを可視化方法がありますが、この方法が一番シンプルで見やすく分かりやすいかなと思います。

可視化していないと全角スペースがコードに紛れてしまってエラーに詰まってしまう恐れがあるので必ず設定しておきたいです。