Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

背景

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

参考にしたサイト

yumechi
えんじにゃー。ぷりぷりかしこま。Pythonしかできない。
https://namonakimichi.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away