vs code を使用して Nodejs プログラムを開発するためのコード共有

小云云
リリース: 2018-02-07 11:31:52
オリジナル
1935 人が閲覧しました

この記事では、vs code を使用して Nodejs プログラムを開発する方法を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

最近またnodejsを勉強していて、.netの開発に携わっていたので軽量なエディタを選ぶのに苦労しましたが、Microsoftがnode jsを開発するためのVisual Studio用のプラグインをリリースしたので、それを使うのが良いです。 , このエディタはまだ大きすぎると感じます(1回のインストールは数Gです)! webstore は現在、Nodejs 開発で最も人気のある IDE の 1 つです。人気の理由はもちろん、プロジェクトの作成、編集、デバッグ、シンプルな構成、強力なインテリジェント プロンプトを統合した Nodejs IDE の統合開発環境です。前に述べたように、私は .net 開発を行ってきました。たまたま、このエディターに慣れるために、Microsoft がさまざまな言語でプログラムを作成してデバッグできる軽量のテキスト エディターである vs code を発売しました。 , その後の開発に便利なので、今回はこの開発用のエディタとして vs code を選択しました (VScode は Uedit や Noteplus などの強力なファイル エディタに似ていますが、スケーラブルで強力なプロンプト機能 (特にファイル) も提供します。 js 参照プロンプト)、および組み込みの Nodejs デバッグ機能により、通常の編集ツールとは異なります) もちろん、これは Microsoft の将来の戦略にも関係します

この記事の前提は、vs コードをインストールしていることです。コードエディターとnodejs.環境がインストールされていない場合は、自分でダウンロードしてインストールしてください。

1. Expressを使用してプロジェクトを作成します。 [両方の手順はdosモードで実行されます]

1. グローバルExpressをインストールします。 ! (すでにインストールされている場合は無視してください)


npm install -g express
ログイン後にコピー

2. プロジェクトを作成します

プロジェクトを作成します(フォルダー名ExpressAppを作成します)


express ExpressApp
ログイン後にコピー

補足: Linuxの環境に慣れている場合は、自分で作成できます。 cmder をコンピュータにインストールします (それが何であるかわからない場合は、Baidu にアクセスしてください)。このコマンド ライン ツールはレイアウトが美しく、Microsoft の DOS ほど退屈ではありません。私は Mini バージョンを使用しています。 Linux ですべての機能を体験したい場合は、フルバージョンをダウンロードしてください。

3、サードパーティパッケージをダウンロードします

(1) cmd コマンドラインでプロジェクトディレクトリに切り替えます


cd d:\nodejs\ExpressApp
ログイン後にコピー

(2) 必要に応じて package.json を編集し、次のコマンドを実行して 3 番目のパッケージをインストールします-party package


npm install
ログイン後にコピー

インストールされたサードパーティパッケージは、プロジェクトディレクトリのnode_modulesで確認できます

ExpressApp
|–node_modules

(3) プロジェクトを実行します


npm start
ログイン後にコピー

出力は次のようになります次のように:

ExpressApp@0.0.0 start d:Nodejs_WorkspaceExpressApp
node ./bin/www
注: npm start コマンドは自動的に node ./bin/www を実行します

ブラウザで Express ようこそページにアクセスします

2. VSCode を使用して Nodejs を開発します

1. VSCode で Nodejs を開きます


code d:\nodejs\ExpressApp 
code.
ログイン後にコピー

注: 現在のプロジェクトの下に ExpressApp.bat を作成し、「code .」と入力します。次回は、このファイルを使用して、VSCode で直接 Nodejs プロジェクトを開きます

2. スマート プロンプトを追加します

VSCode で Nodejs プロジェクトを開きます。デフォルトでは、スマート プロンプトはありません。

(1) TypeScript Definition Manager (TSD) を使用して、プロジェクトに必要な tsd ファイルをダウンロードします
tsd をグローバルにインストールします (既にインストールされている場合は無視します)


npm install -g tsd
ログイン後にコピー

ダウンロード必要なコンポーネント プロンプト (node、express、requirejs をダウンロードするためのプロンプトを例にします)


tsd query node --action install
tsd query express --action install
tsd install require
ログイン後にコピー

注:

①複数のプロンプトコンポーネントは、クエリパラメータの後にスペースで区切ることができます。略称は tsd クエリノードです。 Express –action install

②コンポーネント プロジェクトディレクトリにタイピングフォルダーを追加します

|- タイピング
|- ノード
|- Express
|- require

(2) js ファイル参照用のスマートプロンプトを追加します

ファイルが別のファイル common.js を参照している場合、ファイルヘッダーは次のように追加されます


{
  // See https://go.microsoft.com/fwlink/?LinkId=759670
  // for the documentation about the jsconfig.json format
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules",
    "bower_components",
    "jspm_packages",
    "tmp",
    "temp"
  ]
}
ログイン後にコピー

(ちょっとしたヒントですが、rquire を導入すると、「電球」プロンプトが右下隅に表示されます)電球をクリックするだけで、苦労する必要はありません。この設定ファイルは私が作成しました)

この設定は、この設定が発行された後、コードが ES5 標準に準拠し、commonjs 仕様を使用することを意味します。 VScode では、ファイル内の参照された js ファイルを要求するためのインテリジェントなプロンプトを実現できます。 (テスト時にこの設定を行わないとスマート プロンプトが表示されますが、理由はわかりません)

3. デバッグ

1. VSCode スケジュール設定ファイルを作成します

デバッグ パネルをクリックし、実行(F5)ボタン、右側にドロップダウンボックスが表示され、「Node.js」を選択します

その後、プロジェクトディレクトリにlaunch.jsonファイルが作成されます

ExpressAppp
|–.vscode
|– launch .json

必要に応じて launch.json を編集できます。起動設定項目を変更します

2. ブレークポイントを作成します:

必要に応じてブレークポイントを作成します: js ファイル編集領域の左側で、ブレークポイントが追加/削除されます

3. スケジュール

[デバッグ] パネルで [実行] をクリックするか、ショートカット キー F5 を押すか、F10 を押してシングルステップ デバッグを実行します。

実際、これらは Microsoft の公式ドキュメントに含まれており、計画された詳細や手順は開発者には表示されず無視されます。これは後の開発に一定の影響を与えるため、構成要件に厳密に従ってください。


vs codeを使用してphpを記述してデバッグします

以上がvs code を使用して Nodejs プログラムを開発するためのコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート