BETA

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

投稿日:2019-06-09
最終更新:2019-06-09
※この記事は外部サイト(https://qiita.com/yumechi/items/1bae99473e...)からのクロス投稿です

背景

最近 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 も組み合わせる必要がある? とまだまだ全然わかりませんが、継続的に試していきたいところ。

参考にしたサイト

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

技術ブログとは何なのだろう。なんかちょっと試してみたものをメモがてら残してみています。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!