ESLint の標準ルールだけでは、現代的な JavaScript・TypeScript 開発で求められる品質基準を満たすことは困難です。プラグインを適切に導入することで、コードの品質向上、セキュリティ強化、開発効率の向上を実現できます。

この記事では、開発ニーズに応じた ESLint プラグインの選び方と効果的な活用法を詳しく解説していきます。用途別に分類した人気プラグイン 10 選を実際の設定例とともにご紹介し、チーム開発ですぐに活用できる実践的な内容をお届けします。

プラグインの分類と特徴

ESLint プラグインの基本概念

ESLint プラグインは、ESLint のコア機能を拡張し、特定の用途やフレームワークに特化したルールセットを提供します。プラグインは大きく以下の 4 つのカテゴリに分類できます。

#	分類	目的	主な効果
1	コード品質向上系	コードの可読性・保守性・一貫性の向上	バグ予防、保守性向上
2	セキュリティ強化系	セキュリティ脆弱性の検出・防止	セキュリティリスク軽減
3	パフォーマンス最適化系	実行性能の向上・最適化	処理速度・メモリ効率改善
4	開発効率向上系	開発体験の改善・自動化・統一化	開発速度向上

プラグインの導入メリット

プラグインを適切に選択・設定することで、以下のような具体的な効果が得られます。

コード品質の向上

• 潜在的なバグの早期発見
• 一貫性のあるコーディングスタイル
• 保守しやすいコード構造の実現

開発効率の向上

• 自動修正による手作業削減
• ベストプラクティスの自動適用
• レビュー時間の短縮

チーム開発の最適化

• 統一された品質基準
• 新メンバーの教育支援
• 技術負債の蓄積防止

コード品質向上プラグイン

eslint-plugin-import（モジュール管理の最適化）

概要と特徴

eslint-plugin-import は、ES6+ のモジュール（import/export）に関するルールを提供する必須プラグインです。依存関係の管理、循環参照の検出、未使用インポートの発見など、モジュールシステムを健全に保つための豊富な機能を提供します。

インストールと基本設定

bashCopy codeyarn add -D eslint-plugin-import

javascriptCopy code// .eslintrc.js
module.exports = {
  plugins: ['import'],
  extends: ['plugin:import/recommended'],
  rules: {
    // 基本的な import ルール
    'import/no-unresolved': 'error',
    'import/named': 'error',
    'import/default': 'error',
    'import/namespace': 'error',

    // import 順序の統一
    'import/order': [
      'error',
      {
        groups: [
          'builtin', // Node.js 組み込みモジュール
          'external', // npm パッケージ
          'internal', // プロジェクト内モジュール
          'parent', // 親ディレクトリ
          'sibling', // 同じディレクトリ
          'index', // index ファイル
        ],
        'newlines-between': 'always',
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
      },
    ],

    // 未使用の import 検出
    'import/no-unused-modules': 'warn',

    // 循環参照の検出
    'import/no-cycle': 'error',
  },
};

よくあるエラーと解決方法

エラー例 1: 解決できない import

bashCopy code✗ 1:1  error  Unable to resolve path to module './utils'  import/no-unresolved

原因と解決方法

javascriptCopy code// 問題のあるコード
import { formatDate } from './utils'; // ファイルが存在しない

// 解決方法1: 正しいパスに修正
import { formatDate } from './utils/date';

// 解決方法2: resolver の設定
// .eslintrc.js
module.exports = {
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        paths: ['src'],
      },
    },
  },
};

エラー例 2: import 順序の違反

bashCopy code✗ 3:1  error  'react' import should occur before import of './components/Button'  import/order

修正前と修正後

javascriptCopy code// 修正前（エラーが発生するコード）
import './styles.css';
import Button from './components/Button';
import React from 'react';
import { useState } from 'react';

// 修正後（正しい順序）
import React, { useState } from 'react';

import Button from './components/Button';

import './styles.css';

eslint-plugin-unicorn（現代的なコーディング）

概要と特徴

eslint-plugin-unicorn は、現代的で読みやすい JavaScript コードを書くためのルールを提供します。より表現力豊かで効率的なコーディングパターンを推奨し、古いパターンやアンチパターンを検出します。

インストールと設定

bashCopy codeyarn add -D eslint-plugin-unicorn

javascriptCopy code// .eslintrc.js
module.exports = {
  plugins: ['unicorn'],
  extends: ['plugin:unicorn/recommended'],
  rules: {
    // 推奨設定から一部調整
    'unicorn/prevent-abbreviations': [
      'error',
      {
        allowList: {
          props: true,
          ref: true,
          params: true,
        },
      },
    ],

    // ファイル名の規則
    'unicorn/filename-case': [
      'error',
      {
        case: 'kebabCase',
        ignore: ['^[A-Z]'],
      },
    ],

    // 配列操作の最適化
    'unicorn/no-array-reduce': 'off', // プロジェクトに応じて調整
    'unicorn/prefer-array-some': 'error',
    'unicorn/prefer-array-find': 'error',

    // 文字列操作の改善
    'unicorn/prefer-string-starts-ends-with': 'error',
    'unicorn/prefer-string-slice': 'error',
  },
};

実際の改善例

javascriptCopy code// 改善前（unicorn ルールに違反）
const users = data.filter(
  (item) => item.status === 'active'
);
const hasActiveUsers = users.length > 0;

if (text.indexOf('hello') === 0) {
  console.log('Greeting found');
}

// 改善後（unicorn ルール適用）
const activeUsers = data.filter(
  (user) => user.status === 'active'
);
const hasActiveUsers = activeUsers.length > 0;

if (text.startsWith('hello')) {
  console.log('Greeting found');
}

よくあるエラーと対処法

エラー例: 略語の使用

bashCopy code✗ 1:7  error  Avoid abbreviations. Use `button` instead of `btn`  unicorn/prevent-abbreviations

javascriptCopy code// エラーが発生するコード
const btn = document.querySelector('.button');

// 修正後
const button = document.querySelector('.button');

// または設定で許可する場合
// .eslintrc.js
rules: {
  'unicorn/prevent-abbreviations': [
    'error',
    {
      allowList: {
        btn: true,
      },
    },
  ],
}

eslint-plugin-prefer-arrow（関数記法統一）

概要と特徴

eslint-plugin-prefer-arrow は、通常の関数宣言よりもアロー関数の使用を推奨するプラグインです。一貫性のある関数記法により、コードの可読性と保守性を向上させます。

インストールと設定

bashCopy codeyarn add -D eslint-plugin-prefer-arrow

javascriptCopy code// .eslintrc.js
module.exports = {
  plugins: ['prefer-arrow'],
  rules: {
    'prefer-arrow/prefer-arrow-functions': [
      'error',
      {
        disallowPrototype: true,
        singleReturnOnly: false,
        classPropertiesAllowed: false,
      },
    ],
  },
};

適用例

javascriptCopy code// 変更前
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// 変更後
const calculateTotal = (items) => {
  return items.reduce((sum, item) => sum + item.price, 0);
};

// より簡潔に
const calculateTotal = (items) =>
  items.reduce((sum, item) => sum + item.price, 0);

フレームワーク特化プラグイン

eslint-plugin-react（React 開発の必須プラグイン）

概要と特徴

React アプリケーション開発において、JSX 構文の適切な使用、コンポーネント設計のベストプラクティス、Hooks の正しい使用方法などを検証する必須プラグインです。

インストールと設定

bashCopy codeyarn add -D eslint-plugin-react eslint-plugin-react-hooks

javascriptCopy code// .eslintrc.js
module.exports = {
  plugins: ['react', 'react-hooks'],
  extends: [
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
  ],
  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    // JSX に関するルール
    'react/jsx-uses-react': 'off', // React 17+ では不要
    'react/react-in-jsx-scope': 'off', // React 17+ では不要

    // Props の型定義を強制
    'react/prop-types': 'error',

    // 未使用の state を検出
    'react/no-unused-state': 'error',

    // 危険な props の使用を警告
    'react/no-danger': 'warn',

    // JSX の記述規則
    'react/jsx-pascal-case': 'error',
    'react/jsx-no-duplicate-props': 'error',

    // Hooks のルール
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
  },
};

よくあるエラーと解決方法

エラー例 1: Props の型定義不備

bashCopy code✗ 5:1  error  'name' is missing in props validation  react/prop-types

javascriptCopy code// エラーが発生するコード
function UserCard({ name, email }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

// 修正方法 1: PropTypes を使用
import PropTypes from 'prop-types';

function UserCard({ name, email }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
};

// 修正方法 2: TypeScript を使用
interface UserCardProps {
  name: string;
  email: string;
}

function UserCard({ name, email }: UserCardProps) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

エラー例 2: Hooks の依存関係不備

bashCopy code✗ 8:6  warning  React Hook useEffect has a missing dependency: 'userId'  react-hooks/exhaustive-deps

javascriptCopy code// エラーが発生するコード
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, []); // userId が依存配列に含まれていない

  return <div>{user?.name}</div>;
}

// 修正後
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]); // 依存配列に userId を追加

  return <div>{user?.name}</div>;
}

eslint-plugin-vue（Vue.js 開発の品質向上）

概要と特徴

Vue.js アプリケーション開発における Single File Component（SFC）の適切な記述、テンプレート構文の最適化、Composition API の正しい使用方法を検証します。

インストールと設定

bashCopy codeyarn add -D eslint-plugin-vue

javascriptCopy code// .eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/vue3-recommended', // Vue 3 の場合
    // 'plugin:vue/recommended', // Vue 2 の場合
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser', // TypeScript 使用時
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  rules: {
    // コンポーネント名の規則
    'vue/component-name-in-template-casing': [
      'error',
      'PascalCase',
    ],

    // Props の定義強化
    'vue/require-prop-types': 'error',
    'vue/require-default-prop': 'error',

    // テンプレートの記述規則
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'always',
          component: 'always',
        },
      },
    ],

    // Composition API のルール
    'vue/no-setup-props-destructure': 'error',
    'vue/prefer-import-from-vue': 'error',
  },
};

実際の改善例

vueCopy code<!-- 改善前 -->
<template>
  <div>
    <my-component :user-data="userData"></my-component>
    <input v-model="searchTerm" />
  </div>
</template>

<script>
export default {
  props: ['userData'], // 型定義が不十分
  data() {
    return {
      searchTerm: '',
    };
  },
};
</script>

<!-- 改善後 -->
<template>
  <div>
    <MyComponent :user-data="userData" />
    <input v-model="searchTerm" />
  </div>
</template>

<script>
export default {
  name: 'UserSearch',
  props: {
    userData: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  },
  data() {
    return {
      searchTerm: '',
    };
  },
};
</script>

eslint-plugin-node（Node.js 開発の最適化）

概要と特徴

Node.js 環境での開発において、適切な API の使用、非推奨機能の回避、セキュリティベストプラクティスの適用を支援します。

インストールと設定

bashCopy codeyarn add -D eslint-plugin-node

javascriptCopy code// .eslintrc.js
module.exports = {
  plugins: ['node'],
  extends: ['plugin:node/recommended'],
  env: {
    node: true,
  },
  rules: {
    // 非推奨 API の使用を警告
    'node/no-deprecated-api': 'error',

    // 存在しないモジュールの import を検出
    'node/no-missing-import': 'error',
    'node/no-missing-require': 'error',

    // Node.js バージョンに応じた機能使用制限
    'node/no-unsupported-features/es-syntax': [
      'error',
      {
        version: '>=14.0.0',
        ignores: ['modules'],
      },
    ],

    // ファイルパスの統一
    'node/no-path-concat': 'error',

    // プロセス終了の適切な処理
    'node/no-process-exit': 'error',
  },
};

Node.js 特有のエラーと対処法

エラー例: 非推奨 API の使用

bashCopy code✗ 3:17  error  Buffer() is deprecated. Use Buffer.alloc() or Buffer.from() instead  node/no-deprecated-api

javascriptCopy code// エラーが発生するコード
const buffer = new Buffer('hello world', 'utf8');

// 修正後
const buffer = Buffer.from('hello world', 'utf8');
// または
const buffer = Buffer.alloc(11);

セキュリティ・アクセシビリティ系

eslint-plugin-security（セキュリティ脆弱性の検出）

概要と特徴

一般的なセキュリティ脆弱性パターンを検出し、安全なコーディングプラクティスを促進するプラグインです。SQL インジェクション、XSS、CSRF などの脆弱性を事前に防ぐことができます。

インストールと設定

bashCopy codeyarn add -D eslint-plugin-security

javascriptCopy code// .eslintrc.js
module.exports = {
  plugins: ['security'],
  extends: ['plugin:security/recommended'],
  rules: {
    // 危険な正規表現の検出
    'security/detect-unsafe-regex': 'error',

    // SQL インジェクションの可能性
    'security/detect-possible-timing-attacks': 'warn',

    // 危険な文字列操作
    'security/detect-non-literal-regexp': 'warn',
    'security/detect-non-literal-fs-filename': 'error',

    // Buffer の不適切な使用
    'security/detect-buffer-noassert': 'error',

    // eval の使用を禁止
    'security/detect-eval-with-expression': 'error',
  },
};

セキュリティエラーの例と対策

エラー例 1: 危険な正規表現

bashCopy code✗ 5:14  error  Unsafe Regular Expression  security/detect-unsafe-regex

javascriptCopy code// 危険なコード（ReDoS 攻撃の可能性）
const regex = /^(a+)+$/;
const isValid = regex.test(userInput);

// 安全な代替案
const regex = /^a+$/;
const isValid = regex.test(userInput);

// または、より安全な検証方法
const isValid =
  userInput.length > 0 && /^a+$/.test(userInput);

エラー例 2: ファイルパスの直接指定

bashCopy code✗ 8:20  error  Non-literal fs filename  security/detect-non-literal-fs-filename

javascriptCopy code// 危険なコード
const fs = require('fs');
const content = fs.readFileSync(userProvidedPath);

// 安全な代替案
const path = require('path');
const fs = require('fs');

// パスの検証とサニタイズ
function safeReadFile(filename) {
  const safePath = path.resolve(
    './uploads',
    path.basename(filename)
  );

  // パスの妥当性チェック
  if (!safePath.startsWith(path.resolve('./uploads'))) {
    throw new Error('Invalid file path');
  }

  return fs.readFileSync(safePath);
}

eslint-plugin-jsx-a11y（アクセシビリティ強化）

概要と特徴

React アプリケーションにおけるアクセシビリティ（a11y）の問題を検出し、WCAG ガイドラインに準拠したコードの作成を支援します。

インストールと設定

bashCopy codeyarn add -D eslint-plugin-jsx-a11y

javascriptCopy code// .eslintrc.js
module.exports = {
  plugins: ['jsx-a11y'],
  extends: ['plugin:jsx-a11y/recommended'],
  rules: {
    // 画像の alt 属性を強制
    'jsx-a11y/alt-text': 'error',

    // フォーカス可能な要素のアクセシビリティ
    'jsx-a11y/no-autofocus': 'warn',
    'jsx-a11y/tabindex-no-positive': 'error',

    // ラベルとフォーム要素の関連付け
    'jsx-a11y/label-has-associated-control': 'error',

    // 意味のあるリンクテキスト
    'jsx-a11y/anchor-has-content': 'error',
    'jsx-a11y/anchor-is-valid': 'error',

    // 色のみに依存しない情報提供
    'jsx-a11y/no-static-element-interactions': 'warn',
  },
};

アクセシビリティエラーの修正例

エラー例 1: 画像の alt 属性不足

bashCopy code✗ 3:5  error  img elements must have an alt prop  jsx-a11y/alt-text

javascriptCopy code// エラーが発生するコード
function ProductCard({ product }) {
  return (
    <div>
      <img src={product.image} />
      <h3>{product.name}</h3>
    </div>
  );
}

// 修正後
function ProductCard({ product }) {
  return (
    <div>
      <img
        src={product.image}
        alt={`${product.name}の商品画像`}
      />
      <h3>{product.name}</h3>
    </div>
  );
}

エラー例 2: フォームラベルの関連付け不足

bashCopy code✗ 8:5  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control

javascriptCopy code// エラーが発生するコード
function ContactForm() {
  return (
    <form>
      <label>お名前</label>
      <input type='text' />
      <label>メールアドレス</label>
      <input type='email' />
    </form>
  );
}

// 修正後
function ContactForm() {
  return (
    <form>
      <label htmlFor='name'>お名前</label>
      <input type='text' id='name' />

      <label htmlFor='email'>メールアドレス</label>
      <input type='email' id='email' />
    </form>
  );
}

テスト・品質保証系

eslint-plugin-jest（テストコード品質の向上）

概要と特徴

Jest テストフレームワークを使用したテストコードの品質を向上させるプラグインです。テストの可読性、保守性、実行効率を改善するルールを提供します。

インストールと設定

bashCopy codeyarn add -D eslint-plugin-jest

javascriptCopy code// .eslintrc.js
module.exports = {
  overrides: [
    {
      files: ['**/*.test.js', '**/*.spec.js'],
      plugins: ['jest'],
      extends: ['plugin:jest/recommended'],
      env: {
        jest: true,
      },
      rules: {
        // テストの記述規則
        'jest/consistent-test-it': ['error', 'test'],
        'jest/prefer-expect-assertions': 'warn',
        'jest/expect-expect': 'error',

        // 非同期テストの適切な処理
        'jest/no-done-callback': 'error',
        'jest/valid-expect-in-promise': 'error',

        // テストの構造化
        'jest/require-top-level-describe': 'error',
        'jest/prefer-to-have-length': 'error',

        // パフォーマンス関連
        'jest/no-identical-title': 'error',
        'jest/no-focused-tests': 'error',
      },
    },
  ],
};

テストコードの改善例

javascriptCopy code// 改善前
describe('User service', () => {
  it('should work', async () => {
    const user = await getUserById(1);
    expect(user).toBeTruthy();
  });

  it('should work', () => {
    // 重複したテストタイトル
    const users = getUsers();
    expect(users.length).toBe(3);
  });
});

// 改善後
describe('User service', () => {
  test('should return user data when valid ID is provided', async () => {
    // Arrange
    const userId = 1;
    const expectedUser = { id: 1, name: 'John Doe' };

    // Act
    const user = await getUserById(userId);

    // Assert
    expect(user).toEqual(expectedUser);
    expect(user.id).toBe(userId);
  });

  test('should return all users from database', () => {
    // Arrange & Act
    const users = getUsers();

    // Assert
    expect(users).toHaveLength(3);
    expect(users).toEqual(
      expect.arrayContaining([
        expect.objectContaining({ id: expect.any(Number) }),
      ])
    );
  });
});

eslint-plugin-testing-library（Testing Library 最適化）

概要と特徴

React Testing Library や DOM Testing Library を使用したテストコードのベストプラクティスを強制し、ユーザー中心のテストアプローチを促進します。

インストールと設定

bashCopy codeyarn add -D eslint-plugin-testing-library

javascriptCopy code// .eslintrc.js
module.exports = {
  overrides: [
    {
      files: ['**/*.test.js', '**/*.spec.js'],
      plugins: ['testing-library'],
      extends: ['plugin:testing-library/react'],
      rules: {
        // 適切なクエリの使用を強制
        'testing-library/prefer-screen-queries': 'error',
        'testing-library/prefer-user-event': 'error',

        // 非同期処理の適切な待機
        'testing-library/await-async-query': 'error',
        'testing-library/no-await-sync-query': 'error',

        // Testing Library のベストプラクティス
        'testing-library/no-debug': 'warn',
        'testing-library/no-dom-import': 'error',
        'testing-library/prefer-presence-queries': 'error',
      },
    },
  ],
};

Testing Library のベストプラクティス例

javascriptCopy code// 改善前
import {
  render,
  getByTestId,
  fireEvent,
} from '@testing-library/react';

test('should handle button click', () => {
  const { container } = render(<Counter />);
  const button = getByTestId(container, 'increment-button');

  fireEvent.click(button);

  const counter = getByTestId(container, 'counter-value');
  expect(counter.textContent).toBe('1');
});

// 改善後
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('should increment counter when button is clicked', async () => {
  const user = userEvent.setup();

  render(<Counter />);

  const incrementButton = screen.getByRole('button', {
    name: /increment/i,
  });

  await user.click(incrementButton);

  expect(screen.getByText('1')).toBeInTheDocument();
});

総合的な設定戦略

プロジェクトタイプ別の推奨組み合わせ

React + TypeScript プロジェクト

javascriptCopy code// .eslintrc.js
module.exports = {
  root: true,
  plugins: [
    'import',
    'unicorn',
    'prefer-arrow',
    'react',
    'react-hooks',
    'jsx-a11y',
    'security',
  ],
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:import/recommended',
    'plugin:import/typescript',
    'plugin:unicorn/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:security/recommended',
  ],
  settings: {
    react: { version: 'detect' },
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
      },
    },
  },
  overrides: [
    {
      files: ['**/*.test.tsx', '**/*.test.ts'],
      plugins: ['jest', 'testing-library'],
      extends: [
        'plugin:jest/recommended',
        'plugin:testing-library/react',
      ],
    },
  ],
};

Vue 3 + TypeScript プロジェクト

javascriptCopy code// .eslintrc.js
module.exports = {
  root: true,
  plugins: ['import', 'unicorn', 'security'],
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'plugin:import/recommended',
    'plugin:unicorn/recommended',
    'plugin:security/recommended',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2021,
  },
  overrides: [
    {
      files: ['**/*.spec.ts'],
      plugins: ['jest'],
      extends: ['plugin:jest/recommended'],
    },
  ],
};

Node.js API プロジェクト

javascriptCopy code// .eslintrc.js
module.exports = {
  root: true,
  plugins: ['import', 'unicorn', 'node', 'security'],
  extends: [
    'eslint:recommended',
    'plugin:import/recommended',
    'plugin:unicorn/recommended',
    'plugin:node/recommended',
    'plugin:security/recommended',
  ],
  env: {
    node: true,
    es2021: true,
  },
  rules: {
    // Node.js 特有の調整
    'unicorn/prefer-module': 'off', // CommonJS プロジェクトの場合
    'node/no-process-env': 'off', // 環境変数の使用を許可
  },
};

段階的な導入とチーム合意

フェーズ 1: 基本設定（プロジェクト開始時）

javascriptCopy code// 最小限の構成から開始
module.exports = {
  plugins: ['import'],
  extends: [
    'eslint:recommended',
    'plugin:import/recommended',
  ],
  rules: {
    // 重要度が高く、影響が少ないルールから開始
    'import/no-unresolved': 'error',
    'import/order': 'warn', // 警告レベルで開始
  },
};

フェーズ 2: 品質向上（チーム慣れ後）

javascriptCopy code// unicorn と security を追加
module.exports = {
  plugins: ['import', 'unicorn', 'security'],
  extends: [
    'eslint:recommended',
    'plugin:import/recommended',
    'plugin:unicorn/recommended',
    'plugin:security/recommended',
  ],
  rules: {
    // 段階的に厳しくする
    'import/order': 'error',
    'unicorn/prevent-abbreviations': 'warn', // まずは警告で
  },
};

フェーズ 3: 最適化（本格運用時）

javascriptCopy code// 全プラグインを統合
module.exports = {
  plugins: [
    'import',
    'unicorn',
    'prefer-arrow',
    'security',
    // フレームワーク固有のプラグイン
  ],
  extends: [
    'eslint:recommended',
    'plugin:import/recommended',
    'plugin:unicorn/recommended',
    'plugin:security/recommended',
  ],
  rules: {
    // 全ルールをエラーレベルに
    'unicorn/prevent-abbreviations': 'error',
    'prefer-arrow/prefer-arrow-functions': 'error',
  },
};

継続的な改善サイクル

定期的な見直しプロセス

jsonCopy code// package.json - 定期実行スクリプト
{
  "scripts": {
    "lint": "eslint src/",
    "lint:fix": "eslint src/ --fix",
    "lint:report": "eslint src/ --format=json --output-file=eslint-report.json",
    "lint:stats": "node scripts/eslint-stats.js"
  }
}

javascriptCopy code// scripts/eslint-stats.js - ESLint 統計レポート
const fs = require('fs');
const report = JSON.parse(
  fs.readFileSync('eslint-report.json', 'utf8')
);

const stats = report.reduce((acc, file) => {
  file.messages.forEach((message) => {
    const rule = message.ruleId || 'syntax-error';
    acc[rule] = (acc[rule] || 0) + 1;
  });
  return acc;
}, {});

console.log('ESLint エラー統計:');
Object.entries(stats)
  .sort(([, a], [, b]) => b - a)
  .slice(0, 10)
  .forEach(([rule, count]) => {
    console.log(`${rule}: ${count}件`);
  });

まとめ

ESLint プラグインを適切に選択・設定することで、コードの品質向上、セキュリティ強化、開発効率の改善を実現できます。この記事で紹介した人気プラグイン 10 選を活用することで、以下の効果が期待できます。

#	プラグイン	主な効果	適用優先度
1	eslint-plugin-import	モジュール管理の最適化	最高
2	eslint-plugin-unicorn	現代的で読みやすいコード	高
3	eslint-plugin-security	セキュリティ脆弱性の検出	最高
4	eslint-plugin-react	React 開発のベストプラクティス	高
5	eslint-plugin-vue	Vue.js 開発の品質向上	高
6	eslint-plugin-node	Node.js 開発の最適化	中
7	eslint-plugin-jsx-a11y	アクセシビリティの強化	高
8	eslint-plugin-jest	テストコード品質の向上	中
9	eslint-plugin-testing-library	Testing Library 最適化	中
10	eslint-plugin-prefer-arrow	関数記法の統一	低

導入時のポイント

段階的な導入 一度にすべてのプラグインを導入するのではなく、チームの習熟度に応じて段階的に追加していくことが重要です。

プロジェクトに応じた選択 すべてのプラグインが必要というわけではありません。プロジェクトの性質と開発チームのニーズに応じて適切に選択しましょう。

継続的な改善 ESLint の設定は一度設定して終わりではありません。定期的に見直し、新しいプラグインの導入や既存設定の最適化を行いましょう。

適切なプラグイン選択により、より良い開発環境を構築し、チーム全体の生産性向上を実現してください。

関連リンク

• ESLint 公式プラグインディレクトリ
• eslint-plugin-import 公式ドキュメント
• eslint-plugin-unicorn 公式ドキュメント
• eslint-plugin-react 公式ドキュメント
• eslint-plugin-vue 公式ドキュメント
• eslint-plugin-security 公式ドキュメント
• eslint-plugin-jsx-a11y 公式ドキュメント
• eslint-plugin-jest 公式ドキュメント
• eslint-plugin-testing-library 公式ドキュメント </rewritten_file>