【VSCode拡張】Rubyのクラスジャンプをいい感じにしたい【作ってみた】


## 拡張機能

* [拡張機能](https://marketplace.visualstudio.com/items?itemName=ykhirao.vscode-search-files&ssr=false#overview)
* [GitHub](https://github.com/ykhirao/vscode-search-files)

## 対象読者と解決すること

（既存機能ですでに存在したらごめんなさい！）

* CMD + P でファイル名検索をよく使う方向け
* Ruby/Solargraphでメソッドリンクとかよく使っている方向け

以下のようなモジュールがあったときに `Users` をクリックすると、検索結果は２つでてきます。

```ruby
API::V1::Users.new.get_all
API::V2::Users.new.get_all
```

コードベースが大きくなればなるほど、クラス・モジュール名の単一の被りが発生します。

![スクリーンショット 2023-05-15 17.31.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112929/5851aa8e-0e95-e0c0-bae5-e21c8f3a4557.png)

モジュール名を含んだ検索がしたいが、 `::` みたいな余計な文字列が入るとVSCodeは検索してくれません。なのでその文字列を除去するTypeScriptのスクリプトを埋め込んだVSCode拡張があると便利なのではないかと思って作ってます。

`API::V1::Users` → `APIV1Users` に変換してファイル名検索をしてくれるのですが、実際には以下のような動きをします。

![ezgif-1-398dfba47d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112929/92c5dc3e-24f0-00a1-7fa1-d9da33decaa2.gif)

* 検索したい範囲入力
* `CMD + SHIFT + P` 
* `rubyModule` 入力
* `Enter`


## 他の機能

* 文字数カウントの機能
* 英単語を複数形・単数形に変換して検索
* 英単語の複数形・単数形の共通部分を抽出して検索
    * `Agency` OR `Agencies` → `Agenc` で検索

など組み込んでます。

## 最後に

VSCodeの拡張機能はTypeScriptで簡単なスクリプト作る感覚で作成することができます。

以下のコードだけでひな形が作成でき

```terminal
$ npm install -g generator-code
$ npx yo code
```

F5キーでデバック用の新しいVSCodeのウインドウを立ち上げれるので、VSCode上でそのままデバックできます。

かなり簡単な作業なのでぜひみなさんも新しい拡張機能作ってみると楽しいと思います。ぜひにでも。


## 追加

`CMD + SHIFT + P` で

```
> Preferences: Open Keyboard Shortcuts (JSON)
```

を入力、独自ショートカットキーを設定すると、 もっと快適になります。

自分は `CMD + e` ですぐに検索してくれるようにしてます。

こんな感じで複数行でもcmd e ですぐにファイル名検索できます。

![ezgif-5-471927eb7e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112929/6637b778-0b34-7d11-4ae4-3e0670618e0e.gif)


```~/Library/Application Support/Code/User/keybindings.json
[
    {
        "key": "cmd+e",
        "command": "vscode-search-files.rubyModule"
    },
    {
        "key": "cmd+r cmd+r",
        "command": "actions.findWithSelection"
    },
    {
        "key": "cmd+e",
        "command": "-actions.findWithSelection"
    }
]
```

もしくはキーボードショートカットから CMD+E にSearch Ruby Module を設定する。

![スクリーンショット 2023-11-10 10.55.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112929/c7009cc7-d634-562c-b752-946da03f60a9.png)

![スクリーンショット 2023-11-10 10.54.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112929/84a1c3f4-0f76-fd7b-a74c-cf926b765763.png)



-------

以下英語ですが、解説です。

-------

# vscode-search-files

Use VSCode's quickOpen to access files immediately.

## Ruby usage

### API::V1::Users.new

`API::V1::Users.new.get_all`

> Click `Users` vs using this extension

![ezgif-4-8d21eda43c](https://github.com/ykhirao/vscode-search-files/assets/15008377/06db62ca-e0f5-4c65-8ba4-9e22002803bd)

> Search modules

![ezgif-4-8d6993d0c7](https://github.com/ykhirao/vscode-search-files/assets/15008377/7504a4dc-264c-4b05-8382-e2fb5e58f6c8)

### SAMPLE Code

@see [Samples/Ruby](./samples/Ruby/)

> Search Ruby Module

```ruby
# samples/ruby/API/V1/Users.rb
module API
  module V1
    class Users
      def get_all
        # ...
      end
    end
  end
end

# samples/ruby/API/V2/Users.rb
module API
  module V2
    class Users
      def get_all
        # ...
      end
    end
  end
end

# samples/ruby/API/V1/Customers.rb
module API
  module V1
    class Customers
      def get_all
        # ...
      end
    end
  end
end

# samples/ruby/API/V2/Customers.rb
module API
  module V2
    class Customers
      def get_all
        # ...
      end
    end
  end
end

API::V1::Users.new.get_all
API::V2::Users.new.get_all
API::V1::Customers.new.get_all
API::V2::Customers.new.get_all
```

## Common Usage

> Change case and search

<img width="800" alt="" src="https://github.com/ykhirao/vscode-search-files/assets/15008377/0137838a-0a8d-4bd3-ac8a-d1a6375abb99">

![ezgif-4-e5bdb8af22](https://github.com/ykhirao/vscode-search-files/assets/15008377/9ae18891-cbff-4af3-b6a9-a49899e9d6d2)

### singularForm

Split words and make all words singular

`UsersDetails` → `UserDetail`

### pluralForm

Split words and make all words plural

`UserDetail` → `UsersDetails`

### commonPluralSingular

Searches for common word parts in singular and plural forms.
It is used when it is not clear whether the file name was created in the singular or plural form.

`AgencyDetail` → `AgencDetail`
`AgenciesDetails` → `AgencDetail`
`UsersDetails` → `UserDetail`
`UserDetail` → `UserDetail`

### and each case

The following cases are supported.

* camelCase
* capitalCase
* constantCase
* dotCase
* headerCase
* noCase
* paramCase
* pascalCase
* pathCase
* sentenceCase
* snakeCase

## Count

> SearchFiles: Get Word Count

A count of the number of characters in multibyte characters (Japanese like "日本語", pictographs🇯🇵, etc.).
Since JavaScript's standard length cannot count them, they are measured by Intl.Segmenter. This is a completely extra function.