TypeScriptでCLIツール作りをするためのプロジェクトサンプルを作ってみた

最近TypeScriptの学習をしようと思い、何でもTypeScriptで作ってみている。今回はCLIツールを作ろうと思ったのだが、ビルド環境やeslint環境など考えることが結構あった。そこでTypeScriptでのCLIツールのプロジェクトサンプルを作りながら勉強してみた。

作成したのは https://github.com/shibayu36/typescript-cli-project 。 npm install -g shibayu36/typescript-cli-project でtypescript-cli-projectというコマンドがインストールされ実行できるようになった。

このプロジェクトサンプル作成を通して学んだことをメモしておく。

参考文献

以下2つの文献が入門として非常に参考になった。この2つの文献を参考にしつつ、公式ドキュメントを追いかけながら作成していった。

• TypeScriptでCLIツールを作って、npmパッケージにする - Qiita
  • TypeScriptでCLIツール作るやり方が全て載っていた
• 脱TSLintして、ESLint TypeScript Plugin に移行する - Qiita
  • TypeScript環境でのeslintの設定に付いてわかりやすかった

ビルドの環境を整える

TypeScriptを使うのでビルドの環境を整える必要がある。tscだけでも出来ると思うが、今回はwebpackも使ってビルド環境を作ってみた。

• tsconfig.json
• webpack.config.js
• package.jsonでbuildタスク

インストールした時にコマンドを使えるようにする

package.jsonのbinで指定されたkeyがコマンド名、valueが実行ファイルとなる。指定するファイルはshebangを設定してないといけなそう。そのためbinディレクトリ以下には、shebangとビルドしたファイルをrequireするだけのファイルを作る。

• package.jsonのbin
• bin/typescript-cli-project.js

eslintとprettierとvscode

コードを書く時に何も考えたくないので、lintもかけてフォーマットも自動で行われるようにする。

• .eslintrc.js
  • overridesを使ってTypeScriptのファイルだけ @typescript-eslint/parser を使うようにしている
  • このようにすることで、jsのファイルなどがあってもうまくeslintが動く
• .eslintignore
• .prettierrc.js
• .vscode/settings.json
  • VSCodeでのフォーマットではデフォルトのフォーマットではなく、eslintのfixが働くようにしている

まとめ

今回はTypeScriptでCLIツール作りをするためのプロジェクトサンプルを作ってみた。今度作るCLIツールはこのプロジェクト構成を使って作ってみたい。