Nextjs 配置 eslint v9 配合 prettier

初始化项目

初始化 Nextjs 项目时选择使用 eslint

npx create-next-app@latest
# or
pnpm dlx create-next-app@latest

# 选择使用 ESLint
Would you like to use ESLint? No / Yes (选择 Yes)

安装 eslint

如果在上一步中选择了使用 eslint，则此过程可以忽略，否则需要手动安装 eslint

npm install --save-dev eslint eslint-config-next @eslint/eslintrc
# or
pnpm add --save-dev eslint eslint-config-next @eslint/eslintrc

在项目根目录新建 eslint.config.mjs 文件，并添加以下内容：

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

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

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

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
];

export default eslintConfig;

初始化 prettier

安装 prettier

npm install --save-dev prettier
# or
pnpm add --save-dev prettier

在项目根目录新建 .prettierrc 文件，并添加配置，这里贴一下我的配置：

{
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "trailingComma": "es5",
  "eol-last": 0,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "no-param-reassign": 2,
  "no-multiple-empty-lines": [
    2,
    {
      "max": 2
    }
  ]
}

如果你使用了 tailwindcss，则可以安装 prettier-plugin-tailwindcss 插件，并添加到 .prettierrc 文件中，用来格式化 tailwindcss 的类名：

npm install --save-dev prettier-plugin-tailwindcss
# or
pnpm add --save-dev prettier-plugin-tailwindcss

并在 .prettierrc 文件中添加以下配置：

{
  "plugins": [
    "prettier-plugin-tailwindcss"
  ],
}

配置eslint

主要添加了 eslint-plugin-import-x 插件，用来格式化 import 语句

npm install --save-dev eslint-plugin-import-x eslint-import-resolver-typescript
# or
pnpm add --save-dev eslint-plugin-import-x eslint-import-resolver-typescript

在 eslint.config.mjs 文件中添加以下配置，这里贴一下我的自定义 import 顺序的配置：

import tsParser from '@typescript-eslint/parser'
import eslintPluginImportX from 'eslint-plugin-import-x'

const eslintConfig = [
  // ...
  eslintPluginImportX.flatConfigs.recommended,
  eslintPluginImportX.flatConfigs.typescript,
  {
    files: ['**/*.{js,mjs,cjs,jsx,ts,tsx}'],
    ignores: ['eslint.config.js'],
    languageOptions: {
      parser: tsParser,
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    rules: {
      'import-x/no-dynamic-require': 'warn',
      'import-x/no-nodejs-modules': 'off',
      'import-x/no-named-as-default-member': 'off',
      'import-x/order': [
        'warn',
        {
          // 对导入模块进行分组，分组排序规则如下
          groups: [
            'builtin', // 内置模块
            'external', // 外部模块
            'internal', //内部引用
            'parent', //父节点依赖
            'sibling', //兄弟依赖
            'index', // index文件
            'type', //类型文件
            'unknown',
          ],
          //通过路径自定义分组
          pathGroups: [
            {
              pattern: '**.{scss,css,less}',
              patternOptions: { matchBase: true },
              group: 'unknown',
              position: 'after',
            },
            {
              pattern: '@/**',
              group: 'internal',
              position: 'before',
            },
            {
              pattern: 'react**',
              group: 'external',
              position: 'before',
            },
            {
              pattern: 'react**/**',
              group: 'external',
              position: 'before',
            },
          ],
          pathGroupsExcludedImportTypes: ['react'],
          distinctGroup: false,
          'newlines-between': 'always',
          alphabetize: {
            order: 'asc',
            orderImportKind: 'asc',
          },
        },
      ],
    },
  },
  // ...
];

添加了 eslint-config-prettier 插件和 eslint-plugin-prettier 插件，用来禁用与 prettier 冲突的规则与提示 prettier 的格式化。

npm install --save-dev eslint-config-prettier eslint-plugin-prettier
# or
pnpm add --save-dev eslint-config-prettier eslint-plugin-prettier

在 eslint.config.mjs 文件中添加以下配置：

import eslintConfigPrettier from 'eslint-config-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

const eslintConfig = [
  // ...
  ...compat.extends('next/core-web-vitals', 'next/typescript', 'prettier'),
  eslintConfigPrettier,
  eslintPluginPrettierRecommended,
  {
    rules: {
      'prettier/prettier': 'warn',
    },
  },
  // ...
]

另外再贴一下我的其他自定义规则配置：

{
  rules: {
    'prettier/prettier': 'warn',
    'prefer-template': 'warn',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-unused-vars': [
      'warn',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
        caughtErrorsIgnorePattern: '^_',
      },
    ],
  },
},