Visual Studio Code で rspec 実行

斧を研ぎましょう

こんにちは、エンジニアの後藤です。 BUYMAのWebアプリを作る仕事をしています。

この記事は Enigmo Advent Calendar 2022の8日目の記事です。

この記事のゴール

この記事では、Visual Studio Codeでコードを書きつつ、サクサク rspec を実行したり Java プロジェクトをビルドしたり、 lint も実行したり、ということができるようになる、というのをゴールとしています。

エディタのカスタマイズを愛する人、エディタとコンソールを行ったり来たりしながら開発を進めている人におすすめの記事となります。

対象のエディタは Visual Studio Code です。

この記事のきっかけ

この記事を書くきっかけになったのは私が、エディタを emacs から Visual Studio Code へ乗り換えたことに起因します。

emacsrails アプリケーションを書いていたときは、 rspec-mode という emacs 拡張をインストールすることで、

  • rspec ファイルとテスト対象のファイルを行き来する
  • カーソルのある行の rspec を実行
  • カーソルのあるファイルの rspec を実行

といったことがキーボードから行えました。

Visual Studio Code を使い始めてから、Rails Go to Spec というプラグインを見つけて、

  • rspec とテスト対象のファイルを行き来する

はできるようになったのですが、カーソルのある行の rspec を実行するという事ができませんでした。そのため、プラグインでも書くか(エディタのカスタマイズは大好物です)、と思っていた所に良い方法をみつけたのでこの記事を書きました。

どのように実現するか

結論から言うと、Visual Studio Code の標準機能のみで実現できました。その方法は、プロジェクトの tasks.json にタスクを追加することと、キーボードショートカットの割当です。

Visual Studio Code には、プロジェクトのディレクトリ内にある、 .vscode/tasks.json ファイルにタスクを記述しておくことで、 Tasks: Run Task からプロジェクトに関連したタスクを実行できる、という機能です。

この機能と、 Tasks: Rerun Last Task へキーボードショートカットに割り当てることで、実現します。

では、早速 rails プロジェクトを対象に rspec を実行する場合を見ていきましょう。以下のような .vscode/tasks.json を作成します。

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "rspec file",
      "type": "shell",
      "command": "rspec -fd ${relativeFile}",
      "group": "test",
      "problemMatcher": [
        {
          "owner": "ruby",
          "fileLocation": ["relative", "${workspaceFolder}"],
          "pattern": {
            "regexp": "^rspec\\s+(.*):(\\d+)\\s+#\\s+(.*)$",
            "file": 1,
            "line": 2,
            "message": 3
          }
        }
      ]
    },
    {
      "label": "rspec here",
      "type": "shell",
      "command": "rspec -fd ${relativeFile}:${lineNumber}",
      "group": "test",
      "problemMatcher": [
        {
          "owner": "ruby",
          "fileLocation": ["relative", "${workspaceFolder}"],
          "pattern": {
            "regexp": "^rspec\\s+(.*):(\\d+)\\s+#\\s+(.*)$",
            "file": 1,
            "line": 2,
            "message": 3
          }
        }
      ]
    }
  ]
}

作成したタスクは、以下になります。

タスク名 説明
rspec file カーソルのあるrspecファイルのテストをすべて実行する
rspec here カーソルのある行のrspecのテストを実行する

これで準備は整いました。

それでは、開発の流れを見ていきます。

rspec ファイルを編集していて、特定のテストを実行します。

Tasks: Run Task -> rspec here

を選び、カーソルのある行の rspec のみが実行されます。

また、編集中のファイル全体の rspec を実行する場合は

Tasks: Run Task -> rspec file を選択することで実行できます。

加えて、 Tasks: Rerun Last Task にキーボードショートカットを割り当てておくことで(私の場合はCommand + Shift + T)で、

  • rspec の作成する
  • Tasks: Run Task->rspec here` を実行
  • テストが失敗するのを確認
  • ソースを実装
  • キーボードショートカットから、Tasks: Rerun Last Task を実行
    • Tasks: Run Task -> rspec here が実行される
  • テストが成功するのを確認する
  • Tasks: Run Task -> rspec file を実行
  • 同じファイル内の他のテストが壊れていないことを確認

という開発ができるようになりました。

ちなみに、今回は rspec に特化したタスクを記述しましたが、JavaScript を書いているときは、lint タスクを書く、Java プロジェクトの場合は、ビルドタスクやJUnitタスクを書いておくことで、すべての言語で同じように開発が進められます。

めでたしめでたし。

新たに見つけた課題

と思っていたのですが、新しい課題を見つけました。

rspec here で、特定のテストを実行後、ソースファイルを編集した後に、カーソルと rspec ファイルのテスト対象行に持っていかないと、同じテストが実行できません。これは、地味に面倒くさい。できれば、 Tasks: Rerun Last Task Command のようなコマンドで、最後に実行したタスクのコマンドをそのまま実行する事ができれば、解決しそうですが、どうやらそのような機能は無いようです。

これは、機能追加の依頼をするかプラグインを書かないと解決できなさそうです。

これは、来年のアドベントカレンダーの時にでも解決したいと思います。

最後に

みなさん、斧を研いでいるでしょうか? 斧を研ぐと言っても、本当に斧を研ぐということではなく「きこりのジレンマ」のお話です。「きこりのジレンマ」というのは簡単に説明を書くと、

あるところに、忙しく木をきっているきこりがいました。彼の木を切るペースが日に日に落ちていきます。それを眺めていた人が、斧の切れが悪くなっているのでは?と感じ、斧を研いではどうか、と提案するのですが、きこりは忙しくて斧を研いでいる暇はないと答えた

というお話です。

では、エンジニアにとっての斧は何でしょうか?いろいろあると思うのですが、エディタは斧の一つではないかと思います。

年1回、アドベントカレンダーの時だけなどと言っていないで、日々斧を研ぎましょう。

Tasks: Rerun Last Task Command は他のみんなも欲しいのでは、という事を信じて、 Visual Studio Code のプロポーザルを書いてみたいと思います。近い将来。

本当に最後に

明日の記事の担当はエンジニアの橋野さんです。お楽しみに。


BUYMAを作っている、株式会社エニグモでは、斧を研いで仕事を進めるエンジニアを求めています。ご興味のある方は以下の求人を御覧ください。

株式会社エニグモ すべての求人一覧

hrmos.co