vue.js - 在 .vue 文件中定义 `interface` 报错?

Question

Parsing error: The keyword 'interface' is reserved

只有在 .vue 文件中定义 interface 才报错

eslint.config.js:

import globals from "globals";import pluginJs from "@eslint/js";import tseslint from "typescript-eslint";import pluginVue from "eslint-plugin-vue";export default [  {files: ["**/*.{js,mjs,cjs,ts,vue}"]},  {languageOptions: { globals: globals.browser }},  pluginJs.configs.recommended,  ...tseslint.configs.recommended,  ...pluginVue.configs["flat/essential"],];

Answer 1

这个错误通常是因为 ESLint 配置没有正确地处理 .vue 文件中的 TypeScript 代码。在 .vue 文件中使用 TypeScript 的 interface 关键字时，需要确保 ESLint 配置能够识别并正确处理 TypeScript 语法。

为了解决这个问题，请确保你安装了必要的 ESLint 插件和解析器，并且正确配置了它们。对于 TypeScript 和 Vue，你需要以下插件：

• @eslint/plugin-vue：用于在 ESLint 中支持 Vue 文件。
• @typescript-eslint/parser：用于解析 TypeScript 代码。
• @typescript-eslint/eslint-plugin：提供 TypeScript 相关的 ESLint 规则。

你的 .eslintrc.js 或 eslint.config.js 文件应该包含对这些插件和解析器的引用。以下是一个示例配置，它可能有助于解决你的问题：

module.exports = {  root: true,  env: {    node: true,  },  extends: [    'plugin:vue/vue3-essential',    'eslint:recommended',    '@vue/typescript/recommended',    'plugin:@typescript-eslint/recommended',    // 如果你需要更严格的规则，可以添加 'plugin:@typescript-eslint/recommended-strict'  ],  parserOptions: {    parser: '@typescript-eslint/parser',    ecmaVersion: 2020, // 或者你需要的 ECMAScript 版本    sourceType: 'module',  },  rules: {    // 你可以在这里添加或覆盖规则  },  overrides: [    {      files: ['**/*.vue'],      rules: {        // 这里可以添加或覆盖针对 .vue 文件的规则      },    },  ],};

注意：

• 确保你的项目中安装了所有必要的依赖包，比如 @vue/eslint-config-typescript，它可能包含在 @vue/cli-plugin-typescript 中。
• 如果你使用的是 Vue CLI 创建的项目，它可能已经为你配置好了大部分内容。在这种情况下，你可能只需要调整现有的 ESLint 配置。
• parserOptions 字段中的 parser 应设置为 @typescript-eslint/parser，以便正确解析 TypeScript 语法。

如果问题仍然存在，请检查你的项目依赖是否都正确安装，并且没有版本冲突。此外，确保你的编辑器或 IDE 使用的 ESLint 插件或扩展是最新的，并且与你的项目配置兼容。