「vscode」タグアーカイブ

VSCode Mac TypeScript の環境構築

投稿日時: 投稿者:

世間のすなる TypeScript と言ふものを我もしてみむとて環境を構築するなり。

…なのだが，存外，手間取ったので，記録しておこうと思う。前提としては，VSCodeはインストール済み。

  1. Homebrew の導入（★第１のハードル）
  2. nodebrew の導入
  3. Node.js の導入
  4. TypeScript の導入
  5. VSCode のビルドの設定（★第２のハードル）

1. Homebrew の導入

　Homebrew は以前に導入済みなのだが，その時にハマったりしたので，その時のことをあらためて書いてみる。

　ネットで調べれば，すぐに実行すべきコマンドが見つかるので，基本的にはターミナルでそれを実行すれば良い。

　だが，実行するとエラーになる。入力間違っていないか目を凝らして確認しても間違っていない。ネットの情報が間違っている？と想って複数のサイトで確認しても，同じだ。なぜ，ダメなのか？

【答】shell が tcsh ではダメでした。bash で実行したら，OKでした。

　いや〜，気づかないっすよ…。これ以来，ターミナルのデフォルト設定を bash にした。

2. nodebrew の導入

　本日やったことは，ここから。

　これもネットで調べれば出てくるので，それを実行するのだが，実行すると出てくるメッセージに従い，フォルダの生成や PATH の追加を行う必要がある。

$ brew install nodebrew
（Homebrew の更新があったりすると長い時間がかかる！）
　：
==> Caveats You need to manually run setup_dirs to create 
directories required by nodebrew:
/usr/local/opt/nodebrew/bin/nodebrew setup_dirs
Add path:   export PATH=$HOME/.nodebrew/current/bin:$PATH
　：

　そこで，/usr/… を実行し，nodebrew 用のフォルダを作り，vi で .bash_profile を編集して，PATH を追加し，source ~/.bash_profile で反映させる。

3. Node.js の導入

　これも特段の困難はなく，コマンドを実行するのみ。

$ nodebrew install-binary stable
$ nodebrew use stable

4. TypeScript の導入

　これもコマンドを実行するのみ。

$ npm install -g typescript

5. VSCode のビルドの設定

　新しいフォルダを作り，VSCode で開いて，ワークスペースに追加。プロジェクトのルートに tsconfig.json を作成。とりあえず，最小限の指定をする。

[tsconfig.json]
{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "sourceMap": true
    }
}

　適当なソースコードを用意する。JavaScript そのものでも良いようだ。ともかく，test.ts などのファイルを作り，コードを書き，保存する。

　さて，いよいよ，Cmd/Ctrl + Shift + B でビルドする。が，エラーとなる。曰く，tsc（コンパイラ）が見つからない，と。

　Mac のターミナルで，tsc -v とすると，きちんとバージョン番号を表示してくれるが，VSCode 内のターミナルでは，tsc が無いという。

【答】VSCode のシェルは，tcsh になっていた。

　そりゃ，.bash_profile にPATH を追加したのだから，tcsh ではダメですよね。.tcshrc にも PATH の設定を入れるか，とも思ったが，そもそも，デフォルトの shell の設定はどうなっているのだ？と思って調べて見た。

　Mac のターミナルで，echo $SHELL すると，/bin/bash である（1. の以前に行った Homebrew の導入の際に設定したもの）。しかし，VSCode のターミナルで，echo $SHELL を見ると，/bin/tcsh となる。システム側で管理されている情報は，古いデフォルトのままのようだ。

　そこで，変更方法をネットで調べて実行した。

  1. 「システム環境設定」を開き，「 ユーザとグループ」を選択
  2. 左下の南京錠のアイコンをクリックして，パスワードを入力し，設定を変更可能にする
  3. すると，左側のユーザのリストを右クリックで「詳細オプション」が選べるようになる
  4. そこにログインシェルの項目があり，当然ながら，/bin/tsch となっていたのを /bin/bash に変更

　ちなみに，使っている Mac は，iMac Late 2009 という古いもので，OS は High Siera までは上げられたが，それ以降にはアップデートできないもの。最初は，Snow Leopard だったか。なので，購入初期にユーザを作成した際の，古いデフォルト設定の shell を引き継いでいるようだ。

　あれ？　tcsh でダメで，bash って，Homebrew の時と同じことを繰り返しているような…。ともかく，いったんログアウトし，VSCode を起動し直すと，ビルドできるようになりました。