📝

【ESLint】ESLint ざっくりメモ

に公開
JavaScript
TypeScript
VS Code
ESLint
tech

はじめに

  • eslintについてざっくりまとめます

概要

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

静的解析について

  • 静的解析(静的テスト)ツール

    • 静的：ソフトを実行せずに解析を行う
    • 解析：テスト。ソースコードのチェック。
    • Linterと呼ばれる

  • できること

    • 構文エラー検知
    • コーディング規約の統一
    • (フォーマット)
      • Prettierのほうがいいっぽい

ESLintについて

  • 下記項目で構成される

  • Rules: エラーの定義

  • Plugins: 特定ライブラリ用のルール追加

    • eslint-plugin-react: reactのルール

  • Parser: プログラム構造をツリー形式に変換

    • ts: @typescript-eslint/parser を利用

  • Configs: ルールセット

    • eslint:recommended: 公式推奨設定

種類

  • Prettier同様、VSCode拡張機能とnpm(本体)がある

    • 本体: プロジェクト一括静的解析
    • VSCode拡張機能: 自動保存時に静的解析

  • VSCodeで利用する場合でも、npmでインストールする必要がある

npm

  • 本体。VSCode拡張機能にも参照される

VSCode

  • ESLint-VSCode

  • 全プロジェクトで、保存時に自動的に静的解析を行う

本体

セットアップ

  • vite経由で作成する場合、eslintもインストールされる
    • 後述設定ファイルも作成される
npm init @eslint/config@latest

設定ファイル

  • eslint.config.tsに記述する
import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
import { defineConfig, globalIgnores } from "eslint/config";

export default defineConfig([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
  },
]);

実行

npm eslint .
  • package.jsonに登録
    • viteは作成時に自動登録される
  "scripts": {
    "lint": "eslint .",
  },

npm run lint
  • 結果が表示される
  1:10  error  'useState' is defined but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (1 error, 0 warnings)

VSCode拡張機能

セットアップ

  • 前提：npm側でインストール済み
  1. Ctrl + Shit + X
  2. eslintと検索
  3. インストール

使い方

  • 保存すると自動的に静的解析してくれる
  • 誤ったコードを入力して、波線でエラー、警告出ればOK

'useState' is defined but never used.eslint (@typescript-eslint/no-unused-vars)

設定項目

globalIgnores

Ignore Files - ESLint - Pluggable JavaScript Linter

  • 静的解析対象外ファイル、ディレクトリの指定
export default defineConfig([
  globalIgnores(["dist"]),

files

Configuration Files - ESLint - Pluggable JavaScript Linter

  • 静的対象ファイルの指定
  • filesの指定ごとにrulesを分けることができる
  • ignoresでfiles指定範囲内のファイルを対象外とする
// eslint.config.js
import { defineConfig } from "eslint/config";

export default defineConfig([
	// matches all files ending with .js
	{
		files: ["**/*.js"],
		rules: {
			semi: "error",
		},
	},

	// matches all files ending with .js except those in __tests
	{
		files: ["**/*.js"],
		ignores: ["__tests/**"],
		rules: {
			"no-console": "error",
		},
	},
]);
  • ts, reactの場合はts, tsxを指定する
files: ["**/*.{ts,tsx}"],

rules

    rules: {
        // 行末にセミコロンないとエラー
        semi: "error",
        
        // === ではなく == だとエラー
        eqeqeq: "error"
    },

extends

Combine Configs - ESLint - Pluggable JavaScript Linter

  • 事前定義されたルールを適用する
    • インストールしたパッケージのルールなど
  • importで設定参照
import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
import { defineConfig, globalIgnores } from "eslint/config";

export default defineConfig([
  {
    files: ['**/*.jsx', '**/*.tsx'],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
    ],
  },
]);

plugins

Configure Plugins - ESLint - Pluggable JavaScript Linter

  • extendsと似ている
    • extends: 参照してルール有効化
    • plugins: 参照できるようにするのみ
      • ルールは有効にならない
import react from 'eslint-plugin-react';

export default [
  {
    files: ['**/*.jsx', '**/*.tsx'],
    plugins: {
      // 登録
      'my-react-plugin': react,
    },
    rules: {
      // 名前 / ルール名 で参照
      'my-react-plugin/jsx-uses-react': 'error',
      'my-react-plugin/no-direct-mutation-state': 'error',
    },
  },
];

languageOptions

  • ecmaVersion: JSのバージョン指定
  • globals: グローバル変数の登録
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },

よさげルール

参考

さいごに

  • ガッチリルール決めたいけど、時間溶けそう
  • 本格利用し始めたら追記します

Discussion