# 全角スペースを可視化してくれるVisual Studio Codeの拡張機能「zenkaku」

URL: https://webrandum.net/vscode-extention-zenkaku/
公開日: 2019-08-18
更新日: 2020-07-17
カテゴリー: コーディング
タグ: Visual Studio Code
出典: Webrandum（著者: サイトウ マサカズ）

## この記事の要約

- 「[zenkaku](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)」をVisual Studio Codeにインストールして、コマンドパレットから`Enable Zenkaku`で全角スペースをハイライトできる

- 常にオンにしたい場合は、ホームディレクトリの`.vscode/extensions/mosapride.zenkaku-◯.◯.◯/extension.js`を開いて、`var enabled = false;`を`true`に変える

コードを書くのに慣れていない人によくあるのが、いつの間にか全角スペースを入力してしまって、コードが動かなくなってしまうこと。

- 「コードは間違っていないはずなのに何故か動かない！」

- 「これだからコーディングは嫌いなんだよ！」

このようになってしまうのは、もったいないことです。

ちょっとしたミスを減らすことで余計なつまづきが減り、学習効率も上がります。

## そもそも全角スペースを無意識に入力できないようにする

できることなら、無意識に全角スペースを入力できないようにするのがオススメです。

ATOKやGoogle日本語入力など入力ソースの設定で、spaceを押しても半角スペースしか入力できないようにできます（全角スペースを入力したいときは、かな入力でshift + space）。

- [ATOK](https://webrandum.net/atok-preferences-input-conversion/)の場合は［環境設定］→［入力・変換］→［入力補助］で設定

- [Google日本語入力](https://webrandum.net/google-japanese-input-general/)の場合は［環境設定］→［一般］→［スペースの入力］で「半角」を選択

[ATOKの使いやすさに直結する「入力・変換」タブの設定項目](https://webrandum.net/atok-preferences-input-conversion)

[Google日本語入力の基本的な設定項目](https://webrandum.net/google-japanese-input-general)

しかし、入力ソースから変えるというのは面倒なのか、なかなか設定してもらえません。

じゃあ拡張機能なら難しくないだろうということで、「zenkaku」という「全角スペースを灰色の四角でハイライトしてくれる」拡張機能をオススメしています。

## zenkakuのインストール

![Visual Studio Codeマーケットプレイス「zenkaku」](https://webrandum.net/mskz/wp-content/uploads/2019/08/image_1-15-1024x549.png)

[zenkaku - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)

[マーケットプレイス](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)からインストールするか、Visual Studio Codeの拡張機能の検索画面から「Zenkaku」と検索してインストールできます。

![zenkakuインストール](https://webrandum.net/mskz/wp-content/uploads/2019/08/image_2-13-1024x624.png)

## zenkakuの使い方

zenkakuは拡張機能を入れただけでは機能せず、使いたいときには有効化する必要があります。

有効化するには、command + shift + Pでコマンドパレットを表示して、有効化するコマンドを入力します。

```
有効化するとき> Enable Zenkaku
```

逆に無効化したいときは、無効化用のコマンドを入力します。

```
無効化するとき> Disable Zenkaku
```

有効化すると、全角スペースには灰色の四角でハイライトされるようになります。

![zenkaku 有効化](https://webrandum.net/mskz/wp-content/uploads/2019/08/image_3-12.png)

## 常にzenkakuを有効化する

便利なzenkakuですが、Visual Studio Code起動直後には有効化にならないので、毎回コマンドを入力する面倒くささがあります。

そこで、常にzenkakuが有効化になるように設定します。

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

![extension.jsの場所](https://webrandum.net/mskz/wp-content/uploads/2019/08/image_4-5-1024x459.png)

あとは、`var enabled = false;`と書かれてあるところを`true`に変更して保存します。

![enabledをtrueに変更](https://webrandum.net/mskz/wp-content/uploads/2019/08/image_5-5.png)

これでVisual Studio Codeを再起動すれば、起動時からzenkakuが有効化された状態になっています。

## 意識しなくてもミスしない環境を作る

全角スペースに限ったことではありませんが、何事も「間違えないように気をつけよう」「慣れれば大丈夫」で片付けてしまうのではなく、そもそも意識しなくてもミスしないためにどうすればいいか考えると、違った解決策が見えてきます。

そもそもコーディングをするときに「全角スペースを入力しないように気をつけて脳のリソースを削る」が、いい解決策だと思う人は少ないはずです。

100%コードに意識を集中した方がいいですし、特に勉強中の人はなおさらコードに集中した方がラクに成長できます。

他にもコーディング初心者が入力ミスを減らすためにできる設定を過去にまとめているので、こちらもぜひご覧下さい。

[コーディング初心者が入力ミスを減らすためにできる設定](https://webrandum.net/beginner-input-setting)