TypeScript + ESLint + Prettier 環境構築

この先の人生で100回くらいやりそうなので備忘録的にドキュメントに起こしておきます。

TypeScriptが動く環境を作る

Node上でTSを動かすために、ts-nodeとtypescriptの2つのモジュールをインストールします。

$ mkdir example && cd example
$ git init
$ yarn init
$ yarn add ts-node typescript
$ ./node_modules/.bin/tsc --init # tsconfig.jsonを生成する
$ vim index.ts

ここまでで最低限のTS環境が揃いました。
実際にコードを動かしてみましょう。

// index.ts
console.log('Hello world!')

$ ts-node index.ts
# > Hello world!
# > ✨  Done in 0.89s.

毎回 ts-node index.ts と打つのは面倒なので次のようにyarn scriptにしておきましょう。

  "scripts": {
    "start": "ts-node index.ts",
  },

$ yarn start
# $ ts-node app.ts
# > Hello world!
# > ✨  Done in 0.89s.

ESLint + Prettier でコードをフォーマットする

ESLint

$ yarn add -D eslint

次にconfigファイルを作成します。

$ npx eslint --init

私は以下のように設定しました。
ここは多少間違えても後からeslintrcの設定を変更するだけなので大きな問題ではありません。

Ok to proceed? (y) 
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2 @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · yarn

Prettier

$ yarn add -D prettier eslint-config-prettier

先ほど作成した .eslintrc.js を開き、 extends に prettier を追加します。

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
    'prettier', // extendsの最後に記述する
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    '@typescript-eslint',
  ],
  rules: {
  },
};

VSCode

次の2つの拡張をインストールしてください。

• ESLint Extension
• Prettier Extension

次にVSCodeでフォーマットが効くようにします。

mkdir .vscode
touch .vscode/settings.json

// settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

index.tsでセミコロンを消して保存しようとするとフォーマットされたら成功です。