用户指南

¥User Guide

💿 安装

通过 npm:

¥Via npm:

bash

npm install --save-dev eslint eslint-plugin-vue

通过 yarn:

¥Via yarn:

bash

yarn add -D eslint eslint-plugin-vue vue-eslint-parser globals

要求

ESLint:^8.57.0 || ^9.0.0
Node.js：^18.18.0 || ^20.9.0 || >=21.1.0

📖用法

¥📖 Usage

配置（`eslint.config.js`）

¥Configuration (eslint.config.js)

使用 eslint.config.js 文件配置规则。这是 ESLint v9 中的默认设置，但可以从 ESLint v8.57.0 开始使用。另请参阅：https://eslint.nodejs.cn/docs/latest/use/configure/configuration-files。

¥Use eslint.config.js file to configure rules. This is the default in ESLint v9, but can be used starting from ESLint v8.57.0. See also: https://eslint.nodejs.cn/docs/latest/use/configure/configuration-files.

示例 eslint.config.js：

¥Example eslint.config.js:

import pluginVue from 'eslint-plugin-vue'
import globals from 'globals'

export default [
  // add more generic rulesets here, such as:
  // js.configs.recommended,
  ...pluginVue.configs['flat/recommended'],
  // ...pluginVue.configs['flat/vue2-recommended'], // Use this if you are using Vue.js 2.x.
  {
    rules: {
      // override/add rules settings here, such as:
      // 'vue/no-unused-vars': 'error'
    },
    languageOptions: {
      sourceType: 'module',
      globals: {
        ...globals.browser
      }
    }
  }
]

请参阅规则列表以获取此插件提供的 configs 和 rules。

¥See the rule list to get the configs & rules that this plugin provides.

打包包配置（`eslint.config.js`）

¥Bundle Configurations (eslint.config.js)

此插件提供了一些预定义的配置。你可以通过将以下配置添加到 eslint.config.js 来使用它们。（此插件中的所有扁平配置均以数组形式提供，因此在将它们与其他配置组合时需要扩展语法。）

¥This plugin provides some predefined configs. You can use the following configs by adding them to eslint.config.js. (All flat configs in this plugin are provided as arrays, so spread syntax is required when combining them with other configs.)

*.configs["flat/base"] ...设置和规则以启用正确的 ESLint 解析。
¥*.configs["flat/base"] ... Settings and rules to enable correct ESLint parsing.
使用 Vue.js 3.x 的配置：
¥Configurations for using Vue.js 3.x:
- *.configs["flat/essential"] ...base，加上规则以防止错误或意外行为。
  ¥*.configs["flat/essential"] ... base, plus rules to prevent errors or unintended behavior.
- *.configs["flat/strongly-recommended"] ...以上，加上规则可大大提高代码的可读性和/或开发体验。
  ¥*.configs["flat/strongly-recommended"] ... Above, plus rules to considerably improve code readability and/or dev experience.
- *.configs["flat/recommended"] ...以上，加上强制主观社区默认值以确保一致性的规则。
  ¥*.configs["flat/recommended"] ... Above, plus rules to enforce subjective community defaults to ensure consistency.
使用 Vue.js 2.x 的配置：
¥Configurations for using Vue.js 2.x:
- *.configs["flat/vue2-essential"] ...base，加上规则以防止错误或意外行为。
  ¥*.configs["flat/vue2-essential"] ... base, plus rules to prevent errors or unintended behavior.
- *.configs["flat/vue2-strongly-recommended"] ...以上，加上规则可大大提高代码的可读性和/或开发体验。
  ¥*.configs["flat/vue2-strongly-recommended"] ... Above, plus rules to considerably improve code readability and/or dev experience.
- *.configs["flat/vue2-recommended"] ...以上，加上强制主观社区默认值以确保一致性的规则
  ¥*.configs["flat/vue2-recommended"] ... Above, plus rules to enforce subjective community defaults to ensure consistency

报告规则

默认情况下，基本和基本类别的所有规则都会报告 ESLint 错误。其他规则 - 因为它们没有涵盖应用中的潜在错误 - 报告警告。这是什么意思？默认情况下 - 无，但如果你愿意 - 你可以设置一个阈值，并在一定数量的警告后中断构建，而不是任何警告。更多信息此处。

¥By default, all rules from base and essential categories report ESLint errors. Other rules - because they're not covering potential bugs in the application - report warnings. What does it mean? By default - nothing, but if you want - you can set up a threshold and break the build after a certain amount of warnings, instead of any. More information here.

指定全局变量 (`eslint.config.js`)

¥Specifying Globals (eslint.config.js)

根据你使用 Vue.js 的方式指定全局对象。有关如何设置全局变量的更多信息，请参阅此处。

¥Specify global objects depending on how you use Vue.js. More information on how to set globals can be found here.

如果你正在编写一个仅在浏览器上渲染的应用，请使用 globals.browser。

¥If you're writing an app that will only render on the browser, use globals.browser.

// ...
import globals from 'globals'

export default [
  // ...
  {
    languageOptions: {
      globals: {
        ...globals.browser
      }
    }
  }
  // ...
]

如果你正在编写一个在服务器端和浏览器上都渲染的应用，请使用 globals.shared-node-browser。

¥If you're writing an app that is rendered both server-side and on the browser, use globals.shared-node-browser.

// ...
import globals from 'globals'

export default [
  // ...
  {
    languageOptions: {
      globals: {
        ...globals['shared-node-browser']
      }
    }
  }
  // ...
]

typescript-eslint 和 Prettier 的示例配置

¥Example configuration with typescript-eslint and Prettier

bash

npm install --save-dev eslint eslint-config-prettier eslint-plugin-vue globals typescript-eslint

import eslint from '@eslint/js';
import eslintConfigPrettier from 'eslint-config-prettier';
import eslintPluginVue from 'eslint-plugin-vue';
import globals from 'globals';
import typescriptEslint from 'typescript-eslint';

export default typescriptEslint.config(
  { ignores: ['*.d.ts', '**/coverage', '**/dist'] },
  {
    extends: [
      eslint.configs.recommended,
      ...typescriptEslint.configs.recommended,
      ...eslintPluginVue.configs['flat/recommended'],
    ],
    files: ['**/*.{ts,vue}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: globals.browser,
      parserOptions: {
        parser: typescriptEslint.parser,
      },
    },
    rules: {
      // your rules
    },
  },
  eslintConfigPrettier
);

配置（`.eslintrc`）

¥Configuration (.eslintrc)

使用 .eslintrc.* 文件在 ESLint <v9 中配置规则。另请参阅：https://eslint.nodejs.cn/docs/latest/use/configure。

¥Use .eslintrc.* file to configure rules in ESLint < v9. See also: https://eslint.nodejs.cn/docs/latest/use/configure.

示例 .eslintrc.js：

¥Example .eslintrc.js:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/recommended',
    // 'plugin:vue/vue2-recommended' // Use this if you are using Vue.js 2.x.
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

请参阅规则列表以获取此插件提供的 extends 和 rules。

¥See the rule list to get the extends & rules that this plugin provides.

打包包配置（`.eslintrc`）

¥Bundle Configurations (.eslintrc)

此插件提供了一些预定义的配置。你可以通过将以下配置添加到 extends 来使用它们。

¥This plugin provides some predefined configs. You can use the following configs by adding them to extends.

"plugin:vue/base" ...设置和规则以启用正确的 ESLint 解析。
¥"plugin:vue/base" ... Settings and rules to enable correct ESLint parsing.
使用 Vue.js 3.x 的配置：
¥Configurations for using Vue.js 3.x:
- "plugin:vue/essential" ...base，加上规则以防止错误或意外行为。
  ¥"plugin:vue/essential" ... base, plus rules to prevent errors or unintended behavior.
- "plugin:vue/strongly-recommended" ...以上，加上规则可大大提高代码的可读性和/或开发体验。
  ¥"plugin:vue/strongly-recommended" ... Above, plus rules to considerably improve code readability and/or dev experience.
- "plugin:vue/recommended" ...以上，加上强制主观社区默认值以确保一致性的规则。
  ¥"plugin:vue/recommended" ... Above, plus rules to enforce subjective community defaults to ensure consistency.
使用 Vue.js 2.x 的配置：
¥Configurations for using Vue.js 2.x:
- "plugin:vue/vue2-essential" ...base，加上规则以防止错误或意外行为。
  ¥"plugin:vue/vue2-essential" ... base, plus rules to prevent errors or unintended behavior.
- "plugin:vue/vue2-strongly-recommended" ...以上，加上规则可大大提高代码的可读性和/或开发体验。
  ¥"plugin:vue/vue2-strongly-recommended" ... Above, plus rules to considerably improve code readability and/or dev experience.
- "plugin:vue/vue2-recommended" ...以上，加上强制主观社区默认值以确保一致性的规则。
  ¥"plugin:vue/vue2-recommended" ... Above, plus rules to enforce subjective community defaults to ensure consistency.

报告规则

Vue.js 3.x 支持的状态

此插件支持 Vue.js 3.2、<script setup> 和 CSS 变量注入的基本语法，但尚不支持 Vue.js 3.2 的实验性功能 ref sugar。如果你遇到这些问题，还请参考常见问题。如果你找不到解决方案，请搜索问题，如果问题不存在，请打开一个新问题。

¥This plugin supports the basic syntax of Vue.js 3.2, <script setup>, and CSS variable injection, but the ref sugar, an experimental feature of Vue.js 3.2, is not yet supported.\ If you have issues with these, please also refer to the FAQ. If you can't find a solution, search for the issue and if the issue doesn't exist, open a new issue.

指定环境(`.eslintrc`)

¥Specifying Environments (.eslintrc)

根据你使用 Vue.js 的方式指定环境。有关如何设置环境的更多信息，请参阅此处。

¥Specify environments depending on how you use Vue.js. More information on how to set environments can be found here.

如果你正在编写一个仅在浏览器上渲染的应用，请使用 env.browser。

¥If you're writing an app that will only render on the browser, use env.browser.

json

{
  "env": {
    "browser": true
  }
}

如果你正在编写一个在服务器端和浏览器上都渲染的应用，请使用 env.shared-node-browser。

¥If you're writing an app that is rendered both server-side and on the browser, use env.shared-node-browser.

json

{
  "env": {
    "shared-node-browser": true
  }
}

从命令行运行 ESLint

¥Running ESLint from the command line

如果你想从命令行运行 eslint，如果你使用插件提供的配置，ESLint 将自动检查 .vue 扩展。

¥If you want to run eslint from the command line, ESLint will automatically check for the .vue extension if you use the config provided by the plugin.

示例：

¥Examples:

bash

eslint src

提示

如果你安装了 @vue/cli-plugin-eslint，则应该将 lint 脚本添加到你的 package.json。这意味着你可以只运行 yarn lint 或 npm run lint。

¥If you installed @vue/cli-plugin-eslint, you should have the lint script added to your package.json. That means you can just run yarn lint or npm run lint.

如何使用自定义解析器？

¥How to use a custom parser?

如果你想使用自定义解析器（如 @babel/eslint-parser 或 @typescript-eslint/parser），则必须使用 parserOptions.parser 选项而不是 parser 选项。因为这个插件需要 vue-eslint-parser 来解析 .vue 文件，如果你覆盖 parser 选项，这个插件将不起作用。

¥If you want to use custom parsers such as @babel/eslint-parser or @typescript-eslint/parser, you have to use the parserOptions.parser option instead of the parser option. Because this plugin requires vue-eslint-parser to parse .vue files, this plugin doesn't work if you overwrite the parser option.

diff

- "parser": "@typescript-eslint/parser",
+ "parser": "vue-eslint-parser",
  "parserOptions": {
+     "parser": "@typescript-eslint/parser",
      "sourceType": "module"
  }

完整示例：

¥Full example:

.eslintrceslint.config.js

json

{
  "root": true,
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser"
  }
}

import js from '@eslint/js'
import eslintPluginVue from 'eslint-plugin-vue'
import ts from 'typescript-eslint'

export default ts.config(
  js.configs.recommended,
  ...ts.configs.recommended,
  ...eslintPluginVue.configs['flat/recommended'],
  {
    files: ['*.vue', '**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: '@typescript-eslint/parser'
      }
    }
  }
)

parserOptions.parser 选项还可以指定一个对象来指定多个解析器。有关更多详细信息，请参阅 vue-eslint-parser README。

¥The parserOptions.parser option can also specify an object to specify multiple parsers. See vue-eslint-parser README for more details.

ESLint 如何检测组件？

¥How does ESLint detect components?

所有与组件相关的规则都应用于通过以下任何检查的代码：

¥All component-related rules are applied to code that passes any of the following checks:

Vue.component() 表达式
¥Vue.component() expression
Vue.extend() 表达式
¥Vue.extend() expression
Vue.mixin() 表达式
¥Vue.mixin() expression
app.component() 表达式
¥app.component() expression
app.mixin() 表达式
¥app.mixin() expression
createApp() 表达式
¥createApp() expression
defineComponent() 表达式
¥defineComponent() expression
.vue 或 .jsx 文件中的 export default {}
¥export default {} in .vue or .jsx file

但是，如果你想在任何作为 Vue 组件的自定义对象中利用规则，则可能需要使用特殊注释 // @vue/component 将下一行中的对象标记为任何文件中的 Vue 组件，例如：

¥However, if you want to take advantage of the rules in any of your custom objects that are Vue components, you might need to use the special comment // @vue/component that marks an object in the next line as a Vue component in any file, e.g.:

// @vue/component
const CustomComponent = {
  name: 'custom-component',
  template: '<div></div>'
}

Vue.component('AsyncComponent', (resolve, reject) => {
  setTimeout(() => {
    // @vue/component
    resolve({
      name: 'async-component',
      template: '<div></div>'
    })
  }, 500)
})

你也可以对 Vue 类组件执行此操作：

¥You can do this for Vue class component too:

// @vue/component
@Component({
  components: { Foo }
})
export default class Bar extends Vue {}

通过 `` 禁用规则

¥Disabling rules via 

你可以在 <template> 和 .vue 文件的块级别中使用类似  的 HTML 注释来暂时禁用某条规则。

¥You can use -like HTML comments in the <template> and in the block level of .vue files to disable a certain rule temporarily.

例如：

¥For example:

vue

<template>
  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
  <div a="1" b="2" c="3" d="4">
  </div>
</template>

如果你想禁止 <template> 中的 eslint-disable 功能，请禁用 vue/comment-directive 规则。

¥If you want to disallow eslint-disable functionality in <template>, disable the vue/comment-directive rule.

解析器选项

¥Parser Options

此插件使用 vue-eslint-parser。对于 parserOptions，你可以使用 vue-eslint-parser 的 vueFeatures 选项。

¥This plugin uses vue-eslint-parser. For parserOptions, you can use the vueFeatures options of vue-eslint-parser.

json

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "vueFeatures": {
      "filter": true,
      "interpolationAsNonHTML": false,
    }
  }
}

请参阅 parserOptions.vueFeatures documentation for vue-eslint-parser 以了解更多详细信息。

¥See the parserOptions.vueFeatures documentation for vue-eslint-parser for more details.

💻编辑器集成

¥💻 Editor integrations

Visual Studio Code

使用微软官方提供的 dbaeumer.vscode-eslint 扩展。

¥Use the dbaeumer.vscode-eslint extension that Microsoft provides officially.

你必须配置扩展的 eslint.validate 选项以检查 .vue 文件，因为扩展默认仅针对 *.js 或 *.jsx 文件。

¥You have to configure the eslint.validate option of the extension to check .vue files, because the extension targets only *.js or *.jsx files by default.

示例 .vscode/settings.json：

¥Example .vscode/settings.json:

json

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

如果你使用 Vetur 插件，请设置 "vetur.validation.template": false 以避免默认的 Vetur 模板验证。查看 vetur 文档了解更多信息。

¥If you use the Vetur plugin, set "vetur.validation.template": false to avoid default Vetur template validation. Check out vetur documentation for more info.

Sublime Text

使用 Package Control 安装 SublimeLinter 及其 ESLint 扩展 SublimeLinter-eslint。

¥Use Package Control to install SublimeLinter and its ESLint extension SublimeLinter-eslint.

在菜单中转到 Preferences > Package Settings > SublimeLinter > Settings 并粘贴以下内容：

¥In the menu go to Preferences > Package Settings > SublimeLinter > Settings and paste in this:

json

{
  "linters": {
    "eslint": {
      "selector": "text.html.vue, source.js - meta.attribute-with-value"
    }
  }
}

Atom 编辑器

¥Atom editor

进入 Settings -> Packages -> linter-eslint，在选项 "运行 eslint 的范围列表" 下，添加 text.html.vue。你可能需要重新启动 Atom。

¥Go into Settings -> Packages -> linter-eslint, under the option "List of scopes to run eslint on", add text.html.vue. You may need to restart Atom.

IntelliJ IDEA / JetBrains WebStorm

在“设置/首选项”对话框 (Cmd+,/Ctrl+Alt+S) 中，在“语言和框架”下选择 JavaScript，然后在“代码质量工具”下选择 ESLint。在打开的 ESLint 页面上，选中启用复选框。

¥In the Settings/Preferences dialog (Cmd+,/Ctrl+Alt+S), choose JavaScript under Languages and Frameworks and then choose ESLint under Code Quality Tools. On the ESLint page that opens, select the Enable checkbox.

如果你的 ESLint 配置已更新（手动或从你的版本控制中），请在编辑器中打开它并在上下文菜单中选择应用 ESLint 代码样式规则。

¥If your ESLint configuration is updated (manually or from your version control), open it in the editor and choose Apply ESLint Code Style Rules in the context menu.

阅读更多：JetBrains - ESLint

¥read more: JetBrains - ESLint

❓常见问题

¥❓ FAQ

"使用最新的 vue-eslint-parser" 错误是什么？

¥What is the "Use the latest vue-eslint-parser" error?

大多数 eslint-plugin-vue 规则需要 vue-eslint-parser 来检查 <template> AST。

¥Most eslint-plugin-vue rules require vue-eslint-parser to check <template> ASTs.

确保你的 .eslintrc 中有以下设置之一：

¥Make sure you have one of the following settings in your .eslintrc:

"extends": ["plugin:vue/recommended"]
"extends": ["plugin:vue/base"]

如果你已经使用另一个解析器（例如 "parser": "@typescript-eslint/parser"），请将其移入 parserOptions，这样它就不会与此插件配置使用的 vue-eslint-parser 发生冲突：

¥If you already use another parser (e.g. "parser": "@typescript-eslint/parser"), please move it into parserOptions, so it doesn't collide with the vue-eslint-parser used by this plugin's configuration:

diff

- "parser": "@typescript-eslint/parser",
+ "parser": "vue-eslint-parser",
  "parserOptions": {
+     "parser": "@typescript-eslint/parser",
      "ecmaVersion": 2020,
      "sourceType": "module"
  }

另请参阅：“如何使用自定义解析器？”部分。

¥See also: "How to use a custom parser?" section.

为什么它不适用于 .vue 文件？

¥Why doesn't it work on .vue files?

确保你的配置中没有 eslint-plugin-html。eslint-plugin-html 从 <script> 标签中提取内容，但 eslint-plugin-vue 需要 <script> 标签和 <template> 标签，以便区分单文件组件中的模板和脚本。
¥Make sure you don't have eslint-plugin-html in your config. The eslint-plugin-html extracts the content from <script> tags, but eslint-plugin-vue requires <script> tags and <template> tags in order to distinguish template and script in single file components.

diff

  "plugins": [
    "vue",
-   "html"
  ]

确保你的工具设置为 lint .vue 文件。
¥Make sure your tool is set to lint .vue files.
- 确保你使用的是 eslint-plugin-vue 提供的可共享配置。
  ¥Make sure you are using the shareable config provided by eslint-plugin-vue.
- 如果你在配置编辑器时遇到问题，请阅读编辑器集成
  ¥If you are having issues with configuring editor, please read editor integrations

与 [Prettier] 冲突

¥Conflict with Prettier

使用 eslint-config-prettier 代替 Prettier，以免与本插件提供的可共享配置冲突。

¥Use eslint-config-prettier for Prettier not to conflict with the shareable config provided by this plugin.

示例 .eslintrc.js：

¥Example .eslintrc.js:

module.exports = {
  // ...
  extends: [
    // ...
    // 'eslint:recommended',
    // ...
    'plugin:vue/recommended',
    // ...
    'prettier'
    // Make sure "prettier" is the last element in this list.
  ],
  // ...
}

如果 Prettier 与你设置的规则关闭该规则相冲突。例如，如果你在 rules 中将 vue/html-indent 配置为 error，但它与 Prettier 冲突，请删除该行：

¥If Prettier conflicts with a rule you have set, turn off that rule. For example, if you have vue/html-indent configured as error in rules, but it conflicts with Prettier, remove that line:

diff

module.exports = {
  // ...
  rules: {
    // ...
-    "vue/html-indent": "error",
    // ...
  },
  // ...
}

使用 JSX

¥Using JSX

如果你正在使用 JSX，则需要在 ESLint 配置中启用 JSX。

¥If you are using JSX, you need to enable JSX in your ESLint configuration.

diff

  "parserOptions": {
      "ecmaVersion": 2020,
      "ecmaFeatures": {
+         "jsx": true
      }
  }

另请参阅 ESLint - 指定解析器选项。

在 .vue 文件中将 JSX 与 TypeScript (TSX) 一起使用时，需要相同的配置。另请参阅此处。请注意，使用 jsx: true 时不能使用尖括号类型断言样式 (var x = <foo>bar;)。

¥The same configuration is required when using JSX with TypeScript (TSX) in the .vue file.\ See also here.\ Note that you cannot use angle-bracket type assertion style (var x = <foo>bar;) when using jsx: true.

Visual Studio Code 问题

¥Trouble with Visual Studio Code

关闭 ESLint 配置文件中的规则不会忽略警告。
¥Turning off the rule in the ESLint configuration file does not ignore the warning.
使用  注释不会抑制警告。
¥Using the  comment does not suppress warnings.
显示重复警告。
¥Duplicate warnings are displayed.
使用了 @babel/eslint-parser，但模板仍然显示 vue/no-parsing-error 警告。
¥Used @babel/eslint-parser, but the template still show vue/no-parsing-error warnings.

你需要通过将 vetur.validation.template: false 添加到你的 .vscode/settings.json 来关闭 Vetur 的模板验证。

¥You need to turn off Vetur's template validation by adding vetur.validation.template: false to your .vscode/settings.json.

另请参阅：“Visual Studio Code”部分和 Vetur - Linting。

¥See also: "Visual Studio Code" section and Vetur - Linting.

与 `<script setup>` 配合使用效果不佳

¥Does not work well with <script setup>

`<template>` 中使用的变量受到 `no-unused-vars` 规则的警告

¥The variables used in the <template> are warned by no-unused-vars rule

你需要使用 [vue-eslint-parser] v9.0.0 或更高版本。

¥You need to use [vue-eslint-parser] v9.0.0 or later.

以前你必须使用 vue/script-setup-uses-vars 规则，现在不再需要了。

¥Previously you had to use the vue/script-setup-uses-vars rule, this is no longer needed.

编译器宏（例如 `defineProps` 和 `defineEmits`）会生成 `no-undef` 警告

¥Compiler macros such as defineProps and defineEmits generate no-undef warnings

你需要使用 [vue-eslint-parser] v9.0.0 或更高版本。

¥You need to use [vue-eslint-parser] v9.0.0 or later.

以前你必须使用 vue/setup-compiler-macros 环境，现在不再需要了。

¥Previously you had to use the vue/setup-compiler-macros environment, this is no longer needed.

自动导入支持

¥Auto Imports Support

在 Nuxt 3 或使用 unplugin-auto-import 时，Vue API 可以自动导入。要使 vue/no-ref-as-operand 或 vue/no-watch-after-await 等规则与它们正确配合，你可以在 ESLint 的 globals 选项中指定它们：

¥In Nuxt 3 or with unplugin-auto-import, Vue APIs can be auto imported. To make rules like vue/no-ref-as-operand or vue/no-watch-after-await work correctly with them, you can specify them in ESLint's globals options:

.eslintrceslint.config.js

json

{
  "globals": {
    "ref": "readonly",
    "computed": "readonly",
    "watch": "readonly",
    "watchEffect": "readonly",
    // ...more APIs
  }
}

export default [
  {
    languageOptions: {
      globals: {
        ref: 'readonly',
        computed: 'readonly',
        watch: 'readonly',
        watchEffect: 'readonly',
        // ...more APIs
      }
    }
  }
]

用户指南 ​

💿 安装 ​

📖用法 ​

配置（eslint.config.js） ​

打包包配置（eslint.config.js） ​

指定全局变量 (eslint.config.js) ​

typescript-eslint 和 Prettier 的示例配置 ​

配置（.eslintrc） ​

打包包配置（.eslintrc） ​

指定环境(.eslintrc) ​

从命令行运行 ESLint ​

如何使用自定义解析器？ ​

ESLint 如何检测组件？ ​

通过  禁用规则 ​

解析器选项 ​

💻编辑器集成 ​

Visual Studio Code ​

Sublime Text ​

Atom 编辑器 ​

IntelliJ IDEA / JetBrains WebStorm ​

❓常见问题 ​

"使用最新的 vue-eslint-parser" 错误是什么？ ​

为什么它不适用于 .vue 文件？ ​

与 [Prettier] 冲突 ​

使用 JSX ​

Visual Studio Code 问题 ​

与 <script setup> 配合使用效果不佳 ​

<template> 中使用的变量受到 no-unused-vars 规则的警告 ​

编译器宏（例如 defineProps 和 defineEmits）会生成 no-undef 警告 ​

自动导入支持 ​

用户指南

💿 安装

📖用法

配置（`eslint.config.js`）

打包包配置（`eslint.config.js`）

指定全局变量 (`eslint.config.js`)

typescript-eslint 和 Prettier 的示例配置

配置（`.eslintrc`）

打包包配置（`.eslintrc`）

指定环境(`.eslintrc`)

从命令行运行 ESLint

如何使用自定义解析器？

ESLint 如何检测组件？

通过 `` 禁用规则

解析器选项

💻编辑器集成

Visual Studio Code

Sublime Text

Atom 编辑器

IntelliJ IDEA / JetBrains WebStorm

❓常见问题

"使用最新的 vue-eslint-parser" 错误是什么？

为什么它不适用于 .vue 文件？

与 [Prettier] 冲突

使用 JSX

Visual Studio Code 问题

与 `<script setup>` 配合使用效果不佳

`<template>` 中使用的变量受到 `no-unused-vars` 规则的警告

编译器宏（例如 `defineProps` 和 `defineEmits`）会生成 `no-undef` 警告

自动导入支持