$shibayu36->blog;

クラスター株式会社のソフトウェアエンジニアです。エンジニアリングや読書などについて書いています。

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

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

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

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

参考文献

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

ビルドの環境を整える

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

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

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

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ツールはこのプロジェクト構成を使って作ってみたい。