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
1.9k
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
71
視え方と文字の大きさ
lemon
1
310
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
220
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.6k
UI/UXデザイナーがデザインしてるもの
lemon
2
300
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
880
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.4k
React.lazyとSuspenseで行うLazy Load
lemon
2
380
なんとなくで書かないReact/ReduxのテストTips
lemon
0
310
Other Decks in Programming
See All in Programming
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
240
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
3
500
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
120
Git Lint
bkuhlmann
4
740
Site Reliability Engineering for GMO
pyama86
6
960
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
"config" ってなんだ? / What is "config"?
okashoi
0
220
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
3.6k
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
22
15k
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
2
260
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Writing Fast Ruby
sferik
620
60k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Building Applications with DynamoDB
mza
88
5.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Agile that works and the tools we love
rasmusluckow
324
20k
Practical Orchestrator
shlominoach
181
9.7k
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のルールを使える ようにして、リンティングエラーとし て出力できるようにする
ご静聴ありがとうございました!