開発をしている時、何度も同じ操作をしなくてはいけないケースがあります。
例えば、ビルドしてテスト環境にFTPでアップロードする、といった操作は開発中には何度も実行される操作だと思います。

操作自体は慣れてしまえばビルドコマンドを叩いて、FTPクライアントを起動して、該当ファイルを選択、アップロードして、といったところなので数十秒で済みますが、これが何度も発生すると生産性に悪影響があると思います。

そこで今回はvscodeのタスク登録とショートカットキーを使ってキー操作だけで一連の作業を実行できるようにする方法について解説をします。

まずはシェルを作る

#!/usr/bin/bash

# カレントディレクトリをスクリプトのあるディレクトリに変更
cd $(dirname $0)

# ビルド
npm run dev

# SFTPでファイル名を変更してアップロード
sftp -i /Users/xxxxx/.ssh/xxxxx.pem xxxx@hostname <<EOF
put public/script.js /var/www/html/js/script-test.js
put public/script.js.map /var/www/html/js/script-test.js.map
EOF

一連の作業を実行するシェルを作成します。
今回はnpmでビルド後にsftpコマンドでリモートサーバーにファイルをアップロードしています。
また、アップロード先でファイル名の変更もしています。

作成したファイルはプロジェクトのルートにbuild.shという名前で保存しておきました。
このシェルは自身の環境に依存した情報（キーファイルのパスなど）が含まれるのでGitなどパブリックな場所にはアップしないように注意してください。

シェルの作成に慣れていない方はここだけ難しいと思いますが、ご辛抱を！

タスクを登録する

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "run build.sh",
      "type": "shell",
      "command": "sh ./build.sh",
      "problemMatcher": [],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

次にvscodeに作成したシェルの実行をしてくれるタスクを登録します。
タスクとは、vscodeの機能の１つで、コマンドの実行やvscode上での操作を自動化するための仕組みです。

プロジェクトルート下に.vscodeフォルダを作成し、その中にtasks.jsonという名前で上記のjsonを記述してください。

labelは、このタスクの名前です。
commandに実行する処理を記述します。
groupはショートカットキーに登録する記述で、Macの場合だとCMD+Shift+Bに割り当てられます。

これで、「run build.sh」という名前でタスクが登録され、ショートカットキーにも紐付けができました。

タスクを実行してみる

では、さっそくタスクを実行してみます。
vscodeのメニューバーでターミナル > タスクの実行 > run build.sh を実行します。

実行するとターミナルが表示されて、一連の処理が実行されるはずです。
実際にサーバーに意図通りアップロードされていることも確認しましょう。

ショートカットキーで実行してみる

CMD+Shift+Bを押して、ショートカットキーでも同じように実行されることを確認しましょう。
Windowsの場合は、Ctrl+Shift+Bです。

他のショートカットキーに紐づける

任意のショートカットキーを使いたい場合は、vscodeのメニューバーからcode > 基本設定 > キーボードショートカットと進むとキーボードショートカットの設定画面になるので、そちらから登録をすることができます。

まとめ

今回はvscodeのタスク機能とショートカットキー機能について解説をしました。
みなさんもvscodeの機能を使って繰り返しの作業をショートカットキーで実行できるようにすることで生産性アップに繋げてください！