🙆‍♀️

はじめてのTypeScript とりあえず環境構築〜 VSCodeでESLint & 自動整形

2021/11/11に公開

TypeScript

VS Code

tech

記事の目的

VSCode, node.js, npmなどを使ったJavaScriptでの開発経験があり、TypeScriptをこれから始めたい方向けの、とりあえずテスト環境を作るのを目的としています。

プロジェクトの作成 ~ package.json作成

任意のプロジェクトフォルダを作成し、フォルダ内にpackage.jsonを作成します。

$ mkdir my-project; cd my-project;
$ yarn init -y

TypeScriptのインストール

TypeScriptのトランスパイラ（tsc コマンド）とNode.jsの型定義ファイルをインストールします。

$ yarn add -D typescript @types/node

tsconfig.json作成・編集

TypeScriptのビルド設定ファイルを作成します。

$ npx tsc --init

tsconfig.jsonの詳細については割愛しますが、ひとまずこの辺だけ編集しておきます。
コメントを外すなり追記するなりして編集してください。

compilerOptions.outDir : ビルドフォルダ
include : ソースファイル

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
  },
  "include": ["./src/**/*"]
}

テスト用tsファイル作成

srcフォルダにテスト用のmain.tsを作っておきます。

$ mkdir src; touch src/main.ts

中にTypeScriptっぽいなにかを書いておきます。

src/main.ts

function greet(name: string, age: number): string {
  return `名前は${name}、年齢は${age}歳です。`;
}

console.log(greet('伊代', 16));

npm scriptsタスクを作成

コマンドでTypeScriptのwatchやbuildができるようにします。

package.json

{
  ...略
  "scripts": {
    "build": "tsc",
    "watch": "tsc --watch",
    "start": "node dist/main.js"
  },
  ...略
}

$ yarn build

でビルドし、コンパイルされた dist/main.js が生成されていればOKです。変更を監視してビルドするには yarn watch で。

dist/main.js

"use strict";
function greet(name, age) {
    return "\u540D\u524D\u306F" + name + "\u3001\u5E74\u9F62\u306F" + age + "\u6B73\u3067\u3059\u3002";
}
console.log(greet('伊代', 16));

VSCodeでESLintと自動整形を設定する

ESLintのインストール ~ .eslintrc.js作成

eslintを使えるように初期化します。

$ npx eslint --init

ターミナルに質問が出てくるので答えていきます。ご自身の環境に合うように十字キーで変更してください。以下はサンプルです。

How would you like to use ESLint?

To check syntax, find problems, and enforce code style

What type of modules does your project use?

JavaScript modules (import/export)

Which framework does your project use?

None of these

Does your project use TypeScript?

Yes
↑必ずYesを選んでください

Where does your code run?

Browser

How would you like to define a style for your project?

Use a popular style guide

Which style guide do you want to follow?

Airbnb: https://github.com/airbnb/javascript

What format do you want your config file to be in?

JavaScript

Would you like to install them now with npm?

Yes

これで、プロジェクトフォルダに.eslintrc.jsが作成されます。

VSCodeのESLint設定

VSCodeのESLintプラグインをインストールします。

VSCodeのsetting.jsonを開いて以下を追加します。

{
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true, // eslintでリント
    },
  },
  "eslint.format.enable": true, // ←なくてもいいかも？
}

これでmain.tsで遊んでみて、Lintや自動整形が動けば完了です。