如何配置VSCode在输入时自动将数组的.contains()转为.includes()？

要实现只针对数组场景修正.contains()为.includes()，同时保留DOM元素的.contains()，可以通过ESLint + TypeScript ESLint工具链实现——它能基于类型信息区分数组和DOM元素，给出精准提示和自动修复。

步骤1：安装必要插件和依赖 #

• 在VSCode扩展市场搜索并安装官方「ESLint」插件；
• 在项目根目录执行npm命令安装依赖（纯JS项目也需要这些工具做类型检查）：

  npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
  

• 安装DOM类型定义（用于识别DOM元素类型）：

  npm install @types/web --save-dev
  

步骤2：配置ESLint规则 #

在项目根目录创建或修改.eslintrc.json配置文件，添加类型感知的限制规则：

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-restricted-properties": [
      "error",
      {
        "selector": "CallExpression[callee.property.name='contains'][callee.object.typeAnnotation.type.name='Array']",
        "message": "数组没有.contains()方法，请使用.includes()",
        "fixer": (fixer, node) => fixer.replaceText(node.callee.property, "includes")
      }
    ]
  }
}

步骤3：创建tsconfig.json（JS项目也需要） #

即使写纯JavaScript，TypeScript ESLint工具链也需要tsconfig.json启用类型检查，在项目根目录创建：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "allowJs": true,
    "checkJs": true,
    "strict": false,
    "noEmit": true
  },
  "include": ["src/**/*"] // 替换为你的代码目录路径
}

步骤4：开启VSCode自动修复 #

打开VSCode设置（快捷键Ctrl+,），将以下配置添加到settings.json：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact"]
}

效果说明 #

• 当你在数组上调用.contains()时，ESLint会立刻报错，保存代码时自动修正为.includes()；
• 当你在DOM元素（比如document.body.contains(child)）上调用.contains()时，不会触发任何错误，保留原方法；
• 若想实时手动修复，可点击ESLint的错误提示框选择快速修复。

内容的提问来源于stack exchange，提问作者Oscar