Lintでレビューをラクにしよう/ Easing Code Review with Lint for TypeScript

名古屋フロントエンドユーザーグループ TypeScript勉強会 での発表です。
https://nfug.connpass.com/event/123497/

Transcript

1. Lintでレビューをラクにしよう @exoego 2019-4-3 TypeScript勉強会 #nfug
2. twitter: @exoego 長野県の田舎でリモートワーク フロントエンドもバックエンドもプロダクトマネージメントもOSSもやるマン コミュニティ Vue i18n Japan AWS User Group 名古屋支部 名古屋 Java User Group
3. TypeScriptの型検査 便利！
4. という話は誰かがして くれるはずなので 違う「検査」を紹介
5. Lint 使ってますか？ 全員使ってたらLT終了
6. 本日のお話 1. Lint の紹介 2. Lint があってよかった実体験 3. TypeScript で Lint
7. 1. Lint の紹介
8. 重要だけど退屈なレビューに 時間をかけてませんか？ コーディングスタイルに従ってる？ 未使用コードが残ってる？ 古い書き方しちゃってる？
9. 重要だけど退屈なレビューに 時間をかけてませんか？ コーディングスタイルに従ってる？ 未使用コードが残ってる？ 古い書き方しちゃってる？ こういうレビューを自動で やってくれるのが Lint(er)
10. 要するに Lint（またはLinter） とは プログラミングの支援ツール。ソースコードを分析し、 様々な問題を検査してくれる 検査は Warning（無視してよい）にもできるし、Error 扱 いにして見逃さず修正にしてもよい 最近の Lint は、自動修正までやってくれる よくある修正は Lint に任せて 工数節約してコード品質アップ
11. 色々な言語で使える Lint JavaScript: ESLint TypeScript: ESLint, TSLint CSS/altCSS: Stylelint HTML: htmllint, tidy Markdown: markdownlint Ruby: RuboCop PHP: phplint, PHP_CodeSniffer Python: Pylint, Pycodestyle Java: Checkstyle, SpotBugs Scala: Scalafix
12. ESLint/TSLint で 見つけられる問題の例 ESLint: no-await-in-loop ルール ループ内の非効率かもしれない await を発見。非同期処理のレビューがラクに ESLint: no-cond-assign ルール if (foo.bar = ‘message’”) を発見。たまにやらかす… TSLint: no-unsafe-any ルール any型での雑なメンバーアクセス、ダメ絶対。ちゃんとキャストかジェネリクス使って!!
13. 様々な OSS が Pull Req に自動 Lint してレビューコストを下げてる →OSSメンテ続けやすくする仕組み Vue i18n みんなも自動 Lint でレビューをラクに!
14. 2. Lint があって よかった実体験
15. とある 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); } 数年物のバグ、あなたはレビューで見つけられますか？ テストがないのが問題だけど
16. 3. TypeScript で Lint
17. 導入デモ TypeScriptの著名レポジトリに Lint 導入して、 見つけた問題を修正 Pull Req してみた …をやろうとしたら、著名レポジトリでは あらかた導入済みだった！ 著名レポジトリを参考にしよう！
18. TSLint派 angular/angular Microsoft/vscode nestjs/nest codercom/code-server grafana/grafana ESLint派 denoland/deno
19. 現在 TypeScript では TSLint がメジャー が、Microsoft は ESLint を推してく らしい
20. ESLint/TSLint 設定多すぎて迷う？ デファクトの設定に従うのがオススメ JavaScript Standard Styleベース https://www.npmjs.com/package/eslint-config-standard https://www.npmjs.com/package/tslint-config-standard 著名企業が公開した設定も広く使われてます https://www.npmjs.com/package/eslint-config-airbnb https://www.npmjs.com/package/eslint-config-google https://www.npmjs.com/package/tslint-microsoft-contrib
21. まとめ 退屈なレビューは Lint に任せて、本質的な レビューに集中しよう！ TypeScript では TSLint がデファクトだけど JS にも対応した ESLint もいいよ！ Lint の設定は、よく練られたデファクトに 乗っかるとラクだよ！