$30 off During Our Annual Pro Sale. View Details »

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

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

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

TATSUNO Yasuhiro

April 03, 2019
Tweet

More Decks by TATSUNO Yasuhiro

Other Decks in Programming

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