vscode运行js文件成功后在html中点击链接还是打不开

Posted 2023-04-23

参考技术A 点击运行菜单打开应用，点击运行菜单。

2/8
点击添加配置选项打开下拉菜单，点击添加配置选项。

3/8
选择启动选项选择Chrome: Launch

vscode怎么运行javascript

1、直接按F5可以调试的方法或者点击运行按钮（可以直接运行html文件或者js文件）

在launch.json文件中的配置如下：

"version": "0.2.0",

"configurations": [

"name": "谷歌浏览器", //运行html文件，用谷歌浏览器打开

"type": "chrome",

"request": "launch",

"url": "$file",

"sourceMaps": true,

"webRoot": "$workspaceRoot"

,

"name": "nodeLauch", //单独调试js，即可以直接运行js

"type": "node",

"request": "launch",

"program": "$file", //这个配置成你要调试的文件、$file当前打开的文件

"stopOnEntry": false,

"args": [],

"cwd": "$workspaceRoot",

"runtimeExecutable": null,

"runtimeArgs": [

"--nolazy"

],

"env":

"NODE_ENV": "development"

,

"console": "internalConsole",

"preLaunchTask": "",

"sourceMaps": false,

"outDir": null

]

2、第二种方法 Ctrl+Shift+B 快捷键运行html文件，在Tasks.json中配置如下：

"version": "0.1.0",

"command": "",

"isShellCommand": false,

"args": ["$file"],

"showOutput": "always",

"windows":

"command": "C:/Users/shannonliang/AppData/Local/Google/Chrome/Application/chrome.exe"

,

"tasks": [

"taskName": "webserver",

"isBuildCommand": true,

"showOutput": "always"

]

3、如果第二种方法，不想每次都按这个快捷键，请参考npm配置node服务方法：

http://stackoverflow.com/questions/30039512/how-to-view-my-html-code-in-browser-with-visual-studio-code

参考技术A vscode使用task.json来配置项目的构建过程。
打开命令面板(Ctrl+Shift+P)选择Run Build Task(Ctrl+Shift+B)

如果当前工作空间没有task.json配置文件此时会出现提示

选择 Configure Task Runner 自动创建task.json。该配置文件在工作空间的.vscode目录下，这个目录也是存放vscode配置的文件夹。
vscode默认的task配置文件中给出了执行tsc 和 gulp模板配置。简单介绍一下task.json的写法

"version": "0.1.0",

// 要使用的命令或者可执行文件的路径
"command": "tsc",

// 对应command参数，是否是一个命令，否则为执行文件路径
"isShellCommand": true,

// 是否在执行task任务时显示控制台窗口
"showOutput": "always",

// 对应command参数指定程序的参数
"args": ["-p", "src", "--allowJs", "-w"],

// 不太明白这个，基本用不到
"problemMatcher": "$tsc",


另外还有更多参数和用法可以参照下面的官方文档
https://code.visualstudio.com/docs/editor/tasks
配置好了之后使用默认的快捷键Ctrl+Shift+B即可执行编译。
运行和调试项目
vscode默认支持nodejs，ts，js等项目的调试。使用launch.jsonp配置调试参数。
调试启动调试的默认快捷键是F5， 如果没有launch.json则会弹窗提示选择调试环境，并自动创建launch.json本回答被提问者采纳