TypeScript：Google のスタイルガイドに従ってみる

Google TypeScript Style Guide に従う場合、 gts が便利そうなので使ってみます。

インストール

お試しなので、空のディレクトリで次のコマンドを実行しました。
既存のプロジェクトに追加する場合も同様のコマンドですが、その際は設定に問題がないように気をつける必要がありそうなので、今回はパスしました。

npx gts init

lint の実行

お試し用のソースコード src/index.ts が生成されるので、次のコマンドで lint を実行してみます。

yarn lint

  3:7  warning  'longString' is assigned a value but never used  @typescript-eslint/no-unused-vars
  6:7  warning  'trailing' is assigned a value but never used    @typescript-eslint/no-unused-vars
  8:7  warning  'why' is assigned a value but never used         @typescript-eslint/no-unused-vars

✖ 3 problems (0 errors, 3 warnings)

検出されてますね。

ソースコードのフォーマットと問題の修正

上記で検出される指摘は自動で修正できない問題なので、修正できる問題を src/index.ts 加えました。

• 文字列の囲みをシングルクォーテーションからダブルクォーテーションに変更
• 変な所で改行

その後、次のコマンドを実行。

yarn fix

すると、ダブルクォーテーションがシングルクォーテーションになったり、変な改行が整形されました。

ソースコードを保存したときに自動修正

VSCode でソースコードの保存時に自動修正されるように .vscode ディレクトリの setting.json に設定しました。

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

これで、ソースコードのフォーマットや、修正可能な問題は保存時に自動でされるので便利です。

ESLint 拡張機能を既にインストール済みな環境で試しています。
必要か未確認なのですが、自動で修正されない場合はそれが原因かもしれません。

既存プロジェクトに gts を追加するのは辛いとき

ESLint を追加して、ルールは https://github.com/google/gts/blob/main/.eslintrc.json を参考に作成すると良さそうです。