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
iOSのキーボード入力ビューをカスタマイズする
lemon
0
140
視え方と文字の大きさ
lemon
1
340
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
240
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.7k
UI/UXデザイナーがデザインしてるもの
lemon
2
310
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
910
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.4k
React.lazyとSuspenseで行うLazy Load
lemon
2
430
なんとなくで書かないReact/ReduxのテストTips
lemon
0
330
Other Decks in Programming
See All in Programming
ドメイン駆動設計を実践するために必要なもの
bikisuke
3
290
これからの時代の新標準!SwiftTestingへの移行とトラブルシューティング
uetyo
0
440
Scala におけるコンパイラエラーとの付き合い方
chencmd
1
150
Uncharted packages (Laravel Live Denmark)
freekmurze
0
140
Ruby Parser progress report 2024
yui_knk
2
180
最高の構文木の設計 2024年版
yui_knk
7
2.4k
詳解UIWindow
natmark
3
2k
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
180
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
940
楽しく簡単に!QRコードの読み取り機能を実装しよう
penguinsan_pg
1
190
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
0
220
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
610
Featured
See All Featured
Web development in the modern age
philhawksworth
204
10k
Building Your Own Lightsaber
phodgson
101
5.9k
How to name files
jennybc
75
97k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Designing for humans not robots
tammielis
248
25k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Code Reviewing Like a Champion
maltzj
518
39k
Web Components: a chance to create the future
zenorocha
308
41k
Scaling GitHub
holman
458
140k
Infographics Made Easy
chrislema
239
18k
Optimising Largest Contentful Paint
csswizardry
28
2.7k
It's Worth the Effort
3n
182
27k
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のルールを使える ようにして、リンティングエラーとし て出力できるようにする
ご静聴ありがとうございました!