如何重构含变量的JavaScript字符串配置以获得IntelliSense？

核心问题分析 #

你当前的尝试存在两个关键问题：

1. JSON.stringify会忽略对象中的函数属性（onReady），导致生成的结果丢失该配置项；
2. 原配置字符串是一段完整的JS代码（包含var声明、函数表达式），而你返回的是纯对象，无法直接转换为与原字符串完全一致的内容。

要同时满足IntelliSense智能提示、支持变量替换、输出与原配置完全一致这三个需求，可按以下步骤实现：

1. 添加类型定义实现IntelliSense #

通过JSDoc（JS环境）或TypeScript类型注解，让编辑器识别配置结构，提供智能提示：

JS环境（JSDoc）

/**
 * @typedef {Object} ConfigOptions
 * @property {boolean} enableProp - 启用状态配置
 * @property {string} style - 样式类型
 * @property {function(): boolean} onReady - 就绪回调函数
 */

/**
 * 生成目标配置字符串的函数
 * @param {string} val - style属性的变量值
 * @returns {string} 与原配置完全一致的字符串
 */
const generateConfig = (val) => {
  // 把变量中的双引号转义为HTML实体"，匹配原配置的格式
  const escapedStyle = val.replace(/"/g, '"');
  // 用模板字符串严格复刻原配置的格式（缩进、换行、代码结构）
  return `
  var configOptions =  {
    enableProp: true,
    style: ${escapedStyle},
    onReady: function() {
        return true
    }
  }
    `;
};

TypeScript环境

// 定义配置结构的接口
interface ConfigOptions {
  enableProp: boolean;
  style: string;
  onReady: () => boolean;
}

/**
 * 生成目标配置字符串的函数
 * @param val - style属性的变量值
 * @returns 与原配置完全一致的字符串
 */
const generateConfig = (val: string): string => {
  const escapedStyle = val.replace(/"/g, '"');
  return `
  var configOptions =  {
    enableProp: true,
    style: ${escapedStyle},
    onReady: function() {
        return true
    }
  }
    `;
};

2. 关键细节处理 #

• 转义处理：原配置中style的值是HTML转义的双引号（"plain"），因此需要将输入变量中的双引号替换为"，保证输出格式完全匹配；
• 格式复刻：模板字符串严格保留原配置的缩进、换行、var声明及onReady函数的写法，确保生成的字符串与原内容完全一致；
• 变量灵活性：通过参数val传入动态值，同时保留所有固定配置项。

使用示例 #

// 生成与原配置完全一致的字符串
const res = generateConfig("plain");
console.log(res); // 输出结果与existingConfig完全相同

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