【VS Code】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スクリプト」を表示できます。

エクスプローラーのメニューを表示する方法

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

  • エクスプローラーのサイドバーの右上部にあるボタンをクリック
    「エクスプローラー」のメニューの画像
  • エクスプローラーのサイドバー内にある項目を右クリック
    「エクスプローラー」のメニューの画像

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

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。