Typescriptのリンタとフォーマッタについて

Typescriptのリンタとフォーマッタ

TypeScriptのコードを保守しやすくし、品質を向上させるためには、適切なリンタとフォーマッタの使用が重要です。
以下は、TypeScriptのリンタとフォーマッタについての基本的な情報です。

リンタ (Linter):

リンタは、コード内の潜在的な問題やスタイル違反を検出するツールです。
TypeScriptのリンタとしてよく使われるものには以下があります：

1. ESLint with TypeScript Plugin:

• TypeScriptのコードを検査し、潜在的な問題を指摘します。
• TypeScript用のプラグインを含めることで、TypeScriptの固有のルールも検証できます。

インストール:

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

コンフィグファイル (例: .eslintrc.js):

module.exports = {
 parser: '@typescript-eslint/parser',
 plugins: ['@typescript-eslint'],
 extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
 rules: {
   // カスタムルールを追加できます
 },
};

2. TSLint (非推奨):

• 以前はTypeScript向けのリンタとして広く使用されていましたが、現在は非推奨となっています。

ESLintが代替とされています。

フォーマッタ (Formatter):

フォーマッタは、コードのスタイルを統一し、整形するツールです。
TypeScriptのコードフォーマッタとしてよく使われるものには以下があります：

1. Prettier:

• コードの整形を自動化し、一貫性を保ちます。
• TypeScriptに対応しており、プロジェクトに導入しやすいです。

インストール:

npm install --save-dev prettier

Prettier設定ファイル (例: .prettierrc):

{
 "semi": false,
 "singleQuote": true,
 "tabWidth": 2,
 "trailingComma": "all",
 "printWidth": 80
}

これにより、コードを保存する際などに自動的に整形が行われます。

2. TSLint with TSLint Formatter:

• 以前はTSLintがコードフォーマットも担当していましたが、ESLintとPrettierの組み合わせが一般的になっています。

リンタとフォーマッタの組み合わせにより、コードの品質を維持し、一貫性を保つことができます。
また、自分のプロジェクトに最適なツールを選択し、適切な設定を行うことが重要です。

yarnによるリンタとフォーマッタのインストール例

Yarnを使用してプロジェクトにリンタとフォーマッタを導入する手順を以下に示します。
まず、プロジェクトのルートディレクトリで次のコマンドを実行してYarnを初期化します。

yarn init -y

次に、ESLint（リンタ）とPrettier（フォーマッタ）をプロジェクトに追加します。

yarn add --dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier

その後、ESLintとPrettierの設定ファイルを作成します。
ESLintの場合、.eslintrc.js ファイルを作成し、以下のように設定します。

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  rules: {
    // カスタムルールを追加できます
  },
};

Prettierの設定は、プロジェクトのルートに .prettierrc ファイルを作成して、以下のように設定します。

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

これで、リンタとフォーマッタがプロジェクトに追加され、設定が行われました。
追加できたら、lintおよびformatのスクリプトを package.json に追加して、実行しやすくします。

// package.json
{
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write ."
  }
}

これで、以下のコマンドでリンタとフォーマッタが実行できます。

yarn lint  # リンタ実行
yarn format  # フォーマッタ実行

これらのコマンドを組み合わせて、コードの品質を保ちながら整形することができます。

コミットのタイミングでフォーマッタを起動させる方法

コミットのタイミングでフォーマッタを起動させる方法には、主に以下の2つのアプローチがあります。

1. HuskyとLint-stagedの使用:

• HuskyはGitフックを管理するためのツールであり、Lint-stagedはステージされたファイルに対してコマンドを実行するためのツールです。
• これらを組み合わせて、コミット前にコードをフォーマットすることができます。

まず、以下のコマンドでHuskyとLint-stagedをインストールします。

yarn add --dev husky lint-staged

次に、package.json ファイルに以下のような設定を追加します。

// package.json
{
 "husky": {
   "hooks": {
     "pre-commit": "lint-staged"
   }
 },
 "lint-staged": {
   "*.{ts,tsx}": [
     "prettier --write",
     "eslint --fix",
     "git add"
   ]
 }
}

これにより、pre-commit フックが発動する際に、Lint-stagedが指定されたファイル（ここでは.tsおよび.tsxファイル）に対してPrettierとESLintを実行し、変更をステージングします。

2. Gitの--amendオプションを使用:

• コミット前にフォーマットを適用して、最後のコミットを修正する方法もあります。

例えば、以下のようにコミットメッセージと共に --amend オプションを使用してコミットを修正できます。

git commit --amend --no-edit

これにより、最後のコミットが修正され、変更がステージングされた状態になります。
この方法は手動で行う必要がありますが、簡単にフォーマットを適用できます。

どちらの方法を選択するかはプロジェクトの要件や好みに依存します。
HuskyとLint-stagedを使用する方法は、開発者が気をつけずにフォーマットが適用されるため、一貫性を保ちやすいです。