VS Code如何检测未解析变量与不存在的对象属性？

问题背景 #

在WebStorm中，访问对象不存在的属性时，该属性会被下划线标注，鼠标悬停还会显示错误提示。我已经在VS Code中安装了ESLint及其对应插件，但这个场景似乎没被覆盖，想请教以下问题：

1. 是否存在未激活的VS Code设置，能实现和WebStorm相同的效果？
2. 是否需要安装其他插件才能实现该功能？
3. 不用TypeScript的话，还有哪些防属性拼写错误的方案？（注：我在教JavaScript，不想引入TypeScript增加复杂度）

我的.eslintrc.json配置如下：

{
   "env": {
       "browser": true,
       "es2021": true
   },
   "extends": "eslint:recommended",
   "overrides": [
   ],
   "parserOptions": {
       "ecmaVersion": "latest"
   },
   "rules": {
   }
}

问题解答 #

1. 现有设置能否实现？ #

可以。VS Code原生的JavaScript语言服务（底层基于TypeScript的类型检查能力，但不需要你编写TypeScript代码）就支持这个功能，只需开启两个配置：

• 打开VS Code设置（快捷键Ctrl+,），搜索javascript.implicitProjectConfig.checkJs，将其设置为true
• 确保javascript.validate.enable为true（默认是开启状态）

开启后，VS Code会通过静态分析自动识别对象的属性，当你访问不存在的属性时，会像WebStorm一样给属性加下划线，悬停还能看到错误提示。

2. 是否需要额外插件？ #

如果上面的原生设置已经满足需求，不需要额外插件。要是想通过ESLint强化检测，可以安装eslint-plugin-jsdoc，用JSDoc注释定义对象结构，让ESLint能识别属性是否合法：

首先安装插件：

npm install eslint-plugin-jsdoc --save-dev

然后修改.eslintrc.json配置：

{
   "env": {
       "browser": true,
       "es2021": true
   },
   "extends": ["eslint:recommended", "plugin:jsdoc/recommended"],
   "overrides": [],
   "parserOptions": {
       "ecmaVersion": "latest"
   },
   "plugins": ["jsdoc"],
   "rules": {
       "jsdoc/require-param-type": "warn",
       "jsdoc/require-property-type": "warn"
   }
}

之后给对象加上JSDoc注释，ESLint就能检测属性拼写错误：

/**
 * @typedef {Object} User
 * @property {string} name
 * @property {number} age
 */

/** @type {User} */
const user = { name: "Alice", age: 25 };
user.agee; // 这里会被ESLint标记为错误

3. 不用TypeScript的防拼写错误方案 #

除了上面的方法，还有几个实用的方案：

• 用常量定义属性名：把对象的所有属性名存成常量，访问时用常量代替字符串，这样拼写错误会直接体现为常量未定义：

  const USER_PROPS = {
    NAME: 'name',
    AGE: 'age'
  };
  const user = { name: "Alice", age: 25 };
  console.log(user[USER_PROPS.NAME]); // 正确
  console.log(user[USER_PROPS.AGEE]); // 这里会因为AGEE常量不存在报错
  

• 运行时校验：在使用对象属性前，用in操作符或hasOwnProperty检查属性是否存在，虽然是运行时检测，但能在调试或测试阶段及时发现问题：

  function getUserAge(user) {
    if (!('age' in user)) {
      throw new Error('user对象缺少age属性');
    }
    return user.age;
  }
  

• ESLint自定义规则：如果有能力，可以编写简单的ESLint自定义规则，针对对象属性访问做拼写校验，但这个门槛稍高，适合有一定基础的场景。

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