【VS Code】npm-scriptsをサイドバーに表示する設定方法|npm-scriptsを簡単に実行

Visual Studio Code(以下、VSCodeと表記)では、ワークスペース内のプロジェクトにnpmのpackage.jsonがある場合、サイドバーに「NPMスクリプト」の項目が表示されます。

その際に、npmのnpm-scriptsを利用していると、その「NPMスクリプト」内にnpm-scriptsのコマンド名が追加され、コマンド名をクリックすることで、npm-scriptsを簡単に実行できます。

今回は、もし、そのサイドバーの「NPMスクリプト」が消えてしまった場合に、表示させる設定方法となります。

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

【VS Code】「NPMスクリプト」をサイドバーに表示する設定方法

以下、「NPMスクリプト」をVSCodeのサイドバーに表示する設定方法となります。

設定の画面から変更する場合

  1. 画面上部のメニュー内にある「ファイル」>「基本設定」>「設定」を選択し、設定の画面を開きます。
  2. 設定内の検索ボックスで、設定IDの「npm.enableScriptExplorer」を検索します。
  3. 指定した設定が表示されるので、チェックボックスをオンに変更します。

JSONファイルから変更する場合

設定変更を管理するJSONファイルを開き、設定を管理するオブジェクトに以下の要素を追加して保存します。

"npm.enableScriptExplorer": true,

VSCodeの設定変更について

VSCodeの設定変更は、設定の画面、または設定変更を管理するJSONファイルで行います。記事内では、それらの詳細な利用方法は割愛していますので、詳しくは以下のリンク先を参考にしてみてください。

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

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

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