ホームページ 開発ツール VSCode vscode npmの実行方法

vscode npmの実行方法

Nov 18, 2019 am 09:42 AM
vscode

vscode npmの実行方法

#vscode npm を実行する方法?

vscode ノード npm と nodemon をデバッグする

nodejs をデバッグするにはさまざまな方法があります。利用可能な最高のツールを使用して Node.js をデバッグする方法の記事を読むことができます。その中で、私のお気に入りの方法は V8 Inspector と vscode です。

vscode で、スパイダー ボタン

をクリックしてデバッグ サイドバーを表示し、構成を追加します。

環境を選択します。

launch.json ファイルを参照してください。 。

開始時に、対応する構成を選択し、右向きの緑色の三角形をクリックします。

起動モードと接続モード

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/index.js"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Port",
      "address": "localhost",
      "port": 5858
    }
  ]
}
ログイン後にコピー

リクエストが起動されると、起動モード はい、これは vscode から起動されるプログラムです。デバッグ中の場合は、常にデバッグ モードになります。アタッチ モードは、すでに開始されているサービスに接続することです。たとえば、外部でプロジェクトを開始していて、突然デバッグが必要になった場合、開始したプロジェクトを閉じて vscode で再起動する必要はなく、アタッチ モードで開始する限り、vscode はすでに開始されているサービスに接続できます。 。デバッグが終了したら、接続を解除するだけです。これは明らかに起動よりも便利です。

npm を使用してデバッグを開始する

package.json のスクリプトに、

"scripts": {
  "start": "NODE_ENV=production PORT=8080 babel-node ./bin/www",
  "dev": "nodemon --inspect --exec babel-node --presets env ./bin/www"
},
ログイン後にコピー

などの長い起動コマンドと構成を記述することがよくあります。 npm を使用して vscode を起動してデバッグできるようにしたいのですが、それには次の構成が必要です

{
  "name": "Launch via NPM",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npm",
  "runtimeArgs": [
    "run-script", "dev"//这里的dev就对应package.json中的scripts中的dev
  ],
    "port": 9229//这个端口是调试的端口,不是项目启动的端口
},
ログイン後にコピー

デバッグで開始するにはノードモンを使用します

ノードモンは使用されていますが、開始するには npm を使用してください。 dev コマンドでプログラムを正常に再起動できますが、再起動後はデバッグが切断されます。したがって、vscode で nodemon を使用してプロジェクトを開始できるようにする必要があります。

{
  "type": "node",
  "request": "launch",
  "name": "nodemon",
  "runtimeExecutable": "nodemon",
  "args": ["${workspaceRoot}/bin/www"],
  "restart": true,
  "protocol": "inspector",//相当于--inspect了
  "sourceMaps": true,
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "runtimeArgs": [//对应nodemon --inspect之后除了启动文件之外的其他配置
    "--exec",
    "babel-node",
    "--presets",
    "env"
  ]
},
ログイン後にコピー

ここで runtimeArgs に注目してください。これらの設定を package.json に記述すると次のようになります。

nodemon --inspect --exec babel-node --presets env ./bin/www
ログイン後にコピー
ログイン後にコピー

これは非常に便利です。プロジェクトは正常に再起動できます。再起動するたびに同様となり、デバッグ機能が有効になります。

しかし、デバッグ機能を常に有効にしたくない場合はどうすればよいでしょうか?

これには、上記の接続モードを使用する必要があります。

次のコマンドを使用して通常にプロジェクトを開始します

nodemon --inspect --exec babel-node --presets env ./bin/www
ログイン後にコピー
ログイン後にコピー

デバッグする場合は、vscode のデバッグで次の構成を実行します

{
  "type": "node",
  "request": "attach",
  "name": "Attach to node",
  "restart": true,
  "port": 9229
}
ログイン後にコピー

完璧です!

以上がvscode npmの実行方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

VSCODEに必要なコンピューター構成 VSCODEに必要なコンピューター構成 Apr 15, 2025 pm 09:48 PM

VSコードシステムの要件:オペレーティングシステム:オペレーティングシステム:Windows 10以降、MACOS 10.12以上、Linux Distributionプロセッサ:最小1.6 GHz、推奨2.0 GHz以上のメモリ:最小512 MB、推奨4 GB以上のストレージスペース:最低250 MB以上:その他の要件を推奨:安定ネットワーク接続、XORG/WAYLAND(Linux)

vscodeのヘッダーファイルを定義する方法 vscodeのヘッダーファイルを定義する方法 Apr 15, 2025 pm 09:09 PM

ビジュアルスタジオコードを使用してヘッダーファイルを定義する方法は?ヘッダーファイルを作成し、.hまたは.hpp接尾辞名(クラス、関数、変数など)を使用してヘッダーファイルにシンボルを宣言し、#includeディレクティブを使用してプログラムをコンパイルして、ソースファイルにヘッダーファイルを含めます。ヘッダーファイルが含まれ、宣言された記号が利用可能になります。

VSCODE前の次のショートカットキー VSCODE前の次のショートカットキー Apr 15, 2025 pm 10:51 PM

VSコードワンステップ/次のステップショートカットキー使用法:ワンステップ(後方):Windows/Linux:Ctrl←; macOS:CMD←次のステップ(フォワード):Windows/Linux:Ctrl→; macOS:CMD→

中国語でVSCodeを設定する方法 中国語でVSCodeを設定する方法 Apr 15, 2025 pm 09:27 PM

ビジュアルスタジオコードで中国語を設定するには2つの方法があります。1。中国語パッケージをインストールします。 2。構成ファイルの「ロケール」設定を変更します。 Visual Studioコードバージョンが1.17以上であることを確認してください。

VSCODEでコードを実行する方法 VSCODEでコードを実行する方法 Apr 15, 2025 pm 09:51 PM

コードでコードを実行すると、コードが6つしか必要ありません。1。プロジェクトを開きます。 2。コードファイルを作成して書き込みます。 3.端子を開きます。 4.プロジェクトディレクトリに移動します。 5。適切なコマンドを使用してコードを実行します。 6。出力を表示します。

vscodeを設定する方法 vscodeを設定する方法 Apr 15, 2025 pm 10:45 PM

VSCODEを有効にして設定するには、次の手順に従います。VSCODEをインストールして開始します。テーマ、フォント、スペース、コードフォーマットなどのカスタム設定。拡張機能をインストールして、プラグイン、テーマ、ツールなどの機能を強化します。プロジェクトを作成するか、既存のプロジェクトを開きます。 IntelliSenseを使用して、コードプロンプトと完了を取得します。コードをデバッグして、コードを介してブレークポイントを設定し、変数を確認します。バージョン制御システムを接続して変更を管理し、コードをコミットします。

VSCODEで書かれている言語 VSCODEで書かれている言語 Apr 15, 2025 pm 11:51 PM

VSCODEは、TypeScriptとJavaScriptで記述されています。まず、そのコアコードベースは、JavaScriptを拡張し、タイプチェック機能を追加するオープンソースプログラミング言語であるTypeScriptで記述されています。第二に、VSCODEのいくつかの拡張機能とプラグインはJavaScriptで記述されています。この組み合わせにより、VSCODEは柔軟で拡張可能なコードエディターになります。

vscodeフロントエンドプロジェクトコマンドを開始します vscodeフロントエンドプロジェクトコマンドを開始します Apr 15, 2025 pm 10:00 PM

VSCODEでフロントエンドプロジェクトを開始するコマンドはコードです。特定の手順には、プロジェクトフォルダーを開きます。 vscodeを開始します。プロジェクトを開きます。起動コマンドコードを入力します。ターミナルパネル。 Enterを押してプロジェクトを開始します。

See all articles