🦹

最低限の flat config（まずは no-unused-imports を動かす）

2024/12/26に公開

TypeScript

ESLint

flatconfig

tech

はじめに

Next.js 最新版（15.1系）で始めると、eslint は9系になるので flat config で設定しなくてはなりません。

確認した技術スタックは下記のとおりです。

next: 15.1.2
react: 19.0.0
react-dom: 19.0.0

設定していく

今回は息子のためにトイプログラムを作りたいだけなので、
とりあえず no-unused-imports を効かすためにパッケージのインストールと設定をしていきます。

$ npm i -D typescript-eslint eslint-plugin-unused-imports

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

esling.config.mjs

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import tseslint from "typescript-eslint";
import unuserdPlugin from "eslint-plugin-unused-imports";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

export default tseslint.config({
  extends: [
    ...compat.extends("next/core-web-vitals", "next/typescript"),
    ...tseslint.configs.strict,
    ...tseslint.configs.stylistic,
  ],
  plugins: { "unused-imports": unuserdPlugin },
  rules: {
    "@typescript-eslint/no-unused-vars": "off",
    "unused-imports/no-unused-imports": "error",
  },
});

これで一旦動きました。

最低限の flat config（まずは no-unused-imports を動かす）

はじめに

設定していく

参考

Discussion