Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ESLintで始めるTypeScriptの静的解析
Search
camcam_lemon
July 22, 2019
Programming
8
2k
ESLintで始めるTypeScriptの静的解析
We Are JavaScripters! @34th の登壇資料です
camcam_lemon
July 22, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
要素のサイズを変えずに押しやすくする
lemon
0
39
iOSのキーボード入力ビューをカスタマイズする
lemon
0
190
視え方と文字の大きさ
lemon
1
370
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
260
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.8k
UI/UXデザイナーがデザインしてるもの
lemon
2
310
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
940
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
React.lazyとSuspenseで行うLazy Load
lemon
2
470
Other Decks in Programming
See All in Programming
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
AHC041解説
terryu16
0
590
GAEログのコスト削減
mot_techtalk
0
110
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
チームリードになって変わったこと
isaka1022
0
190
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
時計仕掛けのCompose
mkeeda
1
280
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
Facilitating Awesome Meetings
lara
51
6.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Writing Fast Ruby
sferik
628
61k
Embracing the Ebb and Flow
colly
84
4.6k
How to Ace a Technical Interview
jacobian
276
23k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
It's Worth the Effort
3n
184
28k
We Have a Design System, Now What?
morganepeng
51
7.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Speed Design
sergeychernyshev
25
780
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Transcript
ESLintで始めるTypeScriptの 静的解析
Name 甲斐田 亮一 Twitter @camcam_lemon Company 日本事務器株式会社 Skills TypeScript, React
/ Figma Occupation フロントエンドエンジニア/デザイナー
今回はなすこと - React(TypeScript)ベースのESLintの設定手順 - prettier , VSCodeとの連携
今回はなさないこと - TSLintについて - おすすめルールやルールの解説
Install yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin First Step ・・・
TypeScriptを解析するために必要なもの
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を組み込むために必要なもの
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を解析するために必要なもの
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ルール お好みのルールを追加
configファイルの設定
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で動かない一部ルールのオフも この中で行われている
configファイルの設定 - project tsconfig.jsonのパスを指定する type情報のルールを使う場合はこのオプション の設定は必須
[email protected]
以上だとパフォーマンスが極 端に悪化する問題がある(2019/7/22時点) -tsconfigRootDir projectで指定したtsconfigの相対パスを
指定する
configファイルの設定 デフォルトだとTypeScriptのファイル 拡張子(ts,tsx)を認識しないので settingsで追加を忘れないように import系のルールも同様にts,tsxも リンティング対象に設定を
VSCodeの設定 cmd + s で整形するようにしたい場合 editor.fomatOnSave: true と設定するとJavaScriptTypeScript両方 のフォーマットコマンドが実行されてしまう のを防ぐために個別で設定を行う
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系にダウングレード 機種によって原因が変わるので、色々試すしかない...
prettierが動かずハマったらがんばろう
追記:2019/07/23
None
ESLintで全て解決(eslint-vscode)できるように なっているのでそもそもprettier-vscodeは必要あり ませんでした。 うまく動かない場合は、prettier-vscodeを disabledにしてみてください! eslint-plugin-prettier eslintにprettierのルールを使える ようにして、リンティングエラーとし て出力できるようにする
ご静聴ありがとうございました!