Go to Qiita Advent Calendar Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@mk-mokumoku(渡邊琢資)

ESLint設定ファイル `eslint.config.mjs` の解説 🚀

Posted at

このeslint.config.mjsファイルは、ESLintの新しいフラット設定ファイル形式で書かれており、JavaScript/TypeScriptコードの品質と一貫性を保証するためのルールを定義しています。特に、React Nativeプロジェクト向けに設定され、Prettierとの連携も考慮されています。🌟

📝 ファイルの全体像と目的

この設定ファイルは、以下の目的を持っています。

  • コード品質の維持: ESLintのルールを使って、コードの潜在的なエラーやスタイル違反を検出します。
  • コードフォーマットの統一: PrettierをESLintと連携させることで、チーム全体で統一されたコードフォーマットを強制します。
  • React Nativeに特化: React Nativeプロジェクトでよく使われる@react-native設定を継承しています。
  • モジュール形式: .mjs拡張子を使用しているため、ES Modules形式で記述されています。

🚀 各セクションの詳細解説

1. インポートと初期設定 

import { fixupConfigRules } from '@eslint/compat';
import { FlatCompat } from '@eslint/eslintrc';
import js from '@eslint/js';
import prettier from 'eslint-plugin-prettier';
import { defineConfig } from 'eslint/config';
import path from 'node:path';
import { fileURLToPath } from 'node:url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: js.configs.recommended,
  allConfig: js.configs.all,
});
  • fixupConfigRules: 従来の設定形式のルールを新しいフラット設定形式に変換するために使用されます。🔄
  • FlatCompat: 従来のESLint設定（.eslintrc.jsなど）を新しいフラット設定に変換するためのユーティリティです。これにより、既存の豊富なプラグインや共有設定を新しい形式で利用できます。🤝
    • baseDirectory: 設定ファイルの基準ディレクトリを指定します。
    • recommendedConfig, allConfig: ESLintの推奨設定や全てのルールを設定する際に利用します。
  • js: ESLintの基本的なJavaScriptルールセットを提供します。📚
  • prettier: ESLint内でPrettierを実行し、コードフォーマットに関する問題をESLintのエラーとして報告するためのプラグインです。💅
  • defineConfig: ESLintのフラット設定を定義するためのヘルパー関数です。これにより、型チェックや補完の恩恵を受けられます。✍️
  • path, fileURLToPath, import.meta.url: ES Modules環境で__filenameや__dirnameのようなパス情報を取得するために使用されます。これは、FlatCompatがbaseDirectoryを正しく解決するために必要です。📂

2. メイン設定（export default defineConfig）

この配列の中に、個々の設定オブジェクトを定義します。

2.1. メインルールセット 
{
  extends: fixupConfigRules(compat.extends('@react-native', 'prettier')),
  plugins: { prettier },
  rules: {
    'react/react-in-jsx-scope': 'off',
    'prettier/prettier': [
      'error',
      {
        quoteProps: 'consistent',
        singleQuote: true,
        tabWidth: 2,
        trailingComma: 'es5',
        useTabs: false,
      },
    ],
  },
}
  • extends: 他の設定ファイルを継承します。
    • fixupConfigRules(compat.extends('@react-native', 'prettier')):
      • compat.extends('@react-native', 'prettier')：
        • @react-native: React Nativeプロジェクトに特化したESLintルールセットを継承します。これにより、React Native特有の記述に対するチェックが行われます。📱
        • prettier: eslint-plugin-prettierの推奨設定を継承し、PrettierのルールがESLintのエラーとして報告されるようになります。🚨
      • fixupConfigRules(): これらの従来の形式の設定を新しいフラット設定形式に適合させます。
  • plugins: 使用するESLintプラグインを登録します。
    • prettier: eslint-plugin-prettierを有効にします。✨
  • rules: 継承した設定やプラグインのルールを上書きしたり、新しいルールを追加したりします。
    • 'react/react-in-jsx-scope': 'off':
      • 通常、JSXを使用するファイルではimport React from 'react'が必要ですが、新しいJSXトランスフォームでは不要になりました。このルールを'off'にすることで、その警告を無効にします。これにより、React 17以降で不要なインポートを避けられます。✂️
    • 'prettier/prettier': [...]:
      • Prettierのルールを'error'レベルで設定します。つまり、Prettierのルールに違反するとESLintのエラーとして扱われます。これにより、コードフォーマットが強制されます。厳格なフォーマットを求める場合に有効です。📏
      • Prettierオプション:
        • quoteProps: 'consistent': オブジェクトのプロパティの引用符のスタイルを一貫させます。
        • singleQuote: true: 文字列を単一引用符（'）で囲むように強制します。 'hello' ではなく "hello"。
        • tabWidth: 2: インデントの幅を2スペースに設定します。
        • trailingComma: 'es5': ES5で有効な場所（オブジェクト、配列など）で末尾のコンマを付けます。
        • useTabs: false: スペースを使用してインデントします（タブは使用しません）。
2.2. 無視するファイル設定 
{
  ignores: [
    'node_modules/',
    'lib/'
  ],
}
  • ignores: ESLintがチェックをスキップするファイルやディレクトリを指定します。これにより、ビルドされたファイルや依存関係のファイルなど、チェックする必要のないファイルを無視できます。🗑️
    • 'node_modules/': npmパッケージがインストールされるディレクトリです。これらのファイルは通常、変更されないためチェックする必要はありません。
    • 'lib/': プロジェクトによっては、コンパイル済みのコードやライブラリの出力先として使われることがあります。これらのファイルも通常、ESLintのチェック対象外とします。

💡 eslint.config.mjs を使用した場合と使用しない場合の比較

ESLintフラット設定 (eslint.config.mjs) を使用した場合

// 例: src/components/MyComponent.js
import { View, Text } from 'react-native';

const MyComponent = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
}; // ← 末尾のセミコロンがないが、Prettier設定により自動修正されるか、ESLintでエラーになる

export default MyComponent;

効果:

  • 自動フォーマット: eslint --fixコマンドを実行するか、エディタの保存時設定によって、Prettierのルールに従ってコードが自動的にフォーマットされます（例: 末尾にセミコロンが追加される）。
  • React Nativeのルール適用: React Native特有の記述に対する警告やエラーが適切に表示されます。
  • JSXスコープの警告抑制: react/react-in-jsx-scopeが無効になっているため、React 17以降のプロジェクトでimport Reactが不要な場合に警告が出ません。
  • コミット前チェック: lefthook.ymlと組み合わせることで、コミット前にこれらのチェックが自動実行され、フォーマットやルール違反のコードがリポジトリに入るのを防ぎます。🔒
# ESLintの実行例
npx eslint . --fix # フォーマットと一部の修正可能なルールを自動で適用

ESLint設定を使用しない場合（または不適切な設定の場合）

// 例: src/components/MyComponent.js
import { View, Text } from 'react-native';

const MyComponent = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
} // ← 末尾のセミコロンがない
export default MyComponent;

:::note alert | message alert
問題点:

  • コードスタイルの不統一: 開発者ごとにコードの書き方が異なり、例えばセミコロンの有無、インデントのスペース数、引用符の種類などがバラバラになります。これにより、コードレビューが非効率になったり、可読性が低下したりします。📉
  • 潜在的なバグの見逃し: ESLintによる静的解析が行われないため、開発中に見落とされがちな潜在的なエラーやアンチパターンがそのままコードベースに残る可能性があります。🐛
  • 手動でのフォーマット: Prettierのようなツールを使わない場合、手動でコードをフォーマットする手間が発生し、非常に非効率です。⏳
  • プロジェクト固有の警告への対応不足: React Nativeのような特定のフレームワークに特化したルールが適用されないため、そのフレームワーク特有のベストプラクティスが守られず、パフォーマンスや安定性に問題が生じる可能性があります。⚠️

このeslint.config.mjsは、モダンなJavaScript/TypeScript開発において、コード品質と開発体験を向上させるための非常に効果的な設定と言えます。🌈

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?