JavaScript扩展String.prototype后VS Code Intellisense不显示方法问题

我之前也碰到过一模一样的问题！VS Code的IntelliSense依赖TypeScript的类型系统来提供代码提示，但原生的String类型定义里并没有你自定义的format方法，所以它没法识别到这个扩展方法，自然就不会显示提示了。下面给你两种可行的解决办法：

方法一：用类型声明文件扩展String接口（推荐，适合JS/TS混合或纯TS项目） #

你可以创建一个类型声明文件（.d.ts后缀），告诉TypeScript你给String原型加了新方法：

1. 在项目根目录创建一个文件，比如string-extensions.d.ts
2. 写入以下内容：

declare global {
  interface String {
    /**
     * 格式化字符串，替换{0}、{1}或{key}这样的占位符
     * @param args 可以是多个参数，也可以是一个键值对对象
     * @returns 格式化后的字符串
     */
    format(...args: any[]): string;
  }
}

export {};

3. 确保这个文件能被VS Code识别：如果是TS项目，检查tsconfig.json的include数组是否包含这个文件；如果是纯JS项目，只要文件在项目目录里，VS Code会自动读取它。

方法二：用JSDoc注释增强纯JS项目的类型提示 #

如果你的项目是纯JavaScript，不想加类型声明文件，可以给你的扩展方法加上JSDoc注释，让VS Code能识别到这个方法：

/**
 * 格式化字符串，替换{0}、{1}或{key}这样的占位符
 * @augments String
 * @param {...any} args 可以是多个参数，也可以是一个键值对对象
 * @returns {string} 格式化后的字符串
 */
String.prototype.format = function() {
  let str = this.toString()
  if (arguments.length) {
    const type = typeof arguments[0]
    const args = type === 'string' || type === 'number' 
      ? Array.prototype.slice.call(arguments) 
      : arguments[0]
    for (const arg in args) {
      str = str.replace(new RegExp(`\{${arg}\}`, 'gi'), args[arg])
    }
  }
  return str
}

加了这个JSDoc后，VS Code就能识别到String原型上的format方法，并且显示你写的注释提示。

另外，顺便给你的方法提个小优化：可以用ES6的剩余参数代替arguments，代码会更清晰：

String.prototype.format = function(...args) {
  let str = this.toString()
  if (args.length) {
    const formatArgs = typeof args[0] === 'object' ? args[0] : args
    for (const key in formatArgs) {
      str = str.replace(new RegExp(`\{${key}\}`, 'gi'), formatArgs[key])
    }
  }
  return str
}

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