Visual Studio Code でいくつかの日本語の問題対応を行ってみる

日本語のワード（単語）の区切りが認識できない

上図のように、一般的なテキストエディタやワードプロセッサなどのソフトウェアでの日本語入力では、 Windowsでの操作でいうと Ctrl + 右 or 左 ( + Shift で選択動作 )でカーソルを単語分だけ左右に移動させることができます。

これと同じことを VSCode で行うと、 以下のように日本語で記述された１文がまるまるカーソルが移動してしまいます。

この問題を解決するには、現在のところ２つの方法があります。
その方法について簡単に解説します。

拡張機能(Extension) を使う

もっとも簡単で、キーボードによる操作が、先の日本語対応のワープロなどの動作に近いのは、 Japanese Word Handler という拡張機能(Extension) だと思います。

サイドバーの拡張機能から簡単にインストールすることができます。

上図のように
サイドバーの拡張機能ボタンをクリックし、入力ボックスに "jap" と入力すると、 Japanese Word Handler という拡張機能( Extension )が表示されると思いますので、"インストール" をクリックすればOKです。 あとは、"再読み込み" 実行後に有効となります。

インストール後の動作は、以下のようになります。

特に問題ないようです。

この拡張機能(Extension)の最大の欠点は、マウス操作に対応していないことです。
この拡張機能(Extension)をインストールしても、以下のようにマウスでダブルクリックした際は、先のデフォルトの動作と同じように日本語の１文をまるまる選択してしまいます。

ワード(単語)区切り文字を使う

VSCode では、 デフォルトで ワード(単語)区切り文字 を指定することができます。

[ ファイル(File) → 基本設定(Preferences) → 設定(Settings) ] にて 設定ファイル( settings.json ) を開きます。

入力ボックスに "sepa" と入力すると "editor.wordSeparators" が表示されるので、これをユーザ設定ファイルへコピーして編集します。

{
    ...
    // 以下のように文字列を追加します。
    //"editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",
    "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?、。「」（）；：・？＜＞＋－＊／｛｝｜～＆％＄＃”！’　にをはがのとも",
    ...
}

追加した文字列は、全て全角文字列です。

最後のひらがなは、個人的に良く使う助詞を指定しておくと、かなりうまくヒットしてくれます。 ただし、多すぎるとヒットしすぎて面倒です。うまく調整していく必要があります。

編集を終えたら、保存するだけですぐに利用できるようになります。

以下、上記のとおり編集した時のカーソールのワード（単語）移動の様子です。

拡張機能(Extension)の時の動作と比べてみると、微妙な違いがお分かりいただけたでしょうか？

これぐらいだと気にならないかなぁというレベルかもしれません。

ただ、このやり方は、ひらがなが多くなるほど異なる動作になります。
以下の上が拡張機能(Extension)の時、下がワード(単語)区切り文字を編集した時の動作です。

ただし、ワード(単語)区切り文字を編集するやり方は、マウスのダブルクリックによる動作が、カーソールの移動と同じように動作してくれる点が良い点です。

以下は、そのマウス操作を行った時の様子です。

基本的にカーソールと同じような動きになります。

日本語のワード（単語）が正しく入力候補として表示されない

先の日本語のワード（単語）の問題解決方法のいずれを行っても、全く対応できない問題があります。
それは、ドキュメント内の単語に基づいて入力候補を追加してくれる機能です。

これは、設定の中で以下の項目が有効になっていないと動作しません。（デフォルトでは、動作するようになっています。）

{
    ...
    // ドキュメント内の単語に基づいて入力候補を計算するかどうかを制御します。
    "editor.wordBasedSuggestions": true,
    ...
}

この状態で、入力候補を表示してみます。

以下の上図が日本語の入力候補、下が英語の入力候補になります。

日本語では、やっぱり１文まるまる入力候補として表示されることがわかりますね。
これは、色々と調べましたが解決手段が見つかりませんでした。

そのため、個人的には、かなり鬱陶しいので 先の設定を false として入力候補に入れないようにしています。

全角空白の強調表示ができない

デフォルトでは、以下のように 全角空白がどこにあるかわからないようになります。

これを解決するには、拡張機能( Extension ) Zenkaku がありますので、そちらを利用するのが良いかと思います。

サイドバーの拡張機能ボタンをクリックし、入力ボックスに "zenkaku" と入力すると、 Zenkaku という拡張機能( Extension )が表示されると思いますので、"インストール" をクリックすればOKです。 あとは、"再読み込み" 実行後に有効となります。

再読み込み後、コマンドパネル ( Ctrl + Shift + P ) にて "zenkaku" と入力し、"Enable Zenkaku" を実行します。

すると、以下のように全角空白文字がどこにあるかわかるようになります。

このプラグインが非常にシンプルで良いのですが、 残念ながらデフォルト動作を保存してくれる機能がありません。

そのため、全角空白の強調表示が必要な場合は、コマンドパネルから有効にしなければなりません。
ショートカットに割り付けるという手段もありますが、 個人的には、滅多に消すことがない機能なので、できればデフォルトで有効になって欲しいです。

そこで、以下のように拡張機能(Extend)のソースコード ( .../extensions/mosapride.zenkaku-0.0.3/extension.js ) を編集しました。

2
3
4
5
6
7
8
9
10

...
var vscode = require('vscode');
 
//  以下の箇所を false → true へ編集するとデフォルト有効になります。
//var enabled = false;
var enabled = true;
 
var appearanceSpace = {
...

これで再起動しても、デフォルトで有効となり全角空白が強調表示されます。

ShiftJIS, EUC-JP, JISコード などの日本語文字コードが自動認識されない

VSCode では、 デフォルトで UTF8 の文字コード でファイルを開こうとします。 そのため、UTF8 以外での日本語文字コードで記述されたファイルを開くと文字化けします。

とりあえず、上記のような文字化けを起こした場合の対処は、以下のようにやればOKです。

1. 画面右下の文字コード情報を確認
   
   

   ステータスバーの右には、開いたファイルの文字コード情報が表示されています。 もし、上図のように文字化けしているような場合は、この文字コードをダブルクリックします。

   
   
2. 文字コードを指定し、再度、開き直す
   
   

   先の文字コードをダブルクリックすると、上図のようにコマンドパネルのアクション選択ページが開きます。 ここでエンコード付きで再度開く(Reopen with Encoding) を選択します。
   

   
   
   

   続けて、エンコードの選択ページが開きますから、ここでは、EUC-JPを選択したいので、 "euc" と入力すると、 "Japanese(EUC-JP)" がでてきますので、そちらを選択します。

   
   
3. 文字コードを再度確認
   
   

   上図のように文字化けが解消されればOKです。 一応、画面右下の文字コードを確認しておきましょう。

   
   

   EUC-JP となっていれば間違いないと思います。

   
   

このような感じで文字コードの変更を行うことができますが、いちいち面倒ですね。

そこで、以下のように設定を変更するとファイルを開く際に自動的に文字コードを認識し、その認識した文字コードでファイルを開いてくれます。

[ ファイル(File) → 基本設定(Preferences) → 設定(Settings) ] にて 設定ファイル( settings.json ) を開きます。

ユーザ設定ファイルへ以下の１文を追加します。

{
    ...
    // 以下のように自動で文字コードを認識するようにします。
    "files.autoGuessEncoding": true,
 
    // もしデフォルトのファイル文字コードを utf8 でなく ShiftJis へ変更したい場合は、
    // 以下のように指定します。
    "files.encoding": "shiftjis",
    ...
}

この設定を保存しれば、即、有効となります。

早速、先のファイルを開いてみます。

上図のように、一発で認識できました。

ただ、これを設定したからと言って、100% 思ったとおりの文字コードで開いてくれるわけではありませんので、 手動による 先の文字コード変換手順は、要らなくなるわけではないことに注意してください。