<h2 id="h9707d3a59a">概要</h2>この記事では、<code>npm scripts</code>をターミナルからではなく、GUI操作でポチッと実行する方法を解説しています。 毎回、<code>npm run dev</code>	などターミナルで入力するのめんどくさいなと思っていた方は、ぜひ設定してみましょう。 <h2 id="h8bb8734b16">設定方法</h2>それでは早速設定していきましょう！ <h3 id="hb39eb4a7f1">エクスプローラーにNpmスクリプトを表示する</h3>VSCodeで、エクスプローラーを表示します。エクスプローラーとは、プロジェクトのファイルなどが表示されているサイドバーのことです。 デフォルトでは、<ul><li>開いているエディター</li><li>フォルダ名</li><li>タイムライン</li><li>アウトライン</li></ul>が表示されているかと思います。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/8744e88d3a4642019255288229283a8b/VSCode%E3%81%AE%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AD%E3%83%BC%E3%83%A9%E3%83%BC_%E3%83%86%E3%82%99%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88.png" alt=""> エクスプローラーの右端にある「•••」をクリックし、「Npmスクリプト」にチェックを入れます。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/4b8e7d472e81408996d01a3451117b50/VSCode%E3%81%AE%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AD%E3%83%BC%E3%83%A9%E3%83%BC_%E8%A8%AD%E5%AE%9A.png" alt=""> エクスプローラーに「Npmスクリプト」が表示されればOKです。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/4046b2a1c2bd4b449a81bb5c1979ef5b/VSCode%E3%81%AE%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AD%E3%83%BC%E3%83%A9%E3%83%BC_npm%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%95%E3%82%9A%E3%83%88%E8%BF%BD%E5%8A%A0%E5%BE%8C.png" alt=""> <h3 id="h145fca7cf4"><code>npm scripts</code>を実行する</h3>それでは、<code>npm scripts</code>を実行しましょう。 Npmスクリプトには、<code>package.json</code> に書かれているコマンド一覧が表示されます。（画像は<code>create-next-app</code>で作成される<code>package.json</code>のデフォルト設定） <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/4046b2a1c2bd4b449a81bb5c1979ef5b/VSCode%E3%81%AE%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AD%E3%83%BC%E3%83%A9%E3%83%BC_npm%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%95%E3%82%9A%E3%83%88%E8%BF%BD%E5%8A%A0%E5%BE%8C.png" alt=""> デフォルトでは、<code>dev</code>・<code>build</code>・<code>start</code>の<code>npm scripts</code>が用意されています。 普通npm scriptsを実行しようと思ったら、ターミナルで <code>npm run dev</code> とか入力して実行しますよね。 もうこれからは、そんなことしなくて大丈夫です！ 例えば <code>dev</code> と表示されいているところにカーソルを合わせると、再生マークが表示されます。これをクリックしましょう。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/277e6fecda4a4317a80ed0559ba04d59/VSCode%E3%81%AE%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%95%E3%82%9A%E3%83%AD%E3%83%BC%E3%83%A9%E3%83%BC_npm%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%95%E3%82%9A%E3%83%88.png" alt=""> すると、「devタスク」というターミナルが開きます。これは、普段使っているターミナルとは別で開くようです。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/b61be04bb7334583a643d8a79eea3515/VSCode_dev%E3%82%BF%E3%82%B9%E3%82%AF.png" alt=""> 無事にポチッと<code>npm run dev</code>を実行できました！ <h2 id="ha214098e44">まとめ</h2>今回は、<code>npm scripts</code> をGUIで実行する方法を紹介しました。 VSCodeを使っていると、GitHubの操作なども含めてターミナル操作必要ないんじゃないかと思ってきます。 ぜひ活用していきましょう！ ではまた。

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

<h2 id="hf183cfd538">今回やりたいことは、、、、、、、、</h2>ターミナルで以下のコマンドを使えるようにすること！！！！！！！！！！！！！！！！ code //vscodeを開く code .　//カレントディレクトリをvscodeで開く ターミナルをvscodeで連携する方法は二つあります。 一つ目はvscode上で設定する方法です。 vscode上で、command　＋　Shift　＋　 p　を同時に押します。 押すと、以下のような画面が出てきましたね <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/0fefdb193a3a4eebb0995a6029128fdd/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-06-24%2016.44.18.png" alt=""> それでは入力欄にshellと打ち込んでみましょう。 <img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/0338b70c06c2498ca73e5eadae8b10cb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-06-24%2016.49.13.png" alt=""> shellと打ち込むと上の画面が表示されましたね 候補の一番上の シェルコマンド：PATH内に”code"コマンドをインストールします をクリックします。 これで完成です。ターミナルに戻って、 code と打ち込みvscodeを開いてみましょう。おーーーー開けましたね！やった！ 二つ目の方法を紹介します。 .zshrcファイルを開きます。 .zshrcファイルがない人はユーザー直下のディレクトリに.zhrcという名前のファイルを作りましょう。 そのファイルの中に # Visual Studio Code (code)をターミナルで使えるようにする export PATH=$PATH:"/Applications/Visual Studio Code.app/Contents/Resources/app/bin" と書き込みます。 以上で終わりです。それではターミナルに戻って code と打ち込んでみましょう。あら不思議、vscodeが立ち上がりました。 めでたしめでたし（ためにしためにし）

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

ターミナルからvscodeを開けるようにする

Tags

About this Blog