ESLintで始めるTypeScriptの 静的解析

Name 甲斐田 亮一 Twitter @camcam_lemon Company 日本事務器株式会社 Skills TypeScript, React / Figma Occupation フロントエンドエンジニア/デザイナー

今回はなすこと - React（TypeScript）ベースのESLintの設定手順 - prettier , VSCodeとの連携

今回はなさないこと - TSLintについて - おすすめルールやルールの解説

Install yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin First Step ・・・ TypeScriptを解析するために必要なもの

Install yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin yarn add -D prettier eslint-config-prettier eslint-plugin-prettier First Step ・・・ TypeScriptを解析するために必要なもの Second Step ・・・ ESLintにprettierを組み込むために必要なもの

Install yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin yarn add -D prettier eslint-config-prettier eslint-plugin-prettier First Step ・・・ TypeScriptを解析するために必要なもの Second Step ・・・ ESLintにprettierを組み込むために必要なもの yarn add -D eslint-plugin-react Third Step ・・・ Reactを解析するために必要なもの

Optional Install yarn add -D eslint-config-airbnb eslint-pligin-import eslint-plugin-jsx-a11y yarn add -D eslint-plugin-react-hooks Optional Step2 ・・・ react-hooksの推奨ルール Optional Step1 ・・・ きびしめのairbnbルール お好みのルールを追加

configファイルの設定

configファイルの設定 - prettier/react eslint-plugin-reactとコンフリクトを起こしてる ルールのオフを行う （この設定ファイルではairbnbの中で設定 されてるルールがオフになる） - prettier/@typescript-eslint @typescript-eslintとコンフリクトを起こしてる ルールのオフを行う - plugin:prettier/recommended eslint-plugin-prettierの有効化とprettier のルールをESLintでも設定可能にする - plugin:@typescript-eslint/recommended @typescript-eslintの推奨ルール 本家ESLintで動かない一部ルールのオフも この中で行われている

configファイルの設定 - project tsconfig.jsonのパスを指定する type情報のルールを使う場合はこのオプション の設定は必須 TypeScript@3.4以上だとパフォーマンスが極 端に悪化する問題がある（2019/7/22時点） -tsconfigRootDir projectで指定したtsconfigの相対パスを 指定する

configファイルの設定 デフォルトだとTypeScriptのファイル 拡張子（ts,tsx）を認識しないので settingsで追加を忘れないように import系のルールも同様にts,tsxも リンティング対象に設定を

VSCodeの設定 cmd + s で整形するようにしたい場合 editor.fomatOnSave: true と設定するとJavaScriptTypeScript両方 のフォーマットコマンドが実行されてしまう のを防ぐために個別で設定を行う

prettier-vscodeのバグ VSCode上でprettierがうまく動かないことがある ESLint@6を使ってるとeslint-config-hogeやeslint-plugin-hogeを 読み込めずに整形がかからなくなる - yarn.lock(package-lock.json)を消してyarn install - (node@12系を使ってる場合)node@10系にダウングレード - ESLint@5系にダウングレード 機種によって原因が変わるので、色々試すしかない...

prettierが動かずハマったらがんばろう

追記：2019/07/23

No content

ESLintで全て解決（eslint-vscode）できるように なっているのでそもそもprettier-vscodeは必要あり ませんでした。 うまく動かない場合は、prettier-vscodeを disabledにしてみてください！ eslint-plugin-prettier eslintにprettierのルールを使える ようにして、リンティングエラーとし て出力できるようにする

ご静聴ありがとうございました！