Zenn
🌊

USBメモリで持ち運べるVSCode+Node.jsのポータブルな開発環境の作成

2024/01/14に公開
Node.js
VS Code
個人開発
tech

説明すること

  • 学校のパソコンなどソフトのインストールが許可されていない状況下で、Visual Studio Code + Node.jsのポータブルな開発環境を用意する方法
  • Windows環境を想定

最初の準備

  • 適当なフォルダを開いて、メニューの「表示」→「表示」から「ファイル拡張子」にチェックを入れる。拡張子はファイル名の一部なので、プログラミングする際に表示されていないと非常に分かりにくくなる。

  • 空のUSBメモリをパソコンに挿し、使えるようにしておく。

Visual Studio Codeの導入

  1. USBメモリの中にVSCodeという空のフォルダを作っておく。
  2. Visual Studio Codeの公式サイトからVisual Studio Codeをダウンロードする。インストーラではなく.zip形式で、さらに使用するパソコンにあったものをダウンロードすること。ファイル名はVSCode-win32-x64-1.85.1.zipのような感じになっているはず。最後の数字部分はソフトのバージョンなので、時期によって変化する。
  3. ダウンロードしたファイルを、USBメモリのVSCodeフォルダに展開する。
  4. 【重要】 VSCodeフォルダ内にdataという空のフォルダを作成する。このdataフォルダがないとポータブルにならないので注意。
  5. VSCodeフォルダ内のCode.exeをダブルクリックし、 Visual Studio Codeが起動することを確認する。
  6. 無事に起動したら、Visual Studio Codeを終了しておく。

Node.jsの導入

  1. Node.jsの公式サイトからNode.jsのバイナリをダウンロードする。やはりインストーラではなく、LTSの64-bitのWindwos Binary (.zip)を選択する。ファイル名はnode-v20.10.0-win-x64.zipのような感じになっているはず。
  2. ダウンロードしたファイルを展開し、できたフォルダ名をNodeJSに変更し、USBメモリに移動する。

この時点でUSBメモリの中身は以下のようになっているはず。

USBメモリの中身
D:/
├── NodeJS/
│   ├── node_modules/
│   ├── CHANGELOG.md
│   ├── corepack
│   └── ...
└── VSCode/
    ├── bin/
    ├── data/
    └── ...

Visual Studio Code起動用のbatファイルを作る

これからVisual Studio Code上でNode.jsのコマンドnpmやnpxを実行したい。しかしパソコンはそのコマンドの本体や、これから追加するであろうパッケージがどこにあるか知らないので、それを教えてあげなくてはいけない（つまりパスを通さなくてはいけない）。インストーラを使った場合、この作業はインストーラがやってくれるのだが、今回はインストーラを使っていないので、手動で行う必要がある。起動のたびに行うのは大変なので、それを自動で行い、ついでにVisual Studio Codeを起動してくれる簡単なプログラム（batファイル）を書くことにする。

まずはStartVSCode.batファイルをUSBメモリの中に作り、以下の内容を書き込む。

StartVSCode.bat
set cwdir=%~dp0%
set nodedir=%cwdir%NodeJS
set PATH=%nodedir%;%PATH%
set NODE_PATH=%nodedir%\node_modules\npm\node_modules;%nodedir%\node_modules\npm
call %cwdir%VSCode\Code.exe

Visual Studio Codeの起動確認

  1. 今作ったばかりのStartVSCode.batをダブルクリックすると、黒地に白字のウィンドウが出た後、Visual Studio Codeが起動する。
  2. Visual Studio Code上でCtrl+@を押すとPowerShellのターミナルが開くので、node -vと入力してEnterキーで実行する。その後、npm -vと入力してEnterキーで実行する。
実行結果の例
PS D:\> node -v
v20.10.0
PS D:\> npm -v
10.2.3

バーションの数字が表示されたら問題なく動作している（数字はインストールしたバージョンによってもちろん違う）。Visual Studio Codeが起動しなかったり、バーションの数字が出ない場合は、ここまでの作業で何かミスをした可能性が高い。

Visual Studio Codeにプラグインを導入する（おまけ）

Visual Studio Codeを便利にする拡張機能をインストールする。インストール方法は以下の通り。

  1. 画面左側のExtentions（四角形4つのアイコン）をクリックする
  2. インストールしたい拡張機能を検索する
  3. Install（またはインストール）をクリックする

何をするかによるが、何をするにしても便利なものは以下の通り。

拡張機能 説明
Japanese Language Pack for Visual Studio Code 表示を日本語にする
IntelliCode AIによるコードディング支援
zenkaku 全角スペースを強調表示してくれる
indent-rainbow インデントの深さを色分けしてくれる
Code Spell Checker 英単語のミスを指摘してくれる

Discussion