Slide 1

Slide 1 text

ESLintで始めるTypeScriptの 静的解析

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

configファイルの設定

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

追記:2019/07/23

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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