Edited at

gtsを使ってGoogleスタイルでのTypeScriptのフォーマットチェック・自動修正を行う


背景

最近 Lint にハマっている。そして TypeScript をちょっと書いてみたりしている。

しかし、そもそもほとんど書いたことがない言語である、という背景があるので tslint の設定ファイルを自力で書くことが難しい状況である。

そこで調べていったところ、TypeScript を Google スタイルで簡単にフォーマットできる node module が存在することを発見した。


gts とは

https://github.com/google/gts


Google TypeScript Style


と記載がある通り、Google スタイルの TypeScript フォーマットのチェック・フォーマットを自動的に行なってくれる。

使い方は簡単。インストールは下記ですむ。

npm install gts

初回は init する。package.json とかがアップデートされる。

npx gts init

チェックするときは check コマンドを使う。 src ディレクトリ配下のコードについて、チェックに引っかかる項目があればズラっと出てくる。

npx gtx check src/*.ts

実行結果の一部を貼るとこうなる。(このプロジェクトでは pritty-series-calender/ 配下にコードを置いている )


[06/09 15:46:26] $ npx gts check pritty-series-calender/*.ts (git)-[master]
Warning: The 'deprecation' rule requires type information.
pritty-series-calender/calendar.ts
Unnecessary trailing comma (trailing-comma)
9 | function main() {
10 | const calander: GoogleAppsScript.CalendarApp.Calendar = CalendarUtil.getCalendar(
> 11 | envProperty(CALENDER_KEY),
| ^
12 | );
13 | const sheet: GoogleAppsScript.Spreadsheet.Sheet = SpreadsheetApp.getActiveSheet();
14 |

Unnecessary trailing comma (trailing-comma)
26 | function writeDate(
27 | calender: GoogleAppsScript.CalendarApp.Calendar,
> 28 | sheet: GoogleAppsScript.Spreadsheet.Sheet,
| ^
29 | ): void {
30 | if (!sheet) {
31 | Logger.log("sheet is null, please check user Sheet");
(後略)

簡単に修正できるものの場合は、下記のように fix を打ちこめば OK。prettier が実際には動いてるらしい。

npx gtx fix src/*.ts

fix した結果の一部はこんな感じに。(このプロジェクトでは pritty-series-calender/ 配下にコードを置いている )

~/mydata/mygit/GithubRepository/pretty-series-calendar

[06/09 15:47:30] $ git diff (git)-[master]
diff --git a/pritty-series-calender/calendar.ts b/pritty-series-calender/calendar.ts
index bc75ae1..baf288a 100644
--- a/pritty-series-calender/calendar.ts
+++ b/pritty-series-calender/calendar.ts
@@ -8,7 +8,7 @@ const CALENDER_KEY = "PRITTY_CALENDER_NAME";
*/
function main() {
const calander: GoogleAppsScript.CalendarApp.Calendar = CalendarUtil.getCalendar(
- envProperty(CALENDER_KEY),
+ envProperty(CALENDER_KEY)
);
const sheet: GoogleAppsScript.Spreadsheet.Sheet = SpreadsheetApp.getActiveSheet();

@@ -25,7 +25,7 @@ function main() {
*/
function writeDate(
calender: GoogleAppsScript.CalendarApp.Calendar,
- sheet: GoogleAppsScript.Spreadsheet.Sheet,
+ sheet: GoogleAppsScript.Spreadsheet.Sheet
): void {
if (!sheet) {
Logger.log("sheet is null, please check user Sheet");
(後略)

それでもまだ一部は修正しきれていないので、これ以上は手動での修正が必要。(ここはたしかめんどくさくなって Object にしとくか、ってやったけど手抜き過ぎたと反省)


[06/09 15:49:17] $ npx gts check pritty-series-calender/*.ts (git)-[master]
Warning: The 'deprecation' rule requires type information.
pritty-series-calender/calendar.ts
Don't use 'Object' as a type. Use {} instead. (ban-types)
57 | };
58 |
> 59 | const data: Object[][] = sheet.getDataRange().getValues();
| ^
60 | for (let i = 1; i < data.length; i++) {
61 | const row: Object[] = data[i];
62 | if (row[eventKeyMap.EventID] === "") {

Don't use 'Object' as a type. Use {} instead. (ban-types)
59 | const data: Object[][] = sheet.getDataRange().getValues();
60 | for (let i = 1; i < data.length; i++) {
> 61 | const row: Object[] = data[i];
| ^
62 | if (row[eventKeyMap.EventID] === "") {
63 | const startDatetime = new Date(row[eventKeyMap.StartDateTime] as string);
64 | let endDateTime;


まとめ

まだ使い始めたばかりなので、他のコマンドについては抑えていないが、TypeScript 生活を始めたばかりの人間にとっては、非常に楽に Lint かけれてる感覚があり、とても良い気持ち。

pre-commit のタイミングで走るようにしたいので、そのたぐいのツールが使えると良さそう。husky が有力候補? lint-stage も組み合わせる必要がある? とまだまだ全然わかりませんが、継続的に試していきたいところ。


参考にしたサイト