【VSCode】npm-scriptsをサイドバーから実行する方法｜表示・非表示の設定

Visual Studio Code（以下、VSCodeと表記）では、ワークスペース内にあるnpmのpackage.jsonでnpm-scriptを定義している場合、サイドバーからクリックで簡単にnpm-scriptsを実行できます。

今回は、そのnpm-scriptsをサイドバーから実行する方法となります。

また、記事内のVSCodeに関する表記は、拡張機能「Japanese Language Pack」でVSCodeを日本語化した場合の表記となります。

【VSCode】npm-scriptsをサイドバーから実行する方法

左端あるメニュー（Acitivity Bar）内の「エクスプローラー」を選択すると、サイドバー内の下部にある項目に「NPMスクリプト」が表示されます。

VSCodeの左端あるメニュー（Acitivity Bar）の画像

その「NPMスクリプト」をクリックして開くと、package.jsonで定義したnpm-scriptsのコマンド一覧が表示されるので、コマンド名を選択してnpm-scriptsを実行します。

「NPMスクリプト」が非表示となっている場合、エクスプローラーのメニュー内にある「Npmスクリプト」を選択してチェックをオンにすることで、「NPMスクリプト」を表示できます。

エクスプローラーのメニューは、以下のいずれかの方法で表示できます。

また、以前のバージョンでは設定「npm.enableScriptExplorer」があり、その設定のオン・オフで「エクスプローラー」内の「NPMスクリプト」の表示・非表示を切り替えましたが、現在はその設定は利用できません。

上記のエクスプローラーのメニュー内に「NPMスクリプト」がない場合、表示しているワークスペースを再起動することで、サイドバーに「NPMスクリプト」を表示できました。