Vue3+TypeScript 项目中，配置 ESLint

为 Vue3 + TypeScript 项目配置符合现代标准的 ESLint

一、完整配置流程

1. 初始化项目 ESLint

npx eslint --init

选择项包括：

系统会自动生成 eslint.config.js，但还需手动完善。

---

2. 遇到的问题和解决方案

问题编号	问题描述	错误信息	解决方案
❌ 1	ESLint 无法识别 .vue 的 <script setup lang="ts">	Parsing error: Unexpected token )	需要为 .vue 显式指定 vue-eslint-parser 和 typescript-eslint 的解析器。
⚠️ 2	CSS 警告	Property 'outline' is not a widely available baseline feature	可通过关闭 css/use-baseline 规则来解决："css/use-baseline": "off"

---

✅ 二、最终 ESLint 配置文件（eslint.config.js）

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import vueParser from "vue-eslint-parser";
import jsonPlugin from "@eslint/json";
import cssPlugin from "@eslint/css";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"],
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        ecmaVersion: "latest",
        sourceType: "module",
      },
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
    plugins: { js },
    extends: ["js/recommended"],
  },

  tseslint.configs.recommended,

  ...pluginVue.configs["flat/essential"].map(config => ({
    ...config,
    files: ["**/*.vue"],
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        parser: tseslint.parser,
        ecmaVersion: "latest",
        sourceType: "module",
      },
    },
  })),

  {
    files: ["**/*.json"],
    plugins: { json: jsonPlugin },
    language: "json/json",
    extends: ["json/recommended"],
  },

  {
    files: ["**/*.css"],
    plugins: { css: cssPlugin },
    language: "css/css",
    extends: ["css/recommended"],
    rules: {
      "css/use-baseline": "off", // 关闭 outline 的兼容性警告
    },
  }
]);

---

✅ 三、最终检查步骤

1. 确保 vue-eslint-parser 安装：

npm install -D vue-eslint-parser

2. 运行 ESLint 检查是否正常：

npx eslint src --ext .js,.ts,.vue