eslintでtypescript
関西Node学園 6時限目
sayanaka
sayanaka
JS 3年くらい、Angular & TS 2年くらい
最近はAngular, React, Goとかいろいろ
ng-kyoto代表
去年ぐらいから
Twitter
@zilch8
https://gyazo.com/35751415a55f251318193442655dd412
eslintとは
みなさんご存知、JavaScriptのlinter
「"使わないで!」 「お尻;いらないよ!」とか、怒ってくれる
(単体では)TypeScriptに非対応
tslintとは
TypeScriptのlinter
TS界では、長らくeslintの代わりに使われてきた
tslint.jsonが設定ファイル
https://gyazo.com/2358ff1a43074ace453f52ee77e12432
ある日・・・
https://gyazo.com/794df8258c0f148b651d2a0f4565e37d
というわけでやってみよう
tslintを使ったプロジェクトを作成して、(あとから)eslintで動くようにしてみる
mkdir example-eslint
cd example-eslint
npm init -f
npm install typescript tslint -D
tslint --init
デフォルトのtslint.jsonの作成
というわけでやってみよう
src/index.tsを作って、怒られそうなコードを書いて・・・
var aiueo: string = 'a';
tslint実行!
https://gyazo.com/8dfe4a0320d7dc888276e6cdf2ff6bba
無事にエラーが出たので、eslintでも🔼と同等のエラーが発生するようにしてみる
eslintに移行してみよう
eslintの導入
npm install eslint -D
eslint --init
デフォルトのeslintrcを生成
src/index.tsに向けて、eslint実行!
https://gyazo.com/8836f15e1b9c2f6dbdee02e1b709e93a
現状ではTSを読めないので、パーサーエラー
eslintに移行してみよう
eslintを、TSに対応させる
npm install @typescript-eslint/eslint-plugin -D
eslintrcに、parser: '@typescript-eslint/parser'を追記
src/index.tsに向けて、eslint再実行!
https://gyazo.com/9aa8d4a4b7dd80e238b841c71c6b8eb1
eslintがTSを解釈できるようになったので、lintエラーが発生!! やったぜ!
eslintに移行してみよう
tslintにはあったルールが不足してるっぽい・・・
tslintのルール => eslintのルールへ
https://gyazo.com/fe50c5371b2479fe422518884985bda9
😇
eslintルールへの置き換え
頼れるのは己のみ💪
にらめっこして頑張って書き換える!💪💪💪
https://gyazo.com/72592d2bbb1ec4e5a4b899daf2f0a715
https://gyazo.com/5e294a3f689db9b7f581cde24542e47c
や っ た ぜ
所感
TSでeslintが動くようにするのはめっちゃ簡単
ルールの置き換えが(現状は)大変・・・
既存プロジェクトで置き換えようと思うとつらみがあるかも・・・
eslintだと(まだ)処理が重い?という話も
近い将来に期待!
ご静聴ありがとうございました
さいごに少しだけ・・・
宣伝!
https://gyazo.com/1162163b7a5a77dbc82dc58e1b7a932b
5/29(水) 19:30 ~ @サイボウズ大阪オフィス
ng-kyoto & ng-japan 合同meetupやります!
オーサカとトーキョーをリアルタイムで繋ぎます!
宣伝!!
https://gyazo.com/e1b32171961e0063b8f73b7c7f74c556
LT枠・・・あいてます!!
よろしければぜひ!
ご静聴ありがとうございました!
今度こそ本当に終わりです!