Node.js Applications with VS Code(原文)
Node.jsは、JavaScriptを使用して、速く、そして、大きさの変更可能なサーバー・アプリケーションを構築するための基盤です。 ランタイム、そして、NPMであるNode.jsは、Node.jsモジュールのためのパッケージ・マネージャーです。
VS Codeは、Node.jsデバッグと同様、すぐに使えるJavaScriptとTypeScript言語をサポートしています。 しかしながら、Node.jsアプリケーションを実行するために、あなたは、あなたのマシンに、Node.jsランタイムをインストールする必要があるでしょう。
このチュートリアルを始めるために、あなたのプラットフォームのためのNode.jsをインストールします。 Node Package Managerは、Node.jsディストリビューションに含まれています。 あなたは、パス上にあるノードとnpmコマンドライン・ツールのための新しいターミナル（コマンド・プロンプト）を開く必要があります。
Linux：
Linuxのさまざまな特色のための、利用できる特定のNode.jsパッケージがあります。 あなたのLinuxのバージョンに合わせた、Node.jsパッケージとインストール手順を見つけるために、 パッケージ・マネージャーによって、Node.jsをインストールするを参照してください。
ヒント：
あなたが、適切にNode.jsを、お使いのコンピュータにインストールできたかを検証するには、 端末からnode --helpを入力し、そして、あなたは、使用マニュアルを見る必要があります。
Hello World
最も簡単なNode.jsアプリケーション（「Hello World」）を作成することで、使い始めましょう。
「Hello」と名付けた空のフォルダを作成し、VS Codeを移動し、開きます。：
mkdir Hello
cd Hello
code .
情報：
あなたは、コマンド・ラインから、直接、ファイルやフォルダを開くことができます。 ピリオド「.」は、カレント・フォルダを参照するため、VS Codeは、開始し、そして、Helloフォルダを開きます。
File Explorerツールバーから、New Fileボタンを押します：
そして、ファイルに、app.jsという名前をつけます：
.jsファイル拡張を使用して、VS Codeは、JavaScriptとして、このファイルを解釈します。そして、JavaScript言語サービスと一緒に、内容を評価するでしょう。
app.js内に、簡単なstring変数を作成します。そして、文字列の内容をコンソールに送信します。：
var msg = 'hello world';
console.log(msg);
あなたが、consoleを入力したとき、注意してください。コンソール・オブジェクトのIntelliSenseが、あなたに自動的に示します。 JavaScriptファイルを編集するとき、VS Codeは、自動的に、DOMのための、IntelliSenseを、あなたに提示します。
また、VS Codeが、そのmsgは、'hello world'に初期化上の文字列に基づいていることを知っていることに注意します。 あなたが、msg.を入力する場合、あなたは、msg上で利用できる、全ての文字列関数を示しているIntelliSenseを見るでしょう。
IntelliSenseで実験した後に、上記のソース・コードの例から、どんな追加の変更でも戻り、そして、ファイル（Ctrl+S）を保存します。
Hello Worldを実行する
Running Hello World
Node.jsで、app.jsを実行することは、簡単です。ターミナルから、入力します。：
node app.js
あなたは、ターミナルと続く、Node.jsの戻り値で、「Hello World」出力を見る必要があります。
Hello Worldをデバッグする
Running Hello World
Node.jsで、app.jsを実行することは、簡単です。ターミナルから、入力します。：
node app.js
あなたは、ターミナルと続く、Node.jsの戻り値で、「Hello World」出力を見る必要があります。
Hello Worldをデバッグする
Debugging Hello World
序文で述べたとおり、VS Codeは、インストールされたNode.jsデバッガが付属しています。私達の簡単なアプリケーションをデバッグしてみましょう。
app.jsのブレークポイントを設定するために、エディタ・カーソルを最初の行に置きます。 そして、F9を押す、あるいは、次に、単純に、エディタの左のガター内の行番号をクリックします。赤い円が、ガターに表示されます。
私たちは、次に、この簡単な作業スペースのため、デバッガを設定する必要があります。Side Barで、Debug Viewを選択します。：
既定のlaunch.json設定ファイルを作成する、Debugビューの上部の設定の歯車アイコンをクリックします。 そして、デバッグ環境として、Node.jsを選択します。この構成ファイルは、あなたに、どのように、アプリケーションを開始するか、 どんな引数、作業ディレクトリーなどを渡すか、指定させます。 新しいlaunch.jsonファイルは、あなたの作業スペースのルートの、VS Codeの特定の.vscodeフォルダに作成されます。
既定のNode.js起動構成を作成し、あなたは、次に、Debugツールバーの緑の矢印をクリックすることができます。 あるいは、「Hello World」を起動して、デバッグするために、F5を押します。あなたのブレークポイントは、衝突するでしょう。 そして、あなたは、簡単なアプリケーションを、表示し、ステップ実行することができます。 VS Codeは、それが、DebugモードとDEBUG CONSOLEであることを示すために、オレンジ色のステータス・バーが表示されていることに、注意してください。
Express
Expressは、Node.jsアプリケーションを構築し、実行することのための、極めて評判がよいアプリケーション・フレームワークです。 あなたは、Expressジェネレーター・ツールを使用して、新しいExpressアプリケーションに足場を組む（作成する）ことができます。 Expressジェネレーターは、NPMモジュールとして発送され、NPMコマンドライン・ツールnpmを使用して、インストールされます。
ヒント：
あなたが、適切にnpmを、お使いのコンピュータにインストールできたかを検証するには、 ターミナルからnpm --helpを入力し、そして、あなたは、使用マニュアルを見る必要があります。
ターミナルから次のことを実行することによって、Expressジェネレーターをインストールします：
npm install -g express-generator
-gスイッチは、あなたのマシンに、Expressジェネレーターを、グローバルにインストールします。 それで、あなたは、どこからでも、それを実行することができます。 私たちは、次に、実行することで、myExpressAppと呼び出される、 新しいExpressアプリケーションに足場を組むことができます。：
express myExpressApp
これは、あなたのアプリケーションの内容で、myExpressAppを呼び出される、新しいフォルダを作成します。 アプリケーションの依存関係の全てをインストールするには、 （再び、NPMモジュールとして、発送されます）、新しいフォルダに移動し、npmインストールを実行します。：
cd myExpressApp
npm install
ここで重要な点は、私たちは、私たちのアプリケーションが実行するテストする必要があります。 作成されたExpressアプリケーションは、package.jsonファイルがあります。 それは、ノード./bin/wwwを実行するための起動スクリプトが含まれています。 これは、Node.jsアプリケーションの実行を開始します。
（実行される）Expressアプリケーション・フォルダ内のターミナルから、：
npm start
Node.jsウェブサーバは、開始するでしょう。 そして、あなたは、動作中のアプリケーションを確かめるために、http://localhost:3000をブラウズすることができます。
大きなコードを編集する経験
Great Code Editing Experiences
myExpressAppフォルダ内のターミナルから、ブラウザを閉じて、CTRL+Cを押すことで、Node.jsサーバを停止します。
次に、VS Codeを起動します：
code .
Node.jsとExpressのドキュメンテーションは、基盤とフレームワークを使用して、高機能なアプリケーションをどのように大きな作業を構築するかを説明します。 Visual Studio Codeは、編集とナビゲーションの経験が、大きなコードを提供することによって、この種のアプリケーションを、より生産的に開発することができるでしょう。
以前に、私たちは、JavaScript言語サービスが、あなたのソース・コードを推測できる、IntelliSenseを見ました。 次に、私たちは、もう少しの設定と構成を見ていきます。 Visual Studio Codeは、さらに、より高機能な情報を提供し、そして、サポートを構築することができます。
jsconfig.json設定ファイルを追加する
Adding a jsconfig.json Configuration File
VS Codeは、あなたが、JavaScriptファイルで作業していることを検出するとき、確かめるように見ます。 あなたが、作業スペースに、JavaScript設定ファイルjsconfig.jsonを持っている場合、 それが、見つからない場合、あなたは、ステータス・バーに、それを作成することをあなたに促す、緑の電球を見るでしょう。
jsconfig.jsonファイルを作成するために、緑の電球をクリックして、注意を受け入れます。：
あなたが、Auto Saveをオンにしていない場合、Ctrl+Sを押すことによって、ファイルを保存します。
このファイルの存在を、VS Codeに知らせます。それは、同じプロジェクトの一部として、このルート下で、すべてのファイルを処理する必要があります。 私たちは、次の項目で確かめます。これは、あなたの作業スペースに、型（Type Definitionファイル）を追加することで、IntelliSenseを拡張するために、重要です。 また、この構成ファイルは、あなたが、compilerOptionsのような、設定を指定することができます。 そして、このフォルダは、あなたが、好きな、JavaScript言語サービスを除外します（無視します）。 私たちが、まさに今、作成した既定のjsconfig.jsonファイルは、JavaScript言語サービスを伝えます。 それは、あなたが、ES6に対応するコード、そして、あなたが、無視したい依存関係と一時的な内容のフォルダを記述します。
IntelliSenseとタイプ入力
IntelliSense and Typings
VS Codeは、あなたが、アプリケーションで利用するJavaScriptに基づくフレームワークに関するメタデータを、 VS Codeに提供するために、（node.d.tsのような）TypeScriptの定義ファイルを使用することができます。 TypeScriptの定義ファイルが、TypeScriptで記述されているため、 それらは、VS Codeが、提供できる高機能なIntelliSenseエクスペリエンスをパラメータと関数の型で表現することができます。
タイプ入力、TypeScriptのための型定義マネージャーは、検索する、そして、TypeScriptの定義ファイルを、 あなたの作業スペースにインストールするために、それを簡単に作成します。 このツールは、DefinitelyTypedリポジトリーが含まれている、いろいろなソースから要求された定義をダウンロードすることができます。 私たちが、Expressジェネレーターで行ったように、 私たちは、グローバルに、NPMを使用して、Typingsコマンドライン・ツールをインストールします。 それで、あなたが、どんなアプリケーションでも、あなたが作成したツールを使用できます。
npm install -g typings
ヒント：
タイプ入力は、どこで、どのように、定義ファイルがダウンロードするかを設定するための多くのオプションを持っています。 ターミナルから、詳細は、--helpをタイプし実行します。
あなたが、Node.js global object __dirname上にカーソルを重ねると、ファイルapp.jsと通知に戻ります。 VS Codeは、型を知らないので、何でも表示します。
現在、Typingsコマンド・ラインを使用して、Node.jsとExpress型定義ファイルを引き出します。：
typings install dt~node --global
typings install dt~express dt~serve-static dt~express-serve-static-core --global
dt~接頭辞は、指定された型定義ファイルを、DefinitelyTypedリポジトリーを検索するTypingsツールに伝えます。
ヒント：
あなたは、コマンド・ラインで、それらを組み合わせることによって、複数の定義ファイルをダウンロードすることができます。 あなたが、上記のExpressタイプ入力から、確認することができるように、私たちは、Expressのためのタイプ入力、そして、その参照もまた、インストールする必要があります。
備考
あなたが、インストールの間、タイプ入力INFOメッセージを確認する場合、気する必要はありません。 Typingsツールは、不必要なものを一掃しています。///ダウンロードされたタイプ入力ファイルで参照します。
node.d.tsファイルからのメタデータに基づいて、VS Codeが、__dirnameが何か、どのように、現在、理解しているかに注意します。 さらに、刺激的に、あなたは、Node.jsフレームワークに対する、全てのIntelliSenseを取得することができます。 例えば、あなたは、httpを必要とし、 そして、httpクラスに対して、あなたのVisual Studio Codeの入力として、全てのIntelliSenseを取得することができます。
備考
先ほど項目で説明したように、あなたは、あなたの作業スペース・ルート内に、jsconfig.jsonファイルを持っていることを確認します。 それで、VS Codeは、インストールされたタイプ入力ファイルを取り出します。
また、あなたは、他のファイルで、モジュールを参照するコードを記述することができます。 例えば、app.jsでは、私たちは、Express.Routerクラスをエクスポートする./routes/indexモジュールを必要としています。 あなたが、ルート上でIntelliSenseを表示する場合、あなたは、Routerクラスの形状を確かめることができます。
あなたのExpressアプリケーションをデバッグする
Debugging your Express Application
ちょうど今、私たちは、早い段階で「Hello World」を行ったので、 あなたは、Expressアプリケーションのためのデバッガ設定ファイル、launch.jsonを作成する必要があるでしょう。 View Barで、デバッグ・アイコン、そして、その次に、既定のlaunch.jsonファイルを作成するために、 Debugビューの一番上に設定の歯車アイコンをクリックします。あらためて、Node.js環境を選択します。 ファイルが、最初に作成されるとき、VS Codeは、起動スクリプトのためのpackage.jsonを探します。 そして、起動構成のためのプログラム（この場合${workspaceRoot}/bin/www）として、その値を使用します。 また、２つ目のAttach構成は、あなたが、実行するNode.jsアプリケーションに、どのように、添付するか表示するために、作成されます。
新しいファイルを保存して、Debugビューの一番上の設定ドロップダウンで、Launchが、選択されていることを確認します。 app.jsを開いて、そして、Expressアプリ・オブジェクトが作成されるファイルの上側の近くに、左側のガターの行番号をクリックすることで、 ブレークポイントを設定します。アプリケーションのデバッグを開始するために、F5を押します。 VS Codeは、新しいターミナルで、サーバを開始し、そして、私たちが設定したブレークポイントに衝突するでしょう。 そこから、あなたは、あなたのコードを通じて、watchesをstepに作成することで、変数を調べることができます。
拡張
Extensions
コミュニティは、絶えず、Node.jsのための、より多くの価値のある拡張を開発しています。 あなたの役に立つかもしれない、いくつかの評判がよい拡張は、ここにあります。
- View Node Package（原文）－VS Codeから、Node.jsパッケージのリポジトリー/ドキュメンテーションを、一気に開きます。
- JavaScript (ES6) code snippets（原文）－ES6構文のJavaScriptのためのスニペット。
- ESLint（原文）－VSCodeにESLintを統合します。
- JSHint（原文）－VS CodeにJSHintを統合します。
- Add JSDoc comments（原文）－SとTS内の署名機能を選択するために、JSDoc @paramと@returnタグを追加します。
- Prettify JSON（原文）－VS Code内の、醜いJSONを飾り立てます。
- Beautify（原文）－この拡張は、VS Code内で、実行しているjs-beautifyを有効にします。
次の手順
Next Steps
Visual Studio Codeで検索する多くの事があります。次のトピックを挑戦してみてください。：
一般的な質問
Common Questions
Q:IntelliSenseは、私が、それらの型をインストールしたあと、Node.jsとExpressのための作業をしていません？
A:作業スペースのルート・フォルダに、jsconfig.jsonファイルが存在することを確認してください。 それで、そのVS Codeは、すべてのファイルとフォルダを、同じプロジェクト・コンテキストに属していると扱います。 jsconfig.jsonが無ければ、VS Codeは、単独で、JavaScriptとTypeScriptファイルを考慮します。 そして、あなたのソース・コードが、入力型定義ファイルと関連付けられません。
