Eslint v9 扁平化配置学习

中文官网：ESLint 中文网

安装和配置

根据官网操作：eslint.nodejs.cn/docs/latest...

配置

当我我们运行完pnpm create @eslint/config@latest后会生成一个文件：

eslint.config.mjs:

import js from '@eslint/js'
import globals from 'globals'
import { defineConfig } from 'eslint/config'

export default defineConfig([
  {
    files: ['**/*.{js,mjs,cjs}'],
    plugins: { js },
    extends: ['js/recommended', 'prettier'],
    languageOptions: { globals: globals.browser },
])

这份文件是个很基础的 flat config 模板。

不过注意几个细节 ------ 它里面有一些地方实际上是"旧写法"，需要我们手动升级。

1. extends: ['js/recommended'] 在 Flat Config 中正确写法

在 旧的 .eslintrc.js 里我们用：

extends: ['eslint:recommended']

但在 Flat Config 里，extends 不再支持这种字符串形式。

👉 取而代之的是直接引入配置对象，例如：

js.configs.recommended

2. Flat Config 的结构是一个数组

每个数组元素就是一个"配置层"，后面的层会覆盖前面的层。

所以配置文件应该像这样：

import js from '@eslint/js'
import globals from 'globals'
import eslintConfigPrettier from 'eslint-config-prettier'
import { defineConfig } from 'eslint/config'

export default defineConfig([
  // JS 推荐规则
  js.configs.recommended,

  // Prettier 兼容配置（用于关闭与 Prettier 冲突的规则）
  eslintConfigPrettier,

  // 自定义项目规则（在最后）
  {
    files: ['**/*.{js,mjs,cjs}'],
    languageOptions: {
      globals: globals.browser,
    },
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
    },
  },
])

pretiier安装：安装 · Prettier 中文网
eslint-config-prettier安装：github.com/prettier/es...

3. Flat Config 与旧 .eslintrc 的核心区别

旧版 .eslintrc	新版 eslint.config.js (Flat)
extends 是字符串（如 "eslint:recommended"）	直接引入模块配置对象
plugins 是数组	plugins 是对象（key = 名称, value = 插件本体）
自动递归继承	你需要手动合并数组层级
配置分散、难调试	纯 JS/ESM 文件，可逻辑控制

举个例子：

plugins: ['vue'] // ❌ 旧写法
plugins: { vue: pluginVue } // ✅ 新写法

4. Flat Config 里添加 Vue

pnpm i eslint-plugin-vue -D

是否要支持vue，在刚开始进行pnpm create @eslint/config@latest时就可以选。

import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import globals from 'globals'
import eslintConfigPrettier from 'eslint-config-prettier'
import { defineConfig } from 'eslint/config'

export default defineConfig([
  js.configs.recommended,
  pluginVue.configs['flat/essential'], // Vue 推荐配置
  eslintConfigPrettier,

  {
    files: ['**/*.{js,vue}'],
    languageOptions: {
      globals: globals.browser,
    },
    rules: {
      'no-console': 'warn',
      'vue/multi-word-component-names': 'off', // 禁用多词规则
    },
  },
])

5.配置typescript支持

官网：Getting Started | typescript-eslint

// eslint.config.mjs
// @ts-check
import eslint from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import tseslint from 'typescript-eslint'
import eslintConfigPrettier from 'eslint-config-prettier'
import globals from 'globals'
import { defineConfig } from 'eslint/config'

export default defineConfig([
  // 基础 JS 规则
  eslint.configs.recommended,

  // TypeScript 推荐规则
  ...tseslint.configs.recommended, // 或 strict, stylistic

  // Vue 规则
  pluginVue.configs['flat/essential'],

  // Prettier 关闭冲突规则
  eslintConfigPrettier,

  // 自定义规则
  {
    files: ['**/*.{js,ts,vue}'],
    languageOptions: {
      parser: tseslint.parser, // 用 ts parser 支持 <script lang="ts">
      parserOptions: {
        projectService: true, // 如果你启用了 typed linting
        tsconfigRootDir: import.meta.dirname,
      },
      globals: globals.browser,
    },
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
      'vue/multi-word-component-names': 'off',
    },
  },
])