Nextjs + Eslint | 升级 eslint 到 v9

ccforeverd1112
844 阅读1分钟

最近新搞了个 nextjs 项目, 发现 vscode 的 eslint 插件嗝屁了, 由 eslint 升级到 9.2.0 版本引起的, 花了点时间解决了, 下面是解决后的配置文件, 先放在前面, 注意是 eslint.config.js

import { createRequire } from 'node:module'

const require = createRequire(import.meta.url)

import { fixupConfigRules } from '@eslint/compat'
import { FlatCompat } from '@eslint/eslintrc'
import js from '@eslint/js'
// NOTE react 插件报错, 有了 next 可以不用 react
// const reactRecommended = require('eslint-plugin-react/configs/recommended')
// const reactRecommended = require('eslint-plugin-react/configs/recommended.js')
// import { default as reactRecommended } from 'eslint-plugin-react/configs/recommended'
// import reactRecommended from 'eslint-plugin-react/configs/recommended'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import pluginSimpleImportSort from 'eslint-plugin-simple-import-sort'
import pluginUnusedImports from 'eslint-plugin-unused-imports'
import tsEslint from 'typescript-eslint'

const compat = new FlatCompat()

const configNext = [
  // NOTE index.js 无法引入, 非常奇怪
  // ...fixupConfigRules(compat.extends('plugin:@next/next')),
  ...fixupConfigRules(compat.extends('plugin:@next/next/core-web-vitals')),
]

export default [
  {
    ignores: ['**/node_modules/', '.git/', '**/dist/', '**/.DS_Store/', '**/.next/', '*.scss'],
  },
  ...tsEslint.config(js.configs.recommended, ...tsEslint.configs.recommended),
  // reactRecommended,
  ...configNext,
  {
    plugins: {
      'simple-import-sort': pluginSimpleImportSort,
      'unused-imports': pluginUnusedImports,
    },
    rules: {
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      '@typescript-eslint/no-non-null-assertion': 'off',
      '@typescript-eslint/no-unused-vars': 'off',
      'no-console': 'warn',
      'no-unused-vars': 'off',
      'no-html-link-for-pages': 'off',
      // NOTE react 不使用时, 需要注释所有 react 相关的规则, 不然会报错
      // 'react/display-name': 'off',
      // 'react/jsx-curly-brace-presence': [
      //   'warn',
      //   {
      //     children: 'never',
      //     props: 'never',
      //   },
      // ],
      // 'react/no-unescaped-entities': 'off',
      // 'react/prop-types': 'off',
      // 'react/require-render-return': 'off',
      'simple-import-sort/exports': 'warn',
      'simple-import-sort/imports': [
        'warn',
        {
          groups: [
            ['^@?\\w', '^\\u0000'],
            ['^.+\\.s?css$'],
            ['^@/lib', '^@/hooks'],
            ['^@/data'],
            ['^@/components', '^@/container'],
            ['^@/store'],
            ['^@/'],
            [
              '^\\./?$',
              '^\\.(?!/?$)',
              '^\\.\\./?$',
              '^\\.\\.(?!/?$)',
              '^\\.\\./\\.\\./?$',
              '^\\.\\./\\.\\.(?!/?$)',
              '^\\.\\./\\.\\./\\.\\./?$',
              '^\\.\\./\\.\\./\\.\\.(?!/?$)',
            ],
            ['^@/types'],
            ['^'],
          ],
        },
      ],
      'unused-imports/no-unused-imports': 'warn',
      'unused-imports/no-unused-vars': [
        'warn',
        {
          args: 'after-used',
          argsIgnorePattern: '^_',
          vars: 'all',
          varsIgnorePattern: '^_',
        },
      ],
    },
  },
  eslintPluginPrettierRecommended,
]

参考, 这是之前的配置文件 .eslintrc:

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "next",
    "next/core-web-vitals",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@tanstack/eslint-plugin-query/recommended",
    "prettier"
  ],
  "globals": {
    "JSX": true,
    "React": true
  },
  "plugins": ["@typescript-eslint", "simple-import-sort", "unused-imports"],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "no-console": "warn",
    "no-unused-vars": "off",
    "react/display-name": "off",
    "react/jsx-curly-brace-presence": [
      "warn",
      {
        "children": "never",
        "props": "never"
      }
    ],
    "react/no-unescaped-entities": "off",
    "react/prop-types": "off",
    "simple-import-sort/exports": "warn",
    "simple-import-sort/imports": [
      "warn",
      {
        "groups": [
          ["^@?\\w", "^\\u0000"],
          ["^.+\\.s?css$"],
          ["^@/lib", "^@/hooks"],
          ["^@/data"],
          ["^@/components", "^@/container"],
          ["^@/store"],
          ["^@/"],
          [
            "^\\./?$",
            "^\\.(?!/?$)",
            "^\\.\\./?$",
            "^\\.\\.(?!/?$)",
            "^\\.\\./\\.\\./?$",
            "^\\.\\./\\.\\.(?!/?$)",
            "^\\.\\./\\.\\./\\.\\./?$",
            "^\\.\\./\\.\\./\\.\\.(?!/?$)"
          ],
          ["^@/types"],
          ["^"]
        ]
      }
    ],
    "unused-imports/no-unused-imports": "warn",
    "unused-imports/no-unused-vars": [
      "warn",
      {
        "args": "after-used",
        "argsIgnorePattern": "^_",
        "vars": "all",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

有些问题使用 // NOTE 标记在了代码里, 参考如下:

avatar
文章
阅读
粉丝