カスタム TypeScript リンターとフォーマッタを作成する方法

TypeScript 用のカスタムリンターとフォーマッタを作成すると、コーディング標準を強制し、プロジェクト内のコード品質を維持するのに役立ちます。この記事では、ESLint や Prettier などのツールを使用して、独自のルールと構成で拡張しながら、カスタム TypeScript リンターとフォーマッタを構築するプロセスについて説明します。

ステップ1: 開発環境の設定

カスタムリンターとフォーマッタを作成する前に、適切な開発環境があることを確認してください。マシンに Node.js と npm または Yarn がインストールされている必要があります。

# Install Node.js and npm from https://nodejs.org# Initialize a new project
npm init -y

ステップ2: カスタムESLintルールの作成

カスタム ESLint ルールを作成するには、まず ESLint をインストールし、基本的な構成を設定します。

# Install ESLint
npm install eslint --save-dev

# Initialize ESLint configuration
npx eslint --init

次に、別のファイルで定義してカスタムルールを作成します。特定のコーディングスタイルを適用するカスタムルールの例を次に示します。

import { Rule } from 'eslint';

const rule: Rule.RuleModule = {
  create(context) {
    return {
      Identifier(node) {
        if (node.name === 'foo') {
          context.report({
            node,
            message: 'Avoid using the identifier "foo".',
          });
        }
      },
    };
  },
};

export default rule;

ESLint 構成ファイルにカスタムルールを登録します。

module.exports = {
  rules: {
    'no-foo': require('./path/to/custom-rule').default,
  },
};

ステップ3: カスタムPrettierフォーマッタの作成

カスタム Prettier フォーマッタを作成するには、まず Prettier と関連ツールをインストールします。

# Install Prettier
npm install prettier --save-dev

Prettier の機能を拡張してカスタムフォーマッタを作成します。基本的な例を次に示します。

import { FormatterOptions } from 'prettier';

const customFormatter = (text: string, options: FormatterOptions) => {
  // Implement custom formatting logic here
  return text; // Return formatted text
};

export default customFormatter;

Prettier API を使用して、カスタムフォーマッタを Prettier と統合します。

import { format } from 'prettier';
import customFormatter from './path/to/custom-formatter';

const formattedCode = format('const x = 1;', {
  parser: 'typescript',
  plugins: [customFormatter],
});
console.log(formattedCode);

ステップ4: カスタムツールのテスト

カスタムリンターとフォーマッタが期待どおりに動作することを確認するには、テストが不可欠です。Jest や Mocha などのツールを使用してテストケースを記述します。

# Install Jest
npm install jest --save-dev

# Create a test file for your custom rule
import rule from './path/to/custom-rule';
import { RuleTester } from 'eslint';

const ruleTester = new RuleTester();

ruleTester.run('no-foo', rule, {
  valid: [
    // Valid test cases
  ],
  invalid: [
    // Invalid test cases
  ],
});

結論

カスタム TypeScript リンターとフォーマッタを作成するには、開発環境の設定、カスタムルールまたはフォーマッタの定義、実装のテストが必要です。これらのツールをワークフローに統合することで、コーディング標準を適用し、プロジェクト全体でコードの品質を維持できます。

typescript linting フォーマット eslint prettier ルール構成コード開発プラグインテスト jest カスタムツール