ESLintで始めるTypeScriptの静的解析

We Are JavaScripters! @34th の登壇資料です

Transcript

1. ESLintで始めるTypeScriptの 静的解析
2. Name 甲斐田 亮一 Twitter @camcam_lemon Company 日本事務器株式会社 Skills TypeScript, React / Figma Occupation フロントエンドエンジニア/デザイナー
3. 今回はなすこと - React（TypeScript）ベースのESLintの設定手順 - prettier , VSCodeとの連携
4. 今回はなさないこと - TSLintについて - おすすめルールやルールの解説
5. Install yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin First Step ・・・ TypeScriptを解析するために必要なもの
6. 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を組み込むために必要なもの
7. 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を解析するために必要なもの
8. 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ルール お好みのルールを追加
9. configファイルの設定
10. 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で動かない一部ルールのオフも この中で行われている
11. configファイルの設定 - project tsconfig.jsonのパスを指定する type情報のルールを使う場合はこのオプション の設定は必須 TypeScript@3.4以上だとパフォーマンスが極 端に悪化する問題がある（2019/7/22時点） -tsconfigRootDir projectで指定したtsconfigの相対パスを 指定する
12. configファイルの設定 デフォルトだとTypeScriptのファイル 拡張子（ts,tsx）を認識しないので settingsで追加を忘れないように import系のルールも同様にts,tsxも リンティング対象に設定を
13. VSCodeの設定 cmd + s で整形するようにしたい場合 editor.fomatOnSave: true と設定するとJavaScriptTypeScript両方 のフォーマットコマンドが実行されてしまう のを防ぐために個別で設定を行う
14. 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系にダウングレード 機種によって原因が変わるので、色々試すしかない...
15. prettierが動かずハマったらがんばろう
16. 追記：2019/07/23
18. ESLintで全て解決（eslint-vscode）できるように なっているのでそもそもprettier-vscodeは必要あり ませんでした。 うまく動かない場合は、prettier-vscodeを disabledにしてみてください！ eslint-plugin-prettier eslintにprettierのルールを使える ようにして、リンティングエラーとし て出力できるようにする
19. ご静聴ありがとうございました！