eslint

June 17, 2024

Table of Contents

• eslit 実行
• 並び替え

ESLint

• JavaScriptとTypeScriptのコード品質とスタイルをチェックするための静的解析ツール
• ESLintはコードを解析し、潜在的なエラーやコードスタイルの問題を検出
• 一貫性のあるコードを書き、バグを早期に発見する

主な機能 コード品質の向上: ESLintは、構文エラーや潜在的なバグを検出し、コード品質を向上させます。

コーディングスタイルの一貫性: チーム全体でコーディングスタイルを統一するためのルールを定義し、そのルールに基づいてコードをチェックします。

プラグインのサポート: ESLintは豊富なプラグインをサポートしており、React、Vue.js、TypeScriptなど、さまざまなフレームワークや言語に対応しています。

自動修正: 一部の問題は自動的に修正することができるため、開発者の負担を軽減します。

eslit 実行

eslint 'src/**/*.{js,jsx,ts,tsx}' --fix

並び替え

module.exports = {
  parser: '@typescript-eslint/parser', // TypeScriptパーサーの設定
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  plugins: ["simple-import-sort", "import"],
  parserOptions: {
    ecmaVersion: 2020, // 最新のECMAScript仕様を使用
    sourceType: 'module', // モジュールを使用
    ecmaFeatures: {
      jsx: true // JSXを使用
    }
  },
  settings: {
    react: {
      version: 'detect' // インストールされているReactのバージョンを自動検出
    }
  },
  rules: {
    // 必要に応じてルールを追加
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index"
        ],
        pathGroups: [
          {
            pattern: '@root/**',
            group: 'parent',
            position: 'before',
          },
          {
            pattern: '@type/**',
            group: 'parent',
            position: 'before',
          },
        ],
        pathGroupsExcludedImportTypes: ['builtin'],
        alphabetize: {
          order: 'asc',
        },
        "newlines-between": "always"
      }
    ],
    "import/no-unresolved": "off"
  },
  env: {
    "browser": true,
  }
};