WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

『コードは間違っていないはずなのに何故か動かない!』
『これだからコーディングは嫌いなんだよ!』

となってしまうのは勿体ないことです。

できることなら、無意識に全角スペースを入力してしまうのを阻止するために、Google日本語入力などの設定で半角スペースしか入力できないようにするのがオススメです(shift + spaceで全角スペース)。

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

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

zenkakuのインストール

Visual Studio Codeマーケットプレイス「zenkaku」

マーケットプレイスからインストールするか、Visual Studio Codeの拡張機能の検索画面から「Zenkaku」と検索してインストールできます。

zenkakuインストール

zenkakuの使い方

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

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

有効化するとき> Enable Zenkaku

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

無効化するとき> Disable Zenkaku

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

zenkaku 有効化

常にzenkakuを有効化する

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

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

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

extension.jsの場所

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

enabledをtrueに変更

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね