ESLintで始めるTypeScriptの静的解析

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

Transcript

1. ESLintで始めるTypeScriptの
   静的解析
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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を組み込むために必要なもの
   

   View Slide

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を解析するために必要なもの
   

   View Slide

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ルール
   お好みのルールを追加
   

   View Slide

9. configファイルの設定
   

   View Slide

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で動かない一部ルールのオフも
    この中で行われている
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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系にダウングレード
    機種によって原因が変わるので、色々試すしかない...
    

    View Slide

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

    View Slide

16. 追記：2019/07/23
    

    View Slide

17. View Slide

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

    View Slide

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

    View Slide