この記事のゴール

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

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

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

この記事のきっかけ

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

emacs で rails アプリケーションを書いていたときは、 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 のようなコマンドで、最後に実行したタスクのコマンドをそのまま実行する事ができれば、解決しそうですが、どうやらそのような機能は無いようです。

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

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