タイトルでほぼすべてですが、CLIをつくってnpmパッケージとして公開しました。Ionic v3/v4対応です。使って、フィードバックいただけますと喜びます。
使い方
現在のところ、機能は2つだけです。シンプル！まずはインストール。普通のパッケージと同じようにnpm iでインストールしてください。
$ npm install @rdlabo/ionic-sub -g
そうすると、ionic-sub コマンドが使えるようになります。そうしたら、Ionicプロジェクトのカレントディレクトリに移動してください。いつも $ ionic serve を打つ場所です。これで準備完了です。
tslintの自動設定
Ionicのプロジェクトを複数人で開発してたら、人によって記述ルールが異なるということありませんか？Aさんはダブルクオーテーションを使うけど、Bさんはシングルだ、改行位置が違うetc...それを防ぐためにコーディング規約をつくったりしますが、新しくチームに入った人はルールを習得していないのでレビューで指摘受けまくったり・・・。
そういうことを防ぎ、自動的に「この記述は違うよ」とエディタが教えてくれるようにするためにlintルールというものがあります。Ionicもデフォルトでtslint（TypeScriptのlintルール）があるのですが、そのルールは初期では設定されていません。
そこで、自動的にtslintを強化するコマンドをつくりました。これを実行すると、tslintルールが設定され、チームで統一したコードを書く助けになります。
$ ionic-sub set lint
なお、このコマンドで行われる処理は以下の通りです。
- npm install codelyzer --save-dev
- tslint.json の上書き（AngularをベースにIonic用にカスタマイズしたlintです）
prettierの自動設定
ところが、tslintを走らせていると、いちいちルールに従って修正することが面倒になってきます。ひたすらシングルクォーテーションに修正したり、セミコロンをつけたりする作業って生産性ないですよね・・・。
そこで、すべてのファイルを自動的に修正してくれるprettierを導入できるコマンドもつくりました。以下のコマンドを実行ください。
$ ionic-sub set formatter
これを実行すると、Ionicプロジェクトにprettierが設定されるだけではなく、一回いっかいコマンドを叩かなくてもいいように「Gitにコミットする度に」すべてのファイルがチェック・修正されます。
なお、このコマンドで行われる処理は以下の通りです。
- npm install prettier @kaizenplatform/prettier-config pre-commit --save-dev
- prettier.config.js という設定ファイルの追加
- package.json に 'formatter' と 'pre-commit' のスクリプトの追記
なぜ作ったか
https://www.rdlabo.jp をご覧いただければいいのですが、弊社ではIonicのコードレビューをお仕事でしております。いろいろなIonicプロジェクトに接することができてとても嬉しいのですが、多くの場合上記みたいな問題が起きていて「まずはlintとprettierを入れよう」からプロジェクトをスタートしてて、これってIonicをはじめてつかうプロジェクトでは共通した課題なんだなと最近、実感してます。
ですので、この設定方法についてまとめようと思ってたところ、ちょうど昨日、@kuwahara_jsriさんが「Tips for OSS」というタイトルでLTをしてきた話をしてて「CLI自作楽しい」ということなのでつくってみようかなと。
思いつき突貫でつくったのですが、確かにCLIを自作するって楽しい。Ionic CLIのコントリビューターしているのでCLIの機能拡張や不具合の修正はやっていたのですが、やっぱりIonic teamの方針とCLIにあるべき機能を考えながら提案していってるので、好き勝手つくれて楽しかったです。ですので、本記事のタイトルが「Ionic CLI本体にマージされなさそうな機能を実装するCLI「Ionic-sub」をつくって公開した話。」なのです。
ちなみにCLI Frameworkとしてoclif使ってます。TypeScriptでつくれる雛形探してたのでちょうどよかった。
これからIonic-subをどうするか
あまり考えていないのですが、Ionic CLI本体にマージされなかった機能をここで再実装して公開すると楽しいなぁとか考えています。欲しい汎用機能ありましたら、プルリクなりIssues立てなどしてください。
また、Ionicについての社内研修やコードレビューのお仕事も募集しております。
それでは、また。