eslint扁平化配置

扁平化配置模式Vue ESlint示例配置

以下是一个适用于 Vue 项目的常用 ESLint 配置文件（eslint.config.mjs），支持 Vue 3 和 TypeScript。
编辑器集成建议：
在 VS Code 中安装以下插件：ESLint、Prettier - Code formatter、Volar (Vue 语言支持)。
以下是一个适用于 Vue 项目的常用 ESLint 配置文件（eslint.config.mjs），支持 Vue 3 和 TypeScript。
在.vscode\settings.json中添加
{
“editor.defaultFormatter”: “esbenp.prettier-vscode”,
“editor.formatOnSave”: true,
“prettier.requireConfig”: true
}

安装依赖包

npm install -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-vue @vue/eslint-config-typescript 

根目录新建eslint.config.mjs

import vueParser from 'vue-eslint-parser'
import tsParser from '@typescript-eslint/parser'
import vuePlugin from 'eslint-plugin-vue'
import tsPlugin from '@typescript-eslint/eslint-plugin'
import globals from 'globals'

export default [
  {
    files: ['**/*.vue', '**/*.ts', '**/*.js'],//包含的文件类型
     /* 针对语言进行配置 */
    languageOptions: {
      globals: {
        ...globals.node,//node环境运行
        ...globals.browser,//浏览器环境运行
        ...globals.es2021//es2021环境运行
      },
      parser: vueParser, //顶层vue解析器
      parserOptions: {
        parser: tsParser,//嵌套typescript解析器
        ecmaVersion: 'latest',//指定es版本
        sourceType: 'module',//指定源码类型,模块化
        // extraFileExtensions: ['.vue']//指定额外的文件扩展名
      }
    },
    plugins: {
      vue: vuePlugin,//指定vue插件，rules中使用
      '@typescript-eslint': tsPlugin//指定typescript插件，rules中使用
    },
    rules: {
      'vue/multi-word-component-names': 'off',//关闭vue组件名称中多个单词的限制
      'vue/require-default-prop': 'off',//关闭vue组件的props必须有默认值
      'vue/singleline-html-element-content-newline': 'off',//关闭vue单行html元素内容换行限制
      //限制每行 HTML 元素上允许的最大属性数量
      //'vue/max-attributes-per-line': [
      //  'error',
      //  {
      //    singleline: 3,// 单行模式最大属性数
      //    multiline: 1// 多行模式每行1个属性
      //  }
      //],
      '@typescript-eslint/no-explicit-any': 'off',//关闭typescript禁止any类型
      //需要声明但暂不使用某些参数或变量（如回调函数的未使用参数）
      // 通过添加前缀 _ 并配置此规则，可避免 ESLint 误报
      '@typescript-eslint/no-unused-vars': [
        'error',
        { 
          argsIgnorePattern: '^_', //忽略以 _ 下划线开头的函数参数命名检查
          varsIgnorePattern: '^_' //忽略以 _ 下划线开头的变量命名检查
        }
      ],
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',//生产环境下关闭console警告
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'//生产环境下关闭debugger警告
    }
  },
  {
    ignores: ['**/dist', '**/node_modules']
  }
]

Prettier

若需与eslint配合使用，则在 .vscode/settings.json 中配置自动格式化
安装解决冲突的依赖

npm i eslint-config-prettier eslint-plugin-prettier -D

配套的 Prettier 配置：
在项目根目录创建 .prettierrc.json 与 ESLint 配合使用(json文件中不允许注释)：

{
  semi: true,//在语句末尾自动添加分号
  singleQuote: true,//强制使用单引号而非双引号包裹字符串，统一代码风格
  printWidth: 100,//每行代码的最大宽度限制为100字符，超出时将自动换行格式化
  tabWidth: 2,//缩进宽度设置为2个空格
  trailingComma: 'none',//禁止在对象或数组最后一项后添加尾随逗号，如 {a:1, b:2} 而非 {a:1, b:2,}
  arrowParens: 'avoid',//当箭头函数仅有一个参数时省略括号，例如 x => x+1 而非 (x) => x+1
  endOfLine: 'auto'//自动识别并适配操作系统的换行符（CRLF/LF），确保跨平台一致性
}

运行以下命令检查项目文件是否符合规则

npx prettier --check .

若输出列出未格式化的文件，则说明配置未完全生效‌.
强制格式化测试

npx prettier --write .

文件内容被修改即表示 Prettier 正常工作‌

extends 继承

在 ESLint 扁平化配置中，extends 不能嵌套在其他配置对象内部，必须直接作为顶级属性使用

import js from "@eslint/js";
import pluginVue from "eslint-plugin-vue";
import tsPlugin from '@typescript-eslint/eslint-plugin';

export default [
  js.configs.recommended,
  ...pluginVue.configs['flat/recommended'],
  ...tsPlugin.configs.recommended,
  {
    rules: {
      "vue/multi-word-component-names": "off"
    }
  }
];

ignores 继承

扁平化配置要求 ignores 必须作为独立配置对象存在，且需位于数组顶层。否则可能不生效。

// 正确示例（必须作为数组元素独立存在）
import js from "@eslint/js";

export default [
  {
     "**/node_modules/**",
      "**/dist/**",
      "**/*.config.js",
      "**/*.config.mjs"
  },
  js.configs.recommended  // 其他配置
]

globals 全局变量

需确保已安装 globals 包以使用预定义环境变量（如 browser/node）

npm install globals

环境变量

环境变量需通过 languageOptions.globals 显式导入，而非传统配置的 env 字段

import globals from 'globals';

export default [{
  languageOptions: {
    globals: {
      ...globals.browser,  // 浏览器环境变量（如 window、document）
      ...globals.node      // Node.js 环境变量（如 process、require）
    }
  }
}]

全局变量

‌权限标记规范

• “readonly” 替代旧版 false（禁止覆盖）
• “writable” 替代旧版 true（允许修改）

类型检查‌：配合 @typescript-eslint 时需在 parserOptions 中同步声明类型
若多个配置存在同名变量，后加载的配置会覆盖前者
修改配置后建议运行 npx eslint --cache --cache-location .eslintcache --fix 确保生效

import globals from 'globals';

export default [{
  languageOptions: {
    globals: {
      ...globals.browser,  // 继承浏览器环境变量
      MY_VAR: "writable"   // 自定义变量需明确权限
    }
  }
}]

parserOptions 定义代码解析器

parserOptions 的配置方式已从传统的顶层键迁移至 languageOptions 对象内，用于定义代码解析器的相关参数‌的配置方式已从传统的顶层键迁移至 languageOptions 对象内，用于定义代码解析器的相关参数‌。

import tsEslintParser from "@typescript-eslint/parser";
import vueEslintParser from "vue-eslint-parser";

export default [{
	files: ['**/*.vue', '**/*.ts', '**/*.js'],
  /* 针对语言进行配置 */
    languageOptions: {
      /* 指定解析器 */
      parser: vueEslintParser,//顶层使用 Vue 解析器
      /* 指定解析器 */
      parserOptions: {
        /* 解析器的语法parser配置 */
        parser: tsEslintParser,// 嵌套指定 TS 解析器
        project: "./tsconfig.json",  // 建议补充，指定 TS 配置文件
        extraFileExtensions: ['.vue']  // 可不配置，包含 Vue 文件类型
        sourceType: "module",// 模块类型
        ecmaVersion: "latest", // ECMAScript 版本    
      	ecmaFeatures: { jsx: true }  // 启用 JSX 支持
      },
    }
}]

代码中需要安装的包 npm install -D eslint-plugin-vue @typescript-eslint/parser