VSCode拡張の高速な英語辞書ツールをつくりました(Hovering Dictionary)

## Abstract

VSCode上でサクッと辞書を引ける拡張機能をリリースしました。
![demo.gif](https://github.com/Take-Me1010/vscode-hovering-dictionary/blob/main/image/demo.gif?raw=true)

ダウンロードはこちら↓

https://marketplace.visualstudio.com/items?itemName=Take-Me1010.hovering-dictionary

:::note warn
~~現状、複数のwindowで利用しようとするとエラーが出るようです...~~
-> v0.2.2で対応しました！
:::

## 背景

(飛ばしても良いです。)

最強のブラウザ辞書ツール: [Mouse Dictionary](https://qiita.com/wtetsu/items/c43232c6c44918e977c9)をご存知でしょうか。

https://qiita.com/wtetsu/items/c43232c6c44918e977c9

ブラウザ上でサクッと辞書を引くことを可能にするChromeの拡張機能で、私も普段論文を読んだりする時にお世話になっています。またMouse Dictionaryは技術文書にありがちなcamelCase, snake_caseみたいな表記にも問題なく使えるという点で、技術文書を読むことにも有効です。
したがって、このような機能は、英語で書かれた変数名やコメントを触るコードエディタとも親和性が高いと考えています。
しかし当たり前ですが、Mouse DictionaryはVSCode上で動作しません。
そこで「ないのなら作ってしまえ」ということで、Mouse Dictionaryのコードを一部用いてVSCodeの拡張機能として作成・リリースしました。

## 特徴

最強のブラウザ辞書ツール: [Mouse Dictionary](https://qiita.com/wtetsu/items/c43232c6c44918e977c9)をVSCode上で再現しました。
したがって次のような特徴をそのまま引き継いでます。

- 単語や熟語の検出に強い
- 好きな辞書データを簡単にインポートできる(熟語データの豊富な英辞郎オススメ)
- 技術文書にありがちなcamelCase, snake_caseみたいな表記にも問題なく使える

| 例                                 | マウス下のテキスト      | 引ける語            |
| ---------------------------------- | ----------------------- | ------------------- |
| 単語にバラす                       | camelCase               | camel case          |
| 単語にバラす                       | snake_case              | snake case          |
| 不規則変化な過去形を含む           | dealt with              | deal, deal with     |
| 単語が繋がっていても熟語として認識 | spinout                 | spin out            |
| 途中に形容詞などが挟まる場合       | make some modifications | make a modification |
| 所有格                             | changed our mind        | change one's mind   |
| 綴りスタイルの違い                             | programme        | program   |
| 上記の他にもいろいろ                 | pros/cons | pros and cons |

なお現状、「make some modifications」-> 「make a modification」はマウスで「make some modifications」を選択する必要があります。(Mouse Dictionaryではその周辺にマウスを持っていくだけでよい。)

## ソースコード

https://github.com/Take-Me1010/vscode-hovering-dictionary

`vscode.WebviewViewProvider`, `vscode.HoverProvider`を利用してパネルとホバーのviewを作成しています。
また辞書データの格納には、拡張機能が使用を許されているディレクトリに[level](https://github.com/Level/level)でデータベースを作成して利用しています。

## 使い方

### インストール

https://marketplace.visualstudio.com/items?itemName=Take-Me1010.hovering-dictionary

### デフォルト辞書の読み込み

インストールすると、デフォルトの辞書データを読み込むか聞かれます。
良ければYesとしてください。
ここでNoを押しても、コマンドパレットから`hovering-dictionary: load default dictionary`を選択することで後から読み込むことも可能です。

簡単な単語であれば、マウスをかざすだけで辞書の検索結果が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/318413d5-47d0-78db-cfb5-02dde5173cca.png)

### ホバーのON/OFF

右下の拡大鏡のようなアイコンをクリックすることで、ホバーの表示をON/OFFできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/7d73e03c-f951-15ea-ea66-e6c3b40c2c7e.png)

コマンドパレットからは、`hovering-dictionary: toggle whether the hover is shown or not`を実行することで切り替えられます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/60d23258-f6a4-9b01-ff4d-ba2ec1a20162.png)

ショートカットキーに登録しておくのが便利かもしれません。次のコマンドパレットから、ショートカットキーの設定ファイル`keybindings.json`を開いて...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/ae7e60f4-71a2-605d-2867-55c4fb9457dd.png)
次のように追加するとオッケーです。

```jsonc:keybindings.json
{
    // ...
    {
        "key": "ctrl+alt+z",
        "command": "hovering-dictionary.toggle-hover-visibility"
    }
}
```

ショートカットキー`"ctrl+alt+z"`は好きなように変えてください。

### 英辞郎

このままでも46,971語のデータで、十分に便利ですが、やはり熟語などは物足りません。
そこで熟語などもたくさん含んだ辞書データをインポートすると、格段に便利になります。

**英辞郎が大変おすすめです**。

https://booth.pm/ja/items/777563

たった500円でQoLが爆上がりします。というかデモもこの辞書データが入った状態のものです。
**Mouse Dictionaryのために既に購入されていた方は、そのファイルをそのままインポートできます**。

`cmd+shift+p`でコマンドパレットを開いて、`import your dictionary file`を選択・実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/12ece9f9-896f-9552-de97-9f56c49cdb70.png)
ファイルの選択がポップアップしますので、そこで購入・ダウンロードした英辞郎のファイル(EIJIRO-1448.TXT)を選択します。
続いてformatはEIJIRO, encodingはSHIFT-JISを選択してください。
辞書データの読み込みにそこそこかかりますが、ロードが終わるとあなたのVSCodeは最強の簡易辞書へと変身します。