2021/07/31

VSCodeでnpmスクリプトをポチッと実行する方法

@ taichi fukumoto

vscodenpm

概要

この記事では、npm scriptsをターミナルからではなく、GUI操作でポチッと実行する方法を解説しています。
毎回、npm run dev などターミナルで入力するのめんどくさいなと思っていた方は、ぜひ設定してみましょう。

設定方法

それでは早速設定していきましょう!

エクスプローラーにNpmスクリプトを表示する

VSCodeで、エクスプローラーを表示します。エクスプローラーとは、プロジェクトのファイルなどが表示されているサイドバーのことです。
デフォルトでは、

  • 開いているエディター
  • フォルダ名
  • タイムライン
  • アウトライン

が表示されているかと思います。

エクスプローラーの右端にある「•••」をクリックし、「Npmスクリプト」にチェックを入れます。

エクスプローラーに「Npmスクリプト」が表示されればOKです。

npm scriptsを実行する

それでは、npm scriptsを実行しましょう。
Npmスクリプトには、package.json に書かれているコマンド一覧が表示されます。(画像はcreate-next-appで作成されるpackage.jsonのデフォルト設定)

デフォルトでは、devbuildstartnpm scriptsが用意されています。
普通npm scriptsを実行しようと思ったら、ターミナルで npm run dev とか入力して実行しますよね。
もうこれからは、そんなことしなくて大丈夫です!
例えば dev と表示されいているところにカーソルを合わせると、再生マークが表示されます。これをクリックしましょう。

すると、「devタスク」というターミナルが開きます。これは、普段使っているターミナルとは別で開くようです。

無事にポチッとnpm run devを実行できました!

まとめ

今回は、npm scripts をGUIで実行する方法を紹介しました。
VSCodeを使っていると、GitHubの操作なども含めてターミナル操作必要ないんじゃないかと思ってきます。

ぜひ活用していきましょう!
ではまた。

© 2021 powerd by UnReact