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

ESLintで始めるTypeScriptの静的解析

 ESLintで始めるTypeScriptの静的解析

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

camcam_lemon

July 22, 2019
Tweet

More Decks by camcam_lemon

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  9. configファイルの設定

    View full-size 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 full-size slide

  11. configファイルの設定
    - project
    tsconfig.jsonのパスを指定する

    type情報のルールを使う場合はこのオプション
    の設定は必須

    [email protected]以上だとパフォーマンスが極
    端に悪化する問題がある(2019/7/22時点)
    -tsconfigRootDir
    projectで指定したtsconfigの相対パスを
    指定する

    View full-size slide

  12. configファイルの設定
    デフォルトだとTypeScriptのファイル
    拡張子(ts,tsx)を認識しないので

    settingsで追加を忘れないように


    import系のルールも同様にts,tsxも

    リンティング対象に設定を

    View full-size slide

  13. VSCodeの設定
    cmd + s で整形するようにしたい場合

    editor.fomatOnSave: true

    と設定するとJavaScriptTypeScript両方
    のフォーマットコマンドが実行されてしまう
    のを防ぐために個別で設定を行う

    View full-size 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 full-size slide

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

    View full-size slide

  16. 追記:2019/07/23

    View full-size slide

  17. ESLintで全て解決(eslint-vscode)できるように
    なっているのでそもそもprettier-vscodeは必要あり
    ませんでした。

    うまく動かない場合は、prettier-vscodeを
    disabledにしてみてください!
    eslint-plugin-prettier
    eslintにprettierのルールを使える
    ようにして、リンティングエラーとし
    て出力できるようにする

    View full-size slide

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

    View full-size slide