Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

VSCodeのタスク機能でRails Serverをコマンド一発で起動する

More than 1 year has passed since last update.

Visual Studio Codeにはタスク機能が存在し、テストやLintといったツールをVSCodeから実行できます。
npm等ではプロジェクトから自動でタスクを検出したりできるようですが、今回はRuby on Railsのサーバ起動タスクを手動で定義してみました。

環境

  • Ruby 2.3.1
  • Ruby on Rails 5.2.0
  • Visual Studio Code 1.24.0
  • Windows 10 Pro 17133.1 (April 2018 Update)
  • Windows Subsystem for Linux
$ cat /etc/os-release | grep VERSION=
VERSION="16.04.4 LTS (Xenial Xerus)"

VSCodeタスクの定義

まずはやってみましょう。

  1. VSCodeを起動し、Ctrl+Shift+Pでコマンドパレットを開きます
  2. >Tasks: Configure Taskでタスクを構成します
  3. テンプレートからtasks.jsonを生成を選択します
  4. Others 任意の外部コマンドを実行する例を選択します

.vscode/tasks.jsonが開き、サンプルとして下記のようなタスクが表示されます。

.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": "echo",
      "type": "shell",
      "command": "echo Hello"
     }
  ]
}

とりあえず実行してみましょう。Ctrl+Pでコマンドパレットを開き、task echoを実行しタスクの出力をスキャンせずに実行します。

するとシェルコマンド$ echo Helloが実行され、ターミナル部分にHelloと実行されます。

これを応用し、bundle installからdb:migrate、Server立ち上げてlocalhost:3000を開く までを連続で行うタスクrails startを定義します。

Railsを起動するVSCodeタスクの定義

下記を順番に実行するタスクを定義します。

  1. $ bundle install
  2. $ rails db:migrate
  3. $ kill -9で実行中のRailsを停止
  4. $ rails server
  5. $ explorer.exe$ openで、 http://localhost:3000 を開く

適当なRailsプロジェクトを開き、.vscode/tasks.jsonに下記を記述します。

.vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "bundle install",
      "type": "shell",
      "command": "bundle install --path vendor/bundle"
    },
    {
      "label": "rails db:migrate",
      "type": "shell",
      "command": "bundle exec rails db:migrate",
      "dependsOn": [
        "bundle install"
      ],
    },
    {
      "label": "rails server start",
      "type": "shell",
      "command": "bundle exec rails server --daemon",
      "dependsOn": [
        "rails server stop",
        "rails db:migrate"
      ],
    },
    {
      "label": "rails server stop",
      "type": "shell",
      "command": "test -e ./tmp/pids/server.pid && kill -9 `cat ./tmp/pids/server.pid` || true"
    },
    {
      "label": "rails start",
      "type": "shell",
      "command": "open http://localhost:3000",
      "windows": {
        "command": "explorer.exe http://localhost:3000"
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "dependsOn": [
        "rails server start"
      ],
      "problemMatcher": []
    }
  ]
}

Ctrl+Shift+Brails startを実行し、Railsが起動して、自動的にブラウザでhttp://localhost:3000 が開いたら成功です。

詳細

設定項目 意味
label タスクの名前。コマンドパレットからこの名前で実行する。
type shellとするとbash cmd PowerShell等のシェルコマンドとして解釈される
command 実行するコマンド
windows プラットフォームに応じて設定項目を変更できる。今回の例ではコマンドをMacでは$ open、Windowsでは$ explorer.exeとするために使っている。同様にlinuxosxも設定できる。
presentation.reveal 統合ターミナルにフォーカスを当てるかどうか。alwaysneverの他に、エラー検出時しか表示しないsilentがあるが、今回はエラーを取り扱わないので使えない
presentation.panel 複数のタスク間でターミナルを共有するかどうか。sharedで共有し、複数回実行時に同じターミナルを使いまわす。他にdedicatednewが選択できる。
group.kind buildとするとビルドタスク扱いとなり、Ctrl+Shift+Bで実行できる
group.isDefault デフォルトタスクとして扱い、選択しなくてもCtrl+Shift+Bするだけで実行できるようになる
dependsOn 指定したタスクを並列で実行し、すべてが正常終了した場合にこのタスクを実行する
problemMatcher 「今後このタスクの出力をスキャンしない」場合は空配列となる
  • $ rails serverは入力を待ち受けてしまうと次のタスクに進まないので、--daemonでデーモンとして実行
  • エラーコードが返ると次のタスクに進まないので、rails server stop(command) || trueで強制的に正常終了

まとめ

こうして、VSCodeからコマンド一発でRails Serverを起動することができました。

プラットフォーム別の設定などが使えるのは便利なのですが、やりたい事に対してjsonの記述量がちょっと冗長な感じもします。

参考

suzuki_sh
Windowsでコンピュータの世界が広がります
https://www.s2terminal.com
finergy-a-tm
大阪府大阪市北区角田町8番1号 梅田阪急ビル オフィスタワー35F
https://finergy.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away