如何在Visual Studio 2017中同时显示.ts与.js文件？已装插件仍无效

我来帮你搞定这个困扰——在VS2017里想让.ts文件像示例那样嵌套显示对应的.js、.js.map文件，虽然装了Web Essentials 2017但没生效？试试下面这些分步排查的方法：

1. 先试试VS2017内置的文件嵌套功能 #

其实VS2017本身就支持文件嵌套，不一定依赖插件。操作步骤：

• 打开解决方案资源管理器，点击顶部「显示所有文件」按钮旁边的下拉箭头，选择「文件嵌套」→「配置」
• 在弹出的配置窗口中，查找TypeScript相关的规则。确保存在这样的条目：
  • 父文件模式：*.ts
  • 子文件模式：*.js;*.js.map;*.d.ts
  • 操作：「嵌套在下方」
• 如果没有这条规则，手动添加后保存配置，重启VS再看看效果。

2. 确认Web Essentials 2017的配置是否开启 #

插件可能默认没开启嵌套功能，检查一下：

• 点击顶部菜单「工具」→「选项」，在左侧导航栏找到「Web Essentials」→「TypeScript」
• 确保「启用TypeScript文件嵌套」选项处于勾选状态
• 另外，如果你是自动编译TS，也可以确认「自动生成JavaScript和Source Map文件」是否勾选（手动编译的话这条不影响嵌套，但自动生成能保证文件同步）

3. 检查tsconfig.json的编译配置 #

如果项目里有tsconfig.json，输出路径不对也会导致无法嵌套：

• 打开tsconfig.json，确认以下关键配置：

  {
    "compilerOptions": {
      "outDir": "./", // 输出目录和TS文件同目录，这样生成的JS文件才会和TS在同一位置
      "sourceMap": true, // 生成map文件，方便调试和嵌套
      "declaration": false // 如果需要.d.ts声明文件可以设为true
    },
    "include": ["**/*.ts"]
  }
  

• 注意：如果outDir设置到了其他子目录，生成的JS文件不在TS文件同目录，VS就没法自动关联嵌套。

4. 手动强制嵌套单个文件（临时方案） #

如果上面的方法都没起效，可以先手动嵌套单个文件验证效果：

• 在解决方案资源管理器中，右键点击要嵌套的.js文件，选择「嵌套」→「嵌套在...」，然后选择对应的.ts文件
• 这是临时解决办法，但能快速确认VS是否支持该文件的嵌套。

5. 修复插件或重置VS设置 #

如果插件安装有异常，试试这些操作：

• 先禁用再重新启用Web Essentials：点击「工具」→「扩展和更新」，找到Web Essentials 2017，点击「禁用」，重启VS后再启用
• 若还是不行，尝试重置VS设置：「工具」→「导入和导出设置」→「重置所有设置」，之后重新配置插件和文件嵌套
• 极端情况可以卸载Web Essentials，重启VS后重新安装对应VS2017版本的插件

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