🐣

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

2021/05/12に公開

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

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

見返す用リスト(主に自分用)

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

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 --inittsconfig.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.jsonscriptsに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でバージョンを上げることが出来る。
  • 何も変更がない空のコミットをしようとするとエラーで止まる。(警告文: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

GitHubで編集を提案

Discussion