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
230
フロントエンドにおけるアーキテクチャとの向き合い方
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
Appleの新しいプライバシー要件対応: ノーコードアプリ プラットフォームの実践事例
nao_randd
1
440
1人で挑むSwiftコンパイラ 〜型システム入門編〜
s_shimotori
0
310
初めてのiOS関連GitHub ActionsをMarketplaceに公開するまでの実録
konifar
3
200
iOSDC 2024 SMBファイル共有をSwiftで実装する
kishikawakatsumi
1
100
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
daichi_igarashi
0
220
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
390
どうしてこうなった?から理解するActive Recordの関連の裏側
willnet
5
510
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
0
220
BQ+dbt+Lookerを用いた、月間800億件以上の広告リクエストに対するデータモデリング
hanon52_
4
990
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
170
ゲームボーイアドバンスでSwiftを動かそう
k_koheyi
0
500
iOSの隠されたAPIを解明し、開発効率を向上させる方法/iOSDC24
noppefoxwolf
2
120
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
The Invisible Side of Design
smashingmag
295
50k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Automating Front-end Workflow
addyosmani
1365
200k
A Tale of Four Properties
chriscoyier
155
22k
The Cult of Friendly URLs
andyhume
76
5.9k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Practical Orchestrator
shlominoach
185
10k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Fireside Chat
paigeccino
31
2.9k
How GitHub (no longer) Works
holman
309
140k
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のルールを使える ようにして、リンティングエラーとし て出力できるようにする
ご静聴ありがとうございました!