Run on Saveを使ってファイル保存時にyamlからjsonにコンバートするようにした
vscodeで保存時にPrettierを使ってコード整形するというのは、既にやっている方も多いと思います。
今回は、Prettierではなく、保存と同時にnpm run xxxしたいという場合について書いていきます。
ちなみに、vscodeの標準機能だけでは無理だったので、プラグインを使います。そのプラグインがRun on Saveです。
Run on Saveの適用範囲を現在開いているプロジェクトに限定したいので、プロジェクト直下の.vscodeにあるsettings.jsonに記述していきます。(なければ作成する。)
既にある場合は、最後に追加します。
特定のプロジェクトに限定するのではなく、vscodeで開くすべてのファイルに保存後タスクを適応させたい場合は、大元のuser設定ファイルで設定します。
どこにあるかは、こちらが参考になります。
公式にサンプルの設定があるので、それを参考に作っていきます。処理を配列で渡して保存と同時に複数の処理をするということもできます。
https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave
"emeraldwalk.runonsave": {
"commands": [
{
"match": ".*",
"isAsync": true,
"cmd": "echo 'I run for all files.'"
},
{
"match": "\\.txt$",
"cmd": "echo 'I am a .txt file ${file}.'"
},
{
"match": "\\.js$",
"cmd": "echo 'I am a .js file ${file}.'"
},
{
"match": ".*",
"cmd": "echo 'I am ${env.USERNAME}.'"
}
]
}
ここで注意すべき点としては、1つ目のコマンドが非同期なので、2つ目のコマンドは1つ目のコマンドが完了していなくても、すぐに実行されるところです。2つ目のコマンドは非同期ではないので、3つ目のコマンドは2つ目のコマンドが完了するまで実行されません。
matchに記述するのは、保存のトリガーとなるファイルを指定します。正規表現で記述します。
注意としては、これは正規表現であり、JSON文字列でもあるため、フォルダをターゲットにする場合など、バックスラッシュを二重にエスケープする必要があるという点です。以下のような感じ。
“match”: “some\\\\folder\\\\.*”
では、実際にファイル保存時にyamlからjsonにコンバートするための設定を見ていきたいと思います。
Run on Saveの設定は以下です。
"emeraldwalk.runonsave": {
"commands": [
{
"match": "\\.yaml$",
"isAsync": true,
"cmd": "npm run convert"
}
]
}
ここで設定しているnpm run convertは以下のような設定です。
"scripts": {
"convert": "js-yaml ./sample.yaml > ./sample.json"
},
ここで、yamlからjsonに変換するためにjs-yamlというライブラリを使っています。
この機能を無効にしたい時は、F1キーを押してOn Save: Disableを打ち込んで選択すればよいです。
使いたくなったらOn Save: Enableとします。