VS CodeでRubyを書く環境を整えてみた話

Posted by jolantern on Saturday, February 25, 2017

TOC

VS codeを使ってみた

ずっとAtom派でAtomばかり使ってきていたのだけど、VS Codeにかねてから興味があった。ずっと使ってみたいとは思ってはいたのだけど、リリース当初ぐらいに使った時の使い勝手が微妙だなあと感じて、結局使わなくなっていた。 拡張機能をサポートしていたり、Gitをネイティブにサポートしていたりして魅力的な要素が増えてきたなあと感じたので試してみることにした。そこでインストールした拡張機能とか施した設定のまとめをしていく。

全体的に便利っぽい拡張機能

file-icons - Visual Studio Marketplace

Atomにもあった。ファイルのアイコンをそれっぽくしてくれる。

Guides - Visual Studio Marketplace

縦のガイド線を引いてくれる。インデントミスったりしづらくなるし、endがないぞみたいなエラーが出た時にどこにないのか分かりやすかったりする。

Japanese Word Handler - Visual Studio Marketplace

Ctrl+矢印キーでカーソルを移動させた時に日本語は微妙な動きをするのでそれの改善。

Project Manager - Visual Studio Marketplace

これもAtomにもあったやつ。プロジェクト管理機能を追加してくれる。Ctrl+Pで開くコマンドパレットでprojectとか打てばList、Saveをサジェストしてくれるので便利。

Git関連

Gitはデフォでサポートされていて便利ですが更に便利にしような。

gitlink - Visual Studio Marketplace

これは何かというとコードのどこかを右クリックしてあげると、そのコードがGithubのリポジトリで言えばどこにあるのかというリンクを作ってくれる。 Issueとか書こうと思った時便利。あと、Pushする前に前のバージョン見たりするのにも使えて便利。

Git History (git log) - Visual Studio Marketplace

Gitのサポートはありがたいんだけどgit logが見れない。かなしい。なのでこれを入れておく。

Ruby関連の拡張機能

erb - Visual Studio Marketplace

htnl.erbのシンタックスハイライト。シンプルだけどあると便利なやつ。

rails - Visual Studio Marketplace

railsのsnippetsを追加する。この手のやつって使わないと覚えなくて結局誇り被ったりしちゃうんだよなあ。

Ruby - Visual Studio Marketplace

Rubyのデバッグサポート。下記のジェムも一緒に入れてあげる必要がある。

<code class="shell"><br></br>gem install ruby-debug-ide -v 0.4.32  # or higher versions
gem install debase -v 0.2.1 # or higher versions

</code>

そんでもってそのデバッグツールを開いてしたの方にある歯車から launch.json を開くと、Rubyの設定が一番上に見えた。

<code class="json">{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Local File",
            "type": "Ruby",
            "request": "launch",
            "cwd": "${workspaceRoot}",
            "program": "${workspaceRoot}/main.rb",
            "useBundler": true
        },
</code>

末尾のuseBundlerは記述されていないのでそれを入れておくとbundle exec で実行したRubyも扱えるようになる。 これでVS codeのサイドバーにあるデバッグのやつがRubyで使えるようになる。

Ruby Language Colorization - Visual Studio Marketplace

Rubyのシンタックスハイライト。これもあったほうがいいよね。無駄なタイポ減らせるし。

ruby-linter - Visual Studio Marketplace

いいRubyをかけるように入れようと思っていれた。ユーザ設定を開いて

<code class="json">{
    "ruby.linter.executablePath": "/home/osker/.rbenv/shims/ruby"
}

</code>

which ruby をした結果を書いてあげる。