NVMとVisual Studio CodeでNode.js開発を効率化！プロジェクトごとにバージョンを使い分ける方法
Visual Studio CodeでNVMで指定されたNode.jsバージョンを使用する方法
前提条件
- NVMがインストール済みであること
- Node.jsプロジェクトがあること
手順
- プロジェクトディレクトリでNVM使用するバージョンを設定する
nvm use <version>
<version> を、プロジェクトで使用したいNode.jsバージョンに置き換えます。
- VSCodeでターミナルを開く
- Mac:
Command + Shift + C - Windows:
Ctrl + Shift +
- 以下のコマンドを実行して、VSCodeにNVMバージョンを認識させる
export PATH=$(nvm bin):$PATH
- VSCodeの設定を開く
「Node.js パス」オプションの値を、NVMでインストールしたNode.jsのパスに設定します
例：
/home/user/.nvm/versions/16.14.2/bin/node
これで、VSCodeでNVMで指定されたNode.jsバージョンが使用されるようになります。
補足
- プロジェクトごとに異なるNode.jsバージョンを使用したい場合は、プロジェクトディレクトリごとに上記の手順を実行する必要があります。
.nvmrcファイルを使用して、プロジェクトディレクトリで使用するNode.jsバージョンを指定することもできます。詳細については、NVMのドキュメントを参照してください。
- NVMを使用してNode.js 16.14.2をインストールする
nvm install 16.14.2
- プロジェクトディレクトリを作成し、移動する
mkdir my-project
cd my-project
nvm use 16.14.2
- package.jsonファイルを作成する
{
"name": "my-project",
"version": "1.0.0",
"script": {
"start": "node index.js"
},
"devDependencies": {
"node-dev": "^8.0.0"
}
}
- index.jsファイルを作成する
console.log('Hello, world!');
- Node.js開発サーバーを起動する
npm install node-dev
npx node-dev
export PATH=$(nvm bin):$PATH
/home/user/.nvm/versions/16.14.2/bin/node
これで、VSCodeでNVMで指定されたNode.jsバージョン（16.14.2）がプロジェクトで使用されるようになります。ブラウザで http://localhost:3000 にアクセスすると、「Hello, world!」と表示されます。
- この例では、Node.devを使用して開発サーバーを起動しています。これは、開発中にコード変更を自動的に再読み込みするのに役立つツールです。
Visual Studio CodeでNVMのNode.jsバージョンを使用するその他の方法
.nvmrc ファイルは、プロジェクトディレクトリに作成して、そのディレクトリで使用するNode.jsのバージョンを指定するために使用できます。これにより、プロジェクトを開くたびにNVMコマンドを実行する必要がなくなります。
.nvmrc ファイルを作成するには、プロジェクトディレクトリに移動し、次のコマンドを実行します。
echo 16.14.2 > .nvmrc
このコマンドは、.nvmrc ファイルを作成し、その内容を 16.14.2 に設定します。これは、プロジェクトでNode.js 16.14.2を使用することをNVMに指示します。
NVMと統合するいくつかのVisual Studio Code拡張機能があります。これらの拡張機能を使用すると、VSCodeのUIから簡単にNode.jsバージョンを切り替えることができます。
人気のあるNVM統合拡張機能のいくつかを次に示します。
これらの拡張機能をインストールするには、Visual Studio Code拡張機能マーケットプレイスに移動し、拡張機能を検索してインストールします。
launch.json ファイルを使用して、デバッグと実行時に使用するNode.jsバージョンを指定することもできます。これにより、プロジェクトごとに異なるバージョンを使用することができます。
code .vscode/launch.json
このコマンドは、.vscode フォルダーを開き、launch.json ファイルを作成します。
launch.json ファイルでNode.jsバージョンを指定するには、次のように program プロパティを設定します。
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/.bin/node",
"args": ["index.js"],
"node": "16.14.2"
}
]
}
この例では、node_modules/.bin/node ディレクトリ内のNode.js 16.14.2を使用するように program プロパティが設定されています。
注意事項
- 上記の方法はすべて、NVMがインストール済みで、正しく構成されていることを前提としています。
- プロジェクトごとに異なるNode.jsバージョンを使用する場合は、
.nvmrcファイルまたはlaunch.jsonファイルを使用するのが最善の方法です。 - Visual Studio Code拡張機能を使用すると、NVMを簡単に管理できますが、拡張機能が古くなったり、サポートされなくなったりする可能性があることに注意してください。
これらの追加の方法に関する詳細については、NVMとVisual Studio Codeのドキュメントを参照してください。
node.js visual-studio-code nvm
