Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ESLintで始めるTypeScriptの静的解析

 ESLintで始めるTypeScriptの静的解析

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

A3ec73809a2105b3a9a829f983f6587e?s=128

camcam_lemon

July 22, 2019
Tweet

More Decks by camcam_lemon

Other Decks in Programming

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

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

  19. ご静聴ありがとうございました!