nobu blog

プログラミングやゲーム、ゲーム音楽コンサート周りの話をつらつらと。

*



VSCodeでNode.js Typescript環境、プロジェクトの作成

   

概要

VSCodeでTypescriptを使ってデバッグできる所までを忘備録としてメモに。

前提

Mac上でVSCode及びNode.jsをインストール済の環境。
VSCode 1.28.0
Node.js 8.12

それ以外にVS拡張として
nom 0.3.5
TSLint 1.0.4.0

などをインストールしています。

スポンサーリンク

空のフォルダの生成

プロジェクトのルートとなる、空のフォルダを作成し、VSCodeで開く。

npmの初期化

画面上部のターミナル→新しいターミナルを選択する。
ターミナルが表示されら、から下記のコマンドを実行する。
npm init -y

下記のようなpackage.jsonファイルが作成される。

不用な設定をカットし、private項目を追加しtrueとする。

追加フォルダの作成

ルートに以下のフォルダを追加
.vscode
src
build

srcがtypescriptファイル、buildがトランスパイル結果のjsファイルを格納する場所として利用。

typescript

下記のコマンドを実行する。devDependenciesにTypescriptが追加される。
npm i -DE typescript ts-node

インストール後に以下のコマンドを実行する。
node_modules/.bin/tsc –init

tsconfig.jsonがルートに作成される。
設定を下記のように書き換える。

トランスパイルを試す

srcフォルダ以下にindex.tsファイルを作成し、下記のようなコードを打ち込む。

ターミナル→ビルドタスクの実行 を選択して、tsc:ビルド を選択。
buildフォルダ以下にindex.jsが出力される。

デバッグ実行

.vscode/lunch.josnを作成する。

作成後、ブレークポイントを張ってデバッグ実行を行い、止まる事を確認する。

TSLintインストール

静的解析としてTSLintをインストール
ターミナルから下記を実行する
npm i -DE tslint

実行後、下記コマンドで初期化を実施する。
node_modules/.bin/tslint –init

実施すると、tslint.jsonが生成される。
生成されたファイルの内容を変更する。
①rulesを追記。(console.logでエラーを出すルールを除外)
②defaultSeverityをerrorからwarnに変更。(TSLintで検出事項をerrorではなくwarnとして扱う)

下記のように警告が出るようになる事を確認する。

 - Javascript, TypeScript