Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ESLintで始めるTypeScriptの静的解析
camcam_lemon
July 22, 2019
Programming
8
1.5k
ESLintで始めるTypeScriptの静的解析
We Are JavaScripters! @34th の登壇資料です
camcam_lemon
July 22, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
77
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
9
4k
UI/UXデザイナーがデザインしてるもの
lemon
2
290
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
820
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.1k
React.lazyとSuspenseで行うLazy Load
lemon
2
320
なんとなくで書かないReact/ReduxのテストTips
lemon
0
240
bundleサイズ2MBの社内サイト大改修譚.pdf
lemon
0
200
反復処理に速さを求めて
lemon
1
130
Other Decks in Programming
See All in Programming
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
530
kintoneでランダム取得を作ってみた(imoniCamp 2022-07-27)
shokun1108
0
130
読みやすいコード クラスメソッド 2022 年度新卒研修
januswel
0
2.9k
僕が便利だと感じる Snow Monkey の特徴/20220723_Gifu_WordPress_Meetup
oleindesign
0
100
クックパッドマートの失敗したデータ設計 Before / After 大放出
mokuzon
20
25k
Isar勉強会
hoddy3190
0
300
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
320
10歳の minne から、これから長く続くプロダクトを作るすべての人へ
tsumichan
9
3.6k
このタイミングで知っておきたい 開発生産性の高いエンジニア組織の特徴とは / dev-sumi-20220721-productivity-features
findyinc
7
2.6k
閱讀原始碼 - 再戰十年的 jQuery
eddie
1
280
アジャイルで不確実性に向き合うための開発タスクの切り方
tanden
4
1.1k
Pythonによる開発をアップデートするライブラリの紹介
daikikatsuragawa
1
320
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
316
19k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Building an army of robots
kneath
299
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
21
1.4k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
Intergalactic Javascript Robots from Outer Space
tanoku
260
25k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
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情報のルールを使う場合はこのオプション の設定は必須 TypeScript@3.4以上だとパフォーマンスが極 端に悪化する問題がある(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のルールを使える ようにして、リンティングエラーとし て出力できるようにする
ご静聴ありがとうございました!