コードを書き直しました。よってコードフォーマットを適用します。コードをきれいに保つコードフォーマッターやLinterの利用はJavaScriptのプロジェクトでは一般的になってきました。プロジェクトにおいても、コードフォーマッターやLinterの設定を施したいと思います。ソースコード静的解析し、良くない書き方を警告してくれるLinterです。ルールに則ってソースコードを整形してくれるコードフォーマッターです。Linterとコードフォーマッター間の設定ルールを統一しておくことで、特に複数人で開発するシーンでは、個々人のソースコードの書き方の差分を補正してくれるため大変重宝します。逆にLinterとコードフォーマッター間のルールがずれていると、常にLinterから警告が出続けることとなり開発スピードを落とすことになりかねませんので注意しましょう。それではさっそく設定していきます。選択していると、必要なファイルやライブラリがインストールされた状態でスタートできます。filesプロジェクト初期化時に設定をしておらず、後から追加したい場合には以下を実行すると良いでしょう。prettier次にルール適用に使うPluginをインストールします。TypeScriptやPrettierと組み合わせて使うためのモジュールをインストールします。@typescript-eslint/eslint-plugin次にTypeScriptの型定義をインストールします。@types/babel-core最後にルールをインストールします。次にインストールしたモジュールを使うための設定を行います。外部のルールを設定していきます。プロパティに記載していきます。コマンドを追加します。}Lintを実行してみます。コマンドによって、機械的に修正可能な警告は自動で修正できます。エディタ上で警告を出すこともできます。ここでは設定方法を紹介します。拡張機能のビューを開きます。ESLintとPrettierの拡張機能をインストールします。再起動して拡張機能を有効にします。編集し、エディタの設定を定義します。コマンド実行時のルールを共有することです。ここの設定がずれてしまうとファイルを保存する度にLinterからエラーメッセージが表示されストレスフルになります。