VS Code运行JS项目Chrome启动弹出settings.json运行失败如何解决

弹出空settings.json的核心原因有两个：

1. 浏览器无法直接运行本地独立的.js文件，必须通过HTML页面引入JS代码才能执行，你直接选中JS文件触发Chrome运行时，调试扩展找不到可加载的入口页面
2. 你触发运行操作时，VS Code当前工作区没有配置合法的Chrome调试规则，扩展错误跳转打开了工作区设置文件，这个文件本身不负责调试运行配置，默认内容就是空对象{}

不用折腾VS Code的运行配置，直接按下面操作：

• 在你存放99瓶啤酒JS代码的文件夹里，新建一个名为index.html的文本文件，写入以下内容，注意把src属性里的文件名换成你自己写的JS文件的实际名字：

<!DOCTYPE html>
<html>
<body>
<script src="99bottles.js"></script>
</body>
</html>

• 确认你的JS代码里用console.log()输出每一句歌词，不然运行后看不到结果
• 直接双击这个index.html文件，系统会默认用Chrome打开页面
• 页面打开后按F12调出开发者工具，切换到Console面板，就能看到你写的循环输出的所有99瓶啤酒歌词，直接验证代码逻辑是否正确

如果需要在VS Code里直接触发运行，按以下步骤配置：

1. 先确认VS Code已经安装了内置的JavaScript Debugger扩展（新版VS Code默认自带，没装的话在扩展面板搜索安装即可）
2. 在你的代码文件夹根目录新建名为.vscode的文件夹，在里面新建launch.json文件，写入以下配置：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "启动Chrome运行页面",
            "file": "${workspaceFolder}/index.html"
        }
    ]
}

3. 保存配置后，按F5，选择「启动Chrome运行页面」选项，就会自动唤起Chrome加载你的页面，同样按F12打开控制台就能看运行结果。

注意：不要往弹出的空settings.json里填调试相关配置，这个文件是用来存编辑器设置的，和运行调试无关。

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