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

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

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

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

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

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

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

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

• ATOKの場合は［環境設定］→［入力・変換］→［入力補助］で設定
• Google日本語入力の場合は［環境設定］→［一般］→［スペースの入力］で「半角」を選択

Webrandum

ATOKの使いやすさに直結する「入力・変換」タブの設定項目

https://webrandum.net/atok-preferences-input-conversion

ATOKは設定する項目が多く、どこから手をつけていいか分からなくなってしまいますが、今回はとりあえず、ATOKの環境設定の中で最も基本的な「入力・変換」の設定項目をまとめておきます。入力・変換の設定場所メニューバーの入力ソースをクリックして、［環境設定...］をクリックします。ATOK 環境設定の「入力・変換」タブが今回設定する項目になります。基本「基本」の項目では、入力の基本になる設定ができます。項目内容備考入力「ローマ字入力」か「カナ入力」か選択「ローマ字入力」一択変換漢字の変換方法を設定する ショ...

Webrandum

Google日本語入力の基本的な設定項目

https://webrandum.net/google-japanese-input-general

macOS標準の「ことえり」も最近は精度が上がってきましたが、それ以外の部分でGoogle日本語入力のほうが設定できる部分が多かったり、ショートカットキーで辞書登録画面を表示できるので、Google日本語入力を使用しています。今回はそんなGoogle日本語入力の基本的な環境設定部分をまとめておきます。環境設定メニューバーの入力ソースからGoogle 日本語入力の［環境設定］を選択すると、環境設定画面が開きます。とりあえず、環境設定画面の「General（一般）」だけ設定しておけば問題ありません。Basics項目内容備考Input mode入力モ...

しかし、入力ソースから変えるというのは面倒なのか、なかなか設定してもらえません。
じゃあ拡張機能なら難しくないだろうということで、「zenkaku」という「全角スペースを灰色の四角でハイライトしてくれる」拡張機能をオススメしています。

zenkakuのインストール

marketplace.visualstudio.com

zenkaku - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

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

zenkakuの使い方

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

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

有効化するとき> Enable Zenkaku

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

無効化するとき> Disable Zenkaku

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

常にzenkakuを有効化する

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

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

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

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

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

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

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

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

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

Webrandum

コーディング初心者が入力ミスを減らすためにできる設定

https://webrandum.net/beginner-input-setting

コーディング初心者の人で多いのが、コードとは関係のない部分でつまづいてしまっている状況です。 単語のスペルミス 閉じ括弧忘れ 全角スペースを使ってしまっていたこうしたコードと関係ない部分で、つまづいて挫折するのは非常にもったいないです。今回はそうならないための対処方法や設定についてまとめます。モダンなテキストエディタを使うなんでもいいのですが、拡張機能を追加してやりたい事に合わせてカスタマイズできるテキストエディタを使うのをオススメします。 Visual Studio Code Atom Brackets Sublime Text2019年4月...