White Box技術部

WEB開発のあれこれ(と何か)

【TypeScript】DangerのTSLintプラグイン紹介と導入の補足

Rubyの方のDangerTSLintに対応させたかったので、ESLintのDangerプラグインforkをforkして、DangerのTSLintプラグインを作りました。

danger-tslintの作成経緯

最初はDanger-jsの方のTSLintプラグインを導入したのですが、Dangerでいいなぁと思っていたソースコード中へのコメント追加ができないようだったので、導入は見送って自分で作ることにしました。

せっかく自作するので、自分が必要なオプションはふんだんに盛り込んであります!(๑•̀ㅂ•́)و✧

danger-tslintでできること

README.mdに記載してあるように、以下が実施できます。

  • tslintのインストール先(実行パス)の指定
  • tslintで使用するコンフィグファイルの指定
  • tslint対象とするファイルの指定
  • tslint対象外とするファイルの指定
  • tslintを実行するTypeScriptのプロジェクトディレクトリの指定
  • tslint対象を新規ファイルと更新ファイルに絞るかどうかの指定
    • 絞った場合にtslint対象とするファイルの形式
  • tslintの実行

※オプションの詳細などはこちらも参考にしてください。

danger-tslint利用手順

まずはプロジェクトにGemfileを作成し、以下の内容を記載します。

source 'https://rubygems.org'

gem 'danger'
gem 'danger-tslint', :git => 'https://github.com/seriwb/danger-tslint.git', :branch => "master"

danger-tslintの利用は、

  1. Gitリポジトリのメインの構成がTypeScriptプロジェクトで、
  2. CIの実施タイミング(bundle exec danger)の前に、npm iyarnによりtslintがインストールされており、
  3. tslintのチェック対象をプラグインの設定で絞らない

という条件であれば、Dangerfileにtslint.lintを記載するだけで十分です。

  • Dangerfile
tslint.lint

そしてJenkinsなどのCIサーバ上で、対象プロジェクトのテスト時に、以下の処理が実施されるようにしてください。

npm i
bundle install
bundle exec danger

danger-tslintのオプション解説

ここからは、Spring Bootで構成されたリポジトリのサブディレクトリが、TypeScriptのプロジェクトとなっている場合、

つまり、プロジェクトルート直下のsrcディレクトリはJavaなどの言語用、サブディレクトリ(ここではclient)配下のsrcディレクトリがTypeScript用となる以下のような構成を例にとってオプションの解説をしていきます。

.
├── client
│   └── src
└── src

Dangerfileは、.gitディレクトリのあるプロジェクトルート直下に置く必要があるので、TypeScriptプロジェクトのパスと、tslintの実行パスを以下のように指定する必要があります。

tslint.executable_path = 'client/node_modules/.bin/tslint'
tslint.project_directory = 'client'
tslint.lint

こうすることでproject_directoryのパス配下にtsconfig.jsonやtslint.jsonがあれば、それらが読み込まれた状態でtslintが実行されます。

filteringオプション利用時の注意

filteringオプションを利用すると、tslint対象がプルリクでの対象ファイルに限定されます。

しかし、このオプションを利用した場合、tsconfig.jsonのincludeに当てはまらないTypeScriptのファイルがプルリクで追加されると、 tslintがXXXXX.ts is not included in project.のようなエラーを出すため、以下のようにincludeのファイルとマッチするようにfile_regexを指定する必要があります。 (target_filesはtsconfig.jsonでincludeが指定されていれば、無くても大丈夫なはずです)

tslint.filtering = true
tslint.executable_path = 'client/node_modules/.bin/tslint'
tslint.project_directory = 'client'
tslint.target_files = 'client/src/**/*.{ts,tsx}'
tslint.file_regex = /client\/src\/.*\.tsx?$/
tslint.lint

target_filesにはシェルにおける文字一致のパターンを、file_regexにはRubyにおける正規表現のパターンを記載する必要があり、これらはマッチ内容が一致していると概ね良いと思います。

ちなみにコンフィグファイルは、プロジェクトディレクトリ配下に配置してあるのであれば、プロジェクトディレクトリだけの指定で大丈夫です。

むしろ指定すると私のプロジェクト構成では動かなかったような・・・

ちょっとクセのあるfilteringオプションですが、filteringオプションを有効にしなくても、Dangerのgithub.dismiss_out_of_range_messagesオプションを使えば、プルリク外のファイルにコメントは付かないので、用途によって使い分けてみてください。

初めてまともにRubyのコードを書いてみましたが、なんとか動いて良かったです。

テストは書いてないし、gemに登録もしていないのですが、自プロジェクトではそれっぽく動作していたので、DangerでTSLintを使う際にご利用ください。