We Are JavaScripters! @34th の登壇資料です
ESLintで始めるTypeScriptの静的解析
View Slide
Name 甲斐田 亮一Twitter @camcam_lemonCompany 日本事務器株式会社Skills TypeScript, React / FigmaOccupation フロントエンドエンジニア/デザイナー
今回はなすこと- React(TypeScript)ベースのESLintの設定手順- prettier , VSCodeとの連携
今回はなさないこと- TSLintについて- おすすめルールやルールの解説
Installyarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-pluginFirst Step ・・・ TypeScriptを解析するために必要なもの
Installyarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-pluginyarn add -D prettier eslint-config-prettier eslint-plugin-prettierFirst Step ・・・ TypeScriptを解析するために必要なものSecond Step ・・・ ESLintにprettierを組み込むために必要なもの
Installyarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-pluginyarn add -D prettier eslint-config-prettier eslint-plugin-prettierFirst Step ・・・ TypeScriptを解析するために必要なものSecond Step ・・・ ESLintにprettierを組み込むために必要なものyarn add -D eslint-plugin-reactThird Step ・・・ Reactを解析するために必要なもの
Optional Installyarn add -D eslint-config-airbnb eslint-pligin-import eslint-plugin-jsx-a11yyarn add -D eslint-plugin-react-hooksOptional Step2 ・・・ react-hooksの推奨ルールOptional Step1 ・・・ きびしめのairbnbルールお好みのルールを追加
configファイルの設定
configファイルの設定- prettier/reacteslint-plugin-reactとコンフリクトを起こしてるルールのオフを行う(この設定ファイルではairbnbの中で設定されてるルールがオフになる)- prettier/@typescript-eslint@typescript-eslintとコンフリクトを起こしてるルールのオフを行う- plugin:prettier/recommendedeslint-plugin-prettierの有効化とprettierのルールをESLintでも設定可能にする- plugin:@typescript-eslint/recommended@typescript-eslintの推奨ルール本家ESLintで動かない一部ルールのオフもこの中で行われている
configファイルの設定- projecttsconfig.jsonのパスを指定するtype情報のルールを使う場合はこのオプションの設定は必須[email protected]以上だとパフォーマンスが極端に悪化する問題がある(2019/7/22時点)-tsconfigRootDirprojectで指定したtsconfigの相対パスを指定する
configファイルの設定デフォルトだとTypeScriptのファイル拡張子(ts,tsx)を認識しないのでsettingsで追加を忘れないようにimport系のルールも同様にts,tsxもリンティング対象に設定を
VSCodeの設定cmd + s で整形するようにしたい場合editor.fomatOnSave: trueと設定するとJavaScriptTypeScript両方のフォーマットコマンドが実行されてしまうのを防ぐために個別で設定を行う
prettier-vscodeのバグVSCode上でprettierがうまく動かないことがある[email protected]を使ってるとeslint-config-hogeやeslint-plugin-hogeを読み込めずに整形がかからなくなる- yarn.lock(package-lock.json)を消してyarn install- ([email protected]系を使ってる場合)[email protected]系にダウングレード- [email protected]系にダウングレード機種によって原因が変わるので、色々試すしかない...
prettierが動かずハマったらがんばろう
追記:2019/07/23
ESLintで全て解決(eslint-vscode)できるようになっているのでそもそもprettier-vscodeは必要ありませんでした。うまく動かない場合は、prettier-vscodeをdisabledにしてみてください!eslint-plugin-prettiereslintにprettierのルールを使えるようにして、リンティングエラーとして出力できるようにする
ご静聴ありがとうございました!