ソリューションやプロジェクトを使用せずにVisual Studioで JavaScript と TypeScript コードを開発する

プロジェクトやソリューションを使用せずにコードを開発できます。 この方法を使用すると、コードのフォルダーを開き、IntelliSense、検索、リファクタリング、デバッグなどの豊富なエディター サポートの使用をすぐに開始できます。 これらの機能に加えて、Node.js Tools for Visual Studioでは、TypeScript ファイルのビルド、npm パッケージの管理、および npm スクリプトの実行のサポートが追加されています。

作業を開始するには、ツール バーから [ファイル>開く>フォルダー ] を選択します。 ソリューション エクスプローラーフォルダー内のすべてのファイルが表示され、任意のファイルを開いて編集を開始できます。 バックグラウンドで、Visual Studioは npm、ビルド、デバッグ機能を有効にするためにファイルのインデックスを作成します。

前提条件

• Visual StudioNode.js 開発ワークロードをインストールする必要があります

npm 統合

開くフォルダーに package.json ファイルが含まれている場合は、 package.json を右クリックして npm 固有のコンテキスト メニュー (ショートカット メニュー) を表示できます。

ショートカット メニューでは、プロジェクト ファイルを使用するときに npm パッケージを管理するのと同じ方法で 、npm によってインストールされたパッケージを管理できます。

また、メニューでは、package.jsonの scripts 要素で定義されたスクリプト を 実行することもできます。 これらのスクリプトでは、 PATH 環境変数で使用可能な Node.js のバージョンが使用されます。 スクリプトは新しいウィンドウで実行されます。 これは、ビルドを実行したり、スクリプトを実行したりするための優れた方法です。

ビルドとデバッグ

package.json

フォルダー内の package.json がmain要素を指定している場合は、package.json の右クリック ショートカット メニューで [デバッグ] コマンドを使用できます。 このコマンドを選択すると、指定したスクリプトを引数として node.exe が開始されます。

[デバッグ] コマンドでアプリが正しく起動されない場合は、次の例のように、package.json ファイルに開始スクリプトが含まれていることを確認します。

"main": "index.js",
"scripts": {
  "start": "node index.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

この例では、package.jsonから開始スクリプトを実行するには、ソリューション エクスプローラーで package.json を右クリックし、npm>npm 実行スクリプトの開始を選択します。

JavaScript ファイル

JavaScript ファイルをデバッグするには、ファイルを右クリックし、ショートカット メニューから [デバッグ ] を選択します。 これにより 、その JavaScript ファイルを引数としてnode.exeが開始されます。

Debug コマンドがアプリを正しく起動しない場合は、「package.json」セクションで説明されているメソッドを使用して、開始スクリプトを実行します。

TypeScript ファイルと tsconfig.json

フォルダーに tsconfig.json がない場合は、TypeScript ファイルを右クリックして、そのファイルをビルドおよびデバッグするためのショートカット メニュー コマンドを表示できます。 これらのコマンドを使用する場合は、既定のオプションで tsc.exe を使用してビルドまたはデバッグします。 (デバッグする前にファイルをビルドする必要があります)。

フォルダーにtsconfig.json ファイルが存在する場合は、TypeScript ファイルを右クリックして、その TypeScript ファイルをデバッグするメニュー コマンドを表示できます。 このオプションは、tsconfig.jsonでoutFileが指定されていない場合にのみ表示されます。 outFileが指定されている場合は、tsconfig.jsonを右クリックし、正しいオプションを選択することで、そのファイルをデバッグできます。 tsconfig.json ファイルには、コンパイラ オプションを指定するためのビルド オプションも用意されています。

単体テスト

Visual Studioで単体テスト統合を有効にするには、package.jsonでテスト ルートを指定します。

{
    // ...
    "vsTest":{
        "testRoot": "./tests"
    }
    // ...
}

テスト ランナーは、ローカルにインストールされているパッケージを列挙して、使用するテスト フレームワークを決定します。 サポートされているフレームワークが認識されない場合、テスト ランナーは既定で ExportRunner に設定されます。 サポートされているその他のフレームワークは次のとおりです。

• Mocha (mochajs.org)
• ジャスミン (Jasmine.github.io)
• テープ (github.com/substack/tape)
• Jest (jestjs.io)

テスト エクスプローラーを開いた後 (Windowsテスト エクスプローラーテスト 選択)、Visual Studio によってテストが検出され、表示されます。