工具 | vscode 中出现的报错 | 橙色的提示和红色的波浪线代表？| ESLint 和 Prettier 规范问题

省流总结：

建议：开发时，先关橙色的提示（∵ 只为好看），解决红色的报错。

橙色部分 是编辑器/工具给出的「代码规范（Lint / 格式 / 风格）」提示，可以安全取消或关闭，不影响代码运行或类型系统本身。

一、橙色提示到底是什么？

你图中的橙色文字，例如：

• Replace '|number|' with ' | number'

• Replace '......//' with '//'

本质来源有三种可能（通常同时存在）：

1️⃣ ESLint（最常见）

例如规则：

• @typescript-eslint/type-annotation-spacing

• @typescript-eslint/union-type-spacing

• spaced-comment

👉它关心的是“代码风格”，不是类型正确性

2️⃣ TypeScript Language Service（较少）

TS 自带的“建议修复（Suggestion）”

• 比如注释写法

• union type 的空格风格

3️⃣ Prettier（如果你装了）

自动格式化建议

二、如何取消这些橙色提示（推荐方案）

✅ 方案一：只关当前文件（文件级，多个文件挨个改 可能有点麻烦）

在文件顶部加：

/* eslint-disable */

或只关 TypeScript 规则：

/* eslint-disable @typescript-eslint/* */

📌 适合你现在这种原型阶段/开发

实践发现，第一个管用；第二个还是会报错。

✅ 方案二：关闭某一类规则（工程级，★ 推荐）

在.eslintrc.js/.eslintrc.cjs中：

rules: {

'@typescript-eslint/type-annotation-spacing': 'off',

'spaced-comment': 'off',

}

提示错误实例以及解决：橙色Insert ','提示：

❌不是@typescript-eslint/union-type-spacing
❌也不是spaced-comment

✅而是comma-dangle（尾逗号规则）或 Prettier 的格式化规则

---

解决：

✅ 方案一（最推荐）：直接关comma-dangle

在.eslintrc.cjs中加入：

rules: { 'comma-dangle': 'off', }

如果你用的是 TypeScript 规则版本，再加一条保险：

'@typescript-eslint/comma-dangle': 'off',

---

✅ 方案二：如果你用的是 Prettier（很可能）

检查是否存在以下文件之一：

• .prettierrc

• .prettierrc.json

• prettier字段在package.json

如果有，改成：

{

"trailingComma": "none"

}

并且在 ESLint 中关闭与 Prettier 冲突：

extends: [

'plugin:prettier/recommended'

],

rules: {

'prettier/prettier': 'off'

}

✅ 方案三（开发期最省事）：文件级关闭【问题：后期维护难】

在componentMetaList.ts顶部直接写：

/* eslint-disable comma-dangle */

/* eslint-disable prettier/prettier */

实践结果：到方案二中的'plugin:prettier/recommended'时成功修复！——》 真正生效并修复问题的是 Prettier，不是 ESLint 规则本身。——》典型的 ESLint + Prettier 优先级问题，而非配置问题。

✅ 方案三：VS Code 里直接关“建议类诊断”

不推荐长期使用，但可以快速清爽界面

settings.json：

{

"typescript.suggest.enabled": false,

"editor.lightbulb.enabled": false

}

❌ 不推荐：卸载 ESLint

你后期代码的规范，ESLint 还是很有价值的。

建议：

1. 先关掉橙色提示

2. 只保留红色类型错误

---

橙色 是代码风格建议，可以安全关闭；

红色是 typeScript 的硬错误，必须解决

三、推荐的.eslintrc.cjs（一次配置，全局生效）

适用于当前环境的配置（参考时 看备注 来选用）：

module.exports = { root: true, env: { browser: true, es2021: true, node: true, }, parser: 'vue-eslint-parser', parserOptions: { parser: '@typescript-eslint/parser', ecmaVersion: 2021, sourceType: 'module', }, plugins: [ 'vue', '@typescript-eslint', 'simple-import-sort', ], extends: [ 'eslint:recommended', 'plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', // ⭐ 关键 ], rules: { // ===== 开发期友好（论文 / 原型）===== 'comma-dangle': 'off', '@typescript-eslint/comma-dangle': 'off', 'prettier/prettier': 'off', // ===== Vue 编辑器常见限制关闭 ===== 'vue/no-mutating-props': 'off', 'vue/multi-word-component-names': 'off', // ===== TS 规则降噪 ===== '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint/no-unused-vars': 'off', '@typescript-eslint/no-non-null-assertion': 'off', '@typescript-eslint/no-misused-promises': 'off', // ===== 排序类（保留）===== 'simple-import-sort/imports': 'warn', 'simple-import-sort/exports': 'warn', }, };

📌 这份配置的目标：让你只看到“真正会影响系统正确性的问题”

参考：各种关闭eslint方法总结_eslint 关闭-CSDN博客