TypeScript 学習記録 #2（TS / ESLint / Prettierの環境構築）

TypeScript 学習記録 #1 の続編。
今回のメインテーマ、「TypeScriptの環境構築」 & 「ESLint / Prettierの環境構築」。

今回主に参考にした教材：

• 【日本一わかりやすいTypeScript入門】tsconfigとWebpackの設定を理解して環境構築
• 【日本一わかりやすいTypeScript入門】ESLintとPrettierでコードの品質を高めよう

見返す用リスト（主に自分用）

TypeScript基礎学習を完走したので、いつでも見返すことの出来るようにリスト化しておく（5/17）

• TypeScript 学習記録 #1（学習ルート策定やTS参考教材一覧）
• TypeScript 学習記録 #2（TS / ESLint / Prettierの環境構築）
• TypeScript 学習記録 #3（基本の型定義・関数の型定義）
• TypeScript 学習記録 #4（オブジェクトと配列の型定義）
• TypeScript 学習記録 #5（ジェネリック型(ジェネリクス)）
• TypeScript 学習記録 #6（InterfaceとType Alias）
• TypeScript 学習記録 #7（非同期処理の型定義(Promise)）
• TypeScript 学習記録 #8（Reactに関わる型定義）

TypeScript環境構築

1. プロジェクト用のディレクトリを作成する
2. npm initする
   • 1.で作成したディレクトリ内でnpm initコマンドを打ち、npmの初期化をする（package.jsonの作成）。色々聞かれるが基本的に全てエンターキーで飛ばして良い
3. TS実行環境に必要なパッケージをインストールする
   • npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-serverを実行する
   • これらパッケージ1つ1つの解説は動画を参照
   • --save-devでインストールするのは、TSが主に開発段階でのみ必要となるため
4. webpack.config.jsを作成し設定を変更する
   • トラハックさんの動画解説に任せます
5. tsc --initでtsconfig.jsonを作成し設定を変更する
   • 事前にTypeScriptをグローバルインストールしておく必要がある
     • npm install -g typescriptでグローバルインストールできる
     • npmでグローバルインストールされているもののリストを表示するときはnpm -g listコマンド
   • tsconfigの詳しい設定については動画解説に任せます

ESLint & Prettier環境構築

1. ESLintやPrettierをインストールする
   • npm install --save-dev eslint eslint-config-prettier prettier @typescript-eslint/parser @typescript-eslint/eslint-pluginを実行する
   • 各パッケージの詳細については動画参照
2. Prettierの設定をする（デフォルト設定にする場合は省略可）
   • .prettierrcというPrettierの設定ファイルを作成する（拘りがなければデフォルトのままで何もしなくてOK。このファイルの作成不要）
   • JSON形式で設定を記入する
     • 因みに、.prettierrc.jsのようにJSファイルとして作成することも出来る。その場合は、module.exports = {}で始め、{}の中にJSのオブジェクトの形で同様に設定を記述することが出来る。
     • 例、module.exports = { printWidth: 100, semi: false }のような感じ
3. ESLintの設定をする
   • .eslintrc.jsというESLintの設定ファイルを作成する
   • module.exports = {}で始めて、{}の中にJSのオブジェクトの形で設定を記述する
   • 詳しい設定項目については動画参照
   • ※注意
     • ESLintのextendsに入れていた"prettier/@typescript-eslint"は、eslint-config-prettierのVersion 8.0.0 (2021-02-21)から、extends内のprettierに統合されたため書く必要がなくなっているので注意（参考）
     • Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. ~~というエラーが出る場合はこちらの記事参照（参考）
   • package.jsonのscriptsにESLint用のコマンドを設定する（やらなくても可）
     • "lint": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'"
     • Prettierの整形まで含める場合はこっち。"lint-fix": "eslint --fix './src/**/*.{js,jsx,ts,tsx}' && prettier --write './src/**/*.{js,ts}'"

husky / lint-stagedの設定など（注意点）

huskyなどを利用する時に必要な、gitの.git/hooks/pre-commitというファイルが一生できなくてハマったのでポイントを書き残しておく（入れたのはhusky@4.3.8）

• git initしてgitの初期化をしておく
• npmのバージョンを上げる。npm install -g npmでバージョンを上げることが出来る。
  • 自分はこの方法で解決した。npm@7.0.14 → npm@7.12.1
  • 参考：ぼくの husky で設定した pre-commit が動かない。。。
• 何も変更がない空のコミットをしようとするとエラーで止まる。（警告文：lint-staged prevented an empty git commit. Use the --allow-empty option to continue, or check your task configuration）

ここまでの感想

TypeScript導入の際に必要なパッケージの概要やtsconfig.jsonの設定項目についてなど、TS環境構築の基礎的なことがよく理解出来た。
加えて、前々から気になっていたESLintの環境構築や設定の仕方、特に.eslintrc.jsファイルの設定の仕方について学べたことは大きかったように思う。

トラハックさんの動画はとても分かりやすくてやっぱり有益。
一方で、個人的にはNext.jsを使って色々開発をしているところがあるので、Next.js×TSの環境構築の方法が知りたいなあとも思ったりした。これについてはまた自分で調べ直してまとめるとする。

husky と lint-staged 周りでそこそこハマった。やっぱり環境構築は大変。

続 → TypeScript 学習記録 #3