Multi Vitamin & Mineral

Multi Vitamin & Mineral です。プログラムに関することを書いております。

トップ > 環境・ツール__VSCode > TypeScript の開発環境を作る。VSCode を基本に ESLint と Prettier も添えて。

TypeScript の開発環境を作る。VSCode を基本に ESLint と Prettier も添えて。

環境・ツール__VSCode 環境・ツール__eslint 環境・ツール__Prettier 環境・ツール__node.js 言語・ライブラリ__npm 言語・ライブラリ__TypeScript

はじめに

TypeScript の開発環境の作り方です。 「TypeScript をサクッと一通り知る」のサブコンテンツとなっています。

multimineral-tech.com

ここでは、特定のディレクトリ（以降、プロジェクトと呼ぶ）内でのみで TypeScript が有効になる環境の構築を目指すものです。（PC全体にはインストールしないということ。）内容は以下に列挙します。 TypeScript を試してみたいだけたら上記の記事で十分です。

  • 前提
    • Node.js がインストールされていることを前提とする
    • VSCode を使う
  • インストールと設定
    • TypeScript は特定のディレクトリのみで有効になる
    • eslint でコードチェックを行う
    • eslint と Prettier でコードの整形を行う
    • ファイル保存時に自動でコード整形を実行する

VSCode と Node.js の用意

VSCode で Ctrl+@ でコンソールを開き、以下のコマンドを打ちます。バージョン番号が表示されれば Node.js のイントールはうまく行ってます。

$ node -v
v12.16.1
$ npm -v
6.14.2

VSCode 、 Node.js 、 gitbash あたりのインストールについては以下に書いています。

multimineral-tech.com

TypeScript のインストール

TypeScript は npm にホスティングされているので、npm を利用します。

特定のディレクトリを予め作成しておきます。そのフォルダに移動し、以下の3つのコマンドを打ちます。

$ npm init 
$ npm install --save typescript
$ npx tsc --init
  • npm init で package.json ができます。
  • npm install --save typescript で package.json に typescript が追加されます。
  • npx tsc --init で tsconfig.json ができます。

package.json は npm の設定ファイルです。tsconfig.json は tsc （= TypeScript ）の設定ファイルです。

npm install --save typescript は npm install -g typescript と違い、PCではなく実行したフォルダ内にインストールします。このコマンドを打つと node_modules というフォルダも生成されます。 TypeScript はこのフォルダにダウンロードされます。

npx tsc --init の npx は npm ＋実行というニュアンスで、 node_modules にダウンロードされた tsc を使います。

TypeScript のコンパイル

ここまでで TypeScript は使えます。試しにファイルを作ってコンパイルしてみます。

TypeScriptのファイルは拡張子を .ts にします。以下のファイルを作成し、以下のコマンドで変換してみます。

// js/main.ts
// TypeScriptの型指定を入れた
function sayHello(name: string): void {
  console.log(`Hello ${name}!`); // ES6のテンプレート文字列を使った
}
let myName: string = "TypeScript";
sayHello(myName);

npm でインストールした tsc を使ってコンパイルします。

$ npx tsc js/main.ts

js/main.js が生成されました。

// js/main.ts
// TypeScriptの型指定を入れた
function sayHello(name) {
    console.log("Hello " + name + "!"); // ES6のテンプレート文字列を使った
}
var myName = "TypeScript";
sayHello(myName);

TypeScript、ES6の構文がすべてES5の構文に変換されているのが分かります。変換後の JavaScript は以下のコマンドで実行できます。

$ node js/main.js
Hello TypeScript!

eslint の導入

ですが、プロジェクト内で利用できるようにするのであれば、もう少し便利に使えるようツールを入れたい。そこで、 eslint と Prettier についても触れておきます。

eslint は JavaScript のコードスタイルをチェックするツールです。（TypeScript は tslint というのがあったのですが、こちらは廃止の意向で eslint に統合されるようです。）

以下のコマンドでインストールと初期化が行われます。

$ npx eslint --init

この後質問がいくつかあり、好きなのをチョイスします。今回は「To check syntax, find problems, and enforce code style」を選び、コードを強制修正する前提にしておきます。途中で TypeScript を使うかも聞かれますので y (=yes) としておきましょう。 利用するスタイルガイドは「Answer questions about your style」で聞かれます。私は「Use a popular style guide」で「AirBnB」を選びましたがお好みで。

実行が完了すると .eslintrc.js が生成されます。ここに設定が出力されます。

この後、警告を自動修正してくれる --fix オプション をつけて eslint を実行します。ソースコードのインデントやカッコの位置をあらかじめ変な状態にして実行すると補正されていることが分かります。

$ npx eslint --fix js/*.ts

蛇足

私の環境では「warning Unexpected console statement no-console」という警告が出ました。リリース前には console を消しておこうぜという警告です。もし、この警告が不要であれ rules: に 'no-console': 'off', を追記すると良いそうです。必要に応じてググって解決していくと良いと思います。

package.json の "scripts": に "lint": eslint --fix js/*.ts のように登録しておくと、以降は npm run lint コマンドや、 VSCode の左下の 「NPM SCRIPTS」 から実行できるようになります。

Prettier の導入

コードを補正してくれるツールである Prettier を導入します。

インストール方法ですが、正直、変化のスピードが早すぎるので都度最新の情報を収集した方が良いんだろうなとは思ってます。今のところは以下でいいかと思ってます。

$ npm install ---save-dev prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.js に以下を追加します。

module.exports = {
    // 中略
    "extends": [
        "airbnb-base",
        "plugin:prettier/recommended", // <=ADD
        "prettier/@typescript-eslint" // <=ADD
    ],
    // 中略
    "plugins": [
        "@typescript-eslint",
        "prettier" // <=ADD
    ],
    "rules": {
        "prettier/prettier": "error" // <=ADD
    }
};

これで eslint コマンドが実行されると Prettier も動くよう設定できました。npx eslint --fix js/*.ts （または npm run lint ）でPrettierの整形が開始されます。試しに文末にセミコロンをつけずに実行すると補完されることが分かります。

VSCode のプラグイン

いちいちコマンド実行をするのは面倒ですので、ファイルをセーブしたらすぐに補正が掛かるようにします。

VSCode を使っているなら、 eslint と Prettier の拡張機能をインストールます。 左下の積まれたダンボールみたいなアイコンからアクセスし、 eslint と prettier をそれぞれ入力してインストールをします。

次に VSCode の設定を行います。 Ctrl + , で設定を開き、 Workspace タブにして、 code action on save で検索します。GUIでそのまま設定したいところですが、ここでは「Edit in setting.json」をクリックします。すると .vscode/setting.json が生成され、このファイルが開きます。このファイルはプロジェクト内でのみ有効な VSCode の設定ファイルです。その後以下のコードを追記します。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

これで、セーブするたびにフォーマットが掛かるようになりました。毎度スクリプトを実行する必要がなくなりました。

ちなみに、 VSCode には editor.formatOnSave という設定もあります。こちらは eslint が対応していません。ですので、今回のように自力で json を記述必要があるのだそうです。