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
2.1k
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
53
要素のサイズを変えずに押しやすくする
lemon
0
74
iOSのキーボード入力ビューをカスタマイズする
lemon
0
250
視え方と文字の大きさ
lemon
1
400
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
290
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.9k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
990
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
Other Decks in Programming
See All in Programming
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
コンテキストエンジニアリング Cursor編
kinopeee
1
710
MLH State of the League: 2026 Season
theycallmeswift
0
160
State of CSS 2025
benjaminkott
1
120
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
TDD 実践ミニトーク
contour_gara
0
150
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
910
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
AIでLINEスタンプを作ってみた
eycjur
1
200
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
Scaling GitHub
holman
462
140k
Navigating Team Friction
lara
189
15k
Making Projects Easy
brettharned
117
6.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
A designer walks into a library…
pauljervisheath
207
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
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のルールを使える ようにして、リンティングエラーとし て出力できるようにする
ご静聴ありがとうございました!