名古屋フロントエンドユーザーグループ TypeScript勉強会 での発表です。 https://nfug.connpass.com/event/123497/
Lintでレビューをラクにしよう@exoego 2019-4-3TypeScript勉強会 #nfug
View Slide
twitter: @exoego長野県の田舎でリモートワークフロントエンドもバックエンドもプロダクトマネージメントもOSSもやるマンコミュニティVue i18nJapan AWS User Group名古屋支部名古屋Java User Group
TypeScriptの型検査便利!
という話は誰かがしてくれるはずなので違う「検査」を紹介
Lint 使ってますか?全員使ってたらLT終了
本日のお話1. Lint の紹介2. Lint があってよかった実体験3. TypeScript で Lint
1. Lint の紹介
重要だけど退屈なレビューに時間をかけてませんか?コーディングスタイルに従ってる?未使用コードが残ってる?古い書き方しちゃってる?
重要だけど退屈なレビューに時間をかけてませんか?コーディングスタイルに従ってる?未使用コードが残ってる?古い書き方しちゃってる?こういうレビューを自動でやってくれるのが Lint(er)
要するに Lint(またはLinter)とはプログラミングの支援ツール。ソースコードを分析し、様々な問題を検査してくれる検査は Warning(無視してよい)にもできるし、Error 扱いにして見逃さず修正にしてもよい最近の Lint は、自動修正までやってくれるよくある修正は Lint に任せて工数節約してコード品質アップ
色々な言語で使える LintJavaScript: ESLintTypeScript: ESLint, TSLintCSS/altCSS: StylelintHTML: htmllint, tidyMarkdown: markdownlintRuby: RuboCopPHP: phplint, PHP_CodeSnifferPython: Pylint, PycodestyleJava: Checkstyle, SpotBugsScala: Scalafix
ESLint/TSLint で見つけられる問題の例ESLint: no-await-in-loop ルールループ内の非効率かもしれない await を発見。非同期処理のレビューがラクにESLint: no-cond-assign ルールif (foo.bar = ‘message’”) を発見。たまにやらかす…TSLint: no-unsafe-any ルールany型での雑なメンバーアクセス、ダメ絶対。ちゃんとキャストかジェネリクス使って!!
様々な OSS が Pull Req に自動 Lintしてレビューコストを下げてる→OSSメンテ続けやすくする仕組みVue i18nみんなも自動 Lint でレビューをラクに!
2. Lint があってよかった実体験
とある OSS に ESLint 導入→バグ発見rules: function (field, rules) {if (Array.isArray(field)) {$.each(fields, function (index, field) {module.remove.rule(field, rules);});} else {module.remove.rule(field, rules);}数年物のバグ、あなたはレビューで見つけられますか?テストがないのが問題だけど
3. TypeScript で Lint
導入デモTypeScriptの著名レポジトリに Lint 導入して、見つけた問題を修正 Pull Req してみた…をやろうとしたら、著名レポジトリではあらかた導入済みだった!著名レポジトリを参考にしよう!
TSLint派angular/angularMicrosoft/vscodenestjs/nestcodercom/code-servergrafana/grafanaESLint派denoland/deno
現在 TypeScript では TSLint がメジャーが、Microsoft は ESLint を推してく らしい
ESLint/TSLint 設定多すぎて迷う?デファクトの設定に従うのがオススメJavaScript Standard Styleベースhttps://www.npmjs.com/package/eslint-config-standardhttps://www.npmjs.com/package/tslint-config-standard著名企業が公開した設定も広く使われてますhttps://www.npmjs.com/package/eslint-config-airbnbhttps://www.npmjs.com/package/eslint-config-googlehttps://www.npmjs.com/package/tslint-microsoft-contrib
まとめ退屈なレビューは Lint に任せて、本質的なレビューに集中しよう!TypeScript では TSLint がデファクトだけどJS にも対応した ESLint もいいよ!Lint の設定は、よく練られたデファクトに乗っかるとラクだよ!