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

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

Transcript

1. Lintでレビューをラクにしよう
   @exoego 2019-4-3
   TypeScript勉強会 #nfug
   

   View Slide

2. twitter: @exoego
   長野県の田舎でリモートワーク
   フロントエンドもバックエンドもプロダクトマネージメントもOSSもやるマン
   コミュニティ
   Vue i18n
   Japan AWS User Group
   名古屋支部
   名古屋
   Java User Group
   

   View Slide

3. TypeScriptの型検査
   便利！
   

   View Slide

4. という話は誰かがして
   くれるはずなので
   違う「検査」を紹介
   

   View Slide

5. Lint 使ってますか？
   全員使ってたらLT終了
   

   View Slide

6. 本日のお話
   1. Lint の紹介
   2. Lint があってよかった実体験
   3. TypeScript で Lint
   

   View Slide

7. 1. Lint の紹介
   

   View Slide

8. 重要だけど退屈なレビューに
   時間をかけてませんか？
   コーディングスタイルに従ってる？
   未使用コードが残ってる？
   古い書き方しちゃってる？
   

   View Slide

9. 重要だけど退屈なレビューに
   時間をかけてませんか？
   コーディングスタイルに従ってる？
   未使用コードが残ってる？
   古い書き方しちゃってる？
   こういうレビューを自動で
   やってくれるのが Lint(er)
   

   View Slide

10. 要するに Lint（またはLinter）
    とは
    プログラミングの支援ツール。ソースコードを分析し、
    様々な問題を検査してくれる
    検査は Warning（無視してよい）にもできるし、Error 扱
    いにして見逃さず修正にしてもよい
    最近の Lint は、自動修正までやってくれる
    よくある修正は Lint に任せて
    工数節約してコード品質アップ
    

    View Slide

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
    

    View Slide

12. ESLint/TSLint で
    見つけられる問題の例
    ESLint: no-await-in-loop ルール
    ループ内の非効率かもしれない await を発見。非同期処理のレビューがラクに
    ESLint: no-cond-assign ルール
    if (foo.bar = ‘message’”) を発見。たまにやらかす…
    TSLint: no-unsafe-any ルール
    any型での雑なメンバーアクセス、ダメ絶対。ちゃんとキャストかジェネリクス使って!!
    

    View Slide

13. 様々な OSS が Pull Req に自動 Lint
    してレビューコストを下げてる
    →OSSメンテ続けやすくする仕組み
    Vue i18n
    みんなも自動 Lint でレビューをラクに!
    

    View Slide

14. 2. Lint があって
    よかった実体験
    

    View Slide

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);
    }
    数年物のバグ、あなたはレビューで見つけられますか？
    テストがないのが問題だけど
    

    View Slide

16. 3. TypeScript で Lint
    

    View Slide

17. 導入デモ
    TypeScriptの著名レポジトリに Lint 導入して、
    見つけた問題を修正 Pull Req してみた
    …をやろうとしたら、著名レポジトリでは
    あらかた導入済みだった！
    著名レポジトリを参考にしよう！
    

    View Slide

18. TSLint派
    angular/angular
    Microsoft/vscode
    nestjs/nest
    codercom/code-server
    grafana/grafana
    ESLint派
    denoland/deno
    

    View Slide

19. 現在 TypeScript では TSLint がメジャー
    が、Microsoft は ESLint を推してく らしい
    

    View Slide

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
    

    View Slide

21. まとめ
    退屈なレビューは Lint に任せて、本質的な
    レビューに集中しよう！
    TypeScript では TSLint がデファクトだけど
    JS にも対応した ESLint もいいよ！
    Lint の設定は、よく練られたデファクトに
    乗っかるとラクだよ！
    

    View Slide