🙈
Google TypeScript Style Guideを読む
はじめに
- TypeScriptのプロジェクトでコーディング規約を決める時にeslintのおすすめ設定だけでは上手くいかないことがあります。この記事ではGoogleが提供しているスタイルガイドを見て使えそうなところを紹介します。
- eslintと@typescript-eslint/eslint-pluginの内容と照らし合わせて紹介します。
対象読者
- 社内プロジェクトのTypeScriptのコーディング規約を整備したい方
-
@typescript-eslint/eslint-pluginの
plugin:@typescript-eslint/recommendedとplugin:@typescript-eslint/recommended-requiring-type-checkingの設定だけではソースコードの治安の維持が出来なくなってしまった方
Google TypeScript Style Guideとは
- GoogleがTypeScriptのルールやベストプラクティスをまとめたガイドです
- Syntax/Language Rules/Source Organization/Type System/Consistencyの5つの分類で各ルールを説明しています
各分類ごとに気になったルールをピックアップしていきます
Syntax
| ルール名 | 概要 | 関連eslintルール |
|---|---|---|
| Identifiers | class/method/global constant valuesなどの命名スタイルが定義されてます。 | @typescript-eslint/naming-convention |
| Naming style | 命名時に使用しない方が良いものを紹介しています。 | @typescript-eslint/naming-convention |
| Comments & Documentation | JSDocに関するルールを紹介しています。 | eslint-plugin-jsdoc |
Language Rules
| ルール名 | 概要 | 関連eslintルール |
|---|---|---|
| Visibility | publicなどを記述するケースを定義しています。 | @typescript-eslint/explicit-member-accessibility |
| Parameter properties | Parameter Propertiesの記述方法を定義しています。 | @typescript-eslint/no-parameter-properties |
| Field initializers | フィールドの初期化について定義しています。 | ー |
| Primitive Types & Wrapper Classes | ラッパークラスではなくプリミティブ型を使用します。 | ー |
| Array constructor | Arrayの表記方法を定義しています。 | @typescript-eslint/array-type |
| Exceptions |
new Error()をthrowするようにします。 |
ー |
| Equality Checks |
===, !==を使うようにします。 |
eqeqeq |
| Function Declarations/Use arrow functions in expressions | アロー関数と通常のfunctionの使い分けについて定義しています。 | ー |
Source Organization
| ルール名 | 概要 | 関連eslintルール |
|---|---|---|
| Import Paths | importのパス指定について定義しています。 | ー |
| Exports | named exportsを推奨しています。 | import/no-default-export |
| Import & export type |
import typeを使用しないことを推奨します。 |
@typescript-eslint/consistent-type-imports |
Type System
| ルール名 | 概要 | 関連eslintルール |
|---|---|---|
| Type Inference | 変数の初期化時に型推論が効く場合、型定義を明示的に記述しないことを推奨します。 | ー |
| Nullable/undefined type aliases | type定義時にnull/undefinedを使用しないことを推奨します。 | ー |
| Optionals vs |undefined type | optionalパラメーターやフィールドの場合、| undefinedで型指定をしないようにします。 |
ー |
| Using unknown over any | anyではなくunknown を使用することを推奨します。 | @typescript-eslint/no-explicit-any |
Consistency
- 同じファイル、同じディレクトリ内のファイルと同じように一貫性のあるスタイルを推奨します。
使えそうなケース
- TypeScript初心者が多いプロジェクトの立ち上げ時
- コードレビュー時に指摘する時の参考サイトとして紹介する
- Arrayなど表記ゆれが多くなるのでどちらにするか決める時
おわりに
- このスタイルガイドが全てではありませんが、コーディング規約を決める時に参考にしてみてはいかがでしょうか。
おまけ：記事内のeslintプラグイン一覧
Discussion