JavaScript
Node.js
TypeScript
VisualStudioCode

[Visual Studio Code][TypeScript][Windows] VSCodeでTypeScriptの開発環境を整える

More than 1 year has passed since last update.

個人的に使用する機会があったので環境構築方法をまとめ。

Windows向けの記事になります。(たぶんLinuxとかでもある程度は一緒かと思います)

※普段は組み込みLinux向けにC/C++を使ってる人間なので、メンテされてない可能性がありますのでご注意ください


検証環境(2017/02/25)


  • Windows 10

  • Visual Studio Code 1.9.1

  • Node.js v6.10.0 LTS

  • TypeScript v2.2.1


1. Visual Studio Code(以下VSCode)の環境整備


1.1. VSCodeのインストール

前提としてVSCodeをインストールします。

Visual Studio Code - Code Editing. Redefined


1.2. Node.js のインストール

Node.jsを公式ページからインストールします。

Node.js

特に理由がなければLTSの方をインストールしてください。

インストールが完了すれば、VSCode内の端末から npm コマンドが実行できるようになっているはずです。


npmの実行とバージョン確認

端末> npm -v

3.10.10


1.2. TypeScript のインストール


1.2.1. package.jsonの作成

npmでTypeScriptの最新をインストールします。

[表示] => [統合ターミナル] または Ctrl + ` キーで端末を開きます。

package.json がない場合は作成します。


package.jsonの作成

端末> npm init


大体はデフォルトでとりあえずはいいですが、Licenseの設定だけは適切なものに変更してください。


1.2.2. TypeScriptのインストール

TypeScript本体をインストールします。


TypeScriptとtslintのインストール

端末> npm install typescript tslint



1.2.3. TypeScriptの型定義ファイルについて

型定義ファイルの扱いについては tsd やら Typings やらでよくわかりませんでしたが、最近では npm + @types でなんとかなるようです。なので、本記事では @types 指定での方法を記載します。

@types

参考:

npmでTypeScriptの型定義を管理できるtypesパッケージについて - Qiita

特別なツール不要! TypeScript 2.0時代の型定義ファイルの取り扱い方 - Qiita


1.2.4. tsc でのコンパイルの実行

今回はプロジェクトのローカルにインストールしたため、以下のパスに存在します。

.\node_modules\.bin\tsc

ひとまずバージョンの表示で実行できることを確認してください。


TypeScriptのバージョン確認

端末> .\node_modules\.bin\tsc -v

Version 2.2.1

以上で共通の環境作成は完了です。


1.3. TSLintの拡張機能をインストール

TSLintを実行するプラグインをインストールします。


2. TypeScript のビルドの基本機能の確認

以下は TypeScript を使ってプロジェクトを作成する例になります。(1の環境設定が完了していることが前提です)


2.1. VSCodeのTaskRunnerの設定を行う

詳細なドキュメントは以下などを参照してください。

Tasks in Visual Studio Code

今回は tsc をそのまま使うタスクを抜粋しています。以下の手順を実行してください。


1. F2 or Ctrl+Shift+P でコマンドパレットを開く

コマンドパレットを開きます。


2. Configure Task Runner とタイプして Enter で選択

1.png


3. 次のメニューから tsconfig.json を選択

いろいろありますが、今回は tsconfig.json を選択します。

2.png


4. .vscode/tasks.json が作成されます

タスクランナーの作成コマンドを実行します。

3.png


2.2. tsconfig.json を作成する

端末で以下を実行してください。

端末> .\node_modules\.bin\tsc --init

tsconfig.json が生成されます。


tsconfig.json

{

"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": false
}
}

内容は必要に応じて適宜編集してください。

今回は以下のように指定しました。


tsconfig.jsonを変更

{

"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": true,
"watch" : true
},
"include": [
"*.ts"
],
"exclude": [
"node_modules"
]
}

"watch" : true の指定で "file" または "include" で指定したファイルを監視して再トランスパイルをかけてくれます。

TypeScript限定であれば、gulp とかよりもお手軽かと思われます。

その他設定値に関しては以下などを参考にしてください。

tsconfig.json · TypeScript


2.3. tslint.json を作成する

tslintの設定ファイルを生成します。


tslint.jsonの作成

端末> .\node_modules\.bin\tslint --init


初期値は以下のようになりました。


tslint.json

{

"jsRules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"indent": [
true,
"spaces"
],
"no-duplicate-variable": true,
"no-eval": true,
"no-trailing-whitespace": true,
"no-unsafe-finally": true,
"one-line": [
true,
"check-open-brace",
"check-whitespace"
],
"quotemark": [
true,
"double"
],
"semicolon": [
true,
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
"variable-name": [
true,
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
},
"rules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"indent": [
true,
"spaces"
],
"no-eval": true,
"no-internal-module": true,
"no-trailing-whitespace": true,
"no-unsafe-finally": true,
"no-var-keyword": true,
"one-line": [
true,
"check-open-brace",
"check-whitespace"
],
"quotemark": [
true,
"double"
],
"semicolon": [
true,
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": [
true,
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}

(あんまり詳しくないのでひとまずデフォルトで)内容は適宜修正してください。

TSLint


2.4. HelloWorld.ts を作成する。

ひとまずトランスパイルができることを確認します。


HelloWorld.ts

class Startup {

public static main(): number {
console.log('Hello World');
return 0;
}
}

Startup.main();


今回は watch で指定してるので、tsファイルの更新時にトランスパイルをしてくれます。

手動でやる場合は、Ctrl + Shift + B でビルドタスクを実行できます。


HelloWorld.js

class Startup {

static main() {
console.log('Hello World');
return 0;
}
}
Startup.main();
//# sourceMappingURL=HelloWorld.js.map

トランスパイルして、HelloWorld.js が生成されました。(一応実行結果も確認)


出力結果

端末> node .\HelloWorld.js

Hello World

TSLintも以下のような感じで動いています。自動修正もしてくれるみたいですね。

tslint1.png

tslint2.png

ひとまず一通りの環境作成は以上です。


3. もっと詳細な使用方法

TODO: @types を利用した Vue.js あたりを使ったサンプルを作成しようかと思ってたんですが、記事が長くなってきたので分割します。


参考

TypeScript Programming with Visual Studio Code

Node.js and Visual Studio Code Tutorial