VScode实现HTML的编写、运行和调试&推荐插件

最新推荐文章于 2025-02-25 16:36:46 发布

狗狗狗狗狗乐啊

最新推荐文章于 2025-02-25 16:36:46 发布

阅读量8.5w

点赞数 88

分类专栏：编程工具文章标签： html js chrome

本文链接：https://blog.csdn.net/weixin_44122062/article/details/105121204

版权

编程工具专栏收录该内容

11 篇文章

订阅专栏

VScode的下载地址：VScode官网

将VScode设置为中文语言环境

在拓展程序页面搜索该名称的插件：

Chinese (Simplified) Language Pack for Visual Studio Code

在这里插入图片描述
即为上图所展示的插件，点击2处的绿色“Install”即可下载（这里已经下载过了，所以显示的是设置图标），然后按照提示重启软件后即为中文。

如果重启后仍不为中文，可以使用Ctrl+Shift+P唤起搜索栏，在其中输入：

Configure Display Language

选择其对应项，再选择“zh-cn”选项，再次重启软件后，即为中文。

编写HTML文件

在项目内新建文件后，VScode并不知道你想要写什么，所以默认为“纯文本”格式，右下角显示为“纯文本”。
在这里插入图片描述
点击“纯文本”后选择HTML语言，在第一行输入“！”，然后按下Tab即可快速生成标准的HTML代码。

运行HTML文件

当然了，写好之后就是要运行了，这里可以安装：

View In Browser

拓展插件，安装方法与安装中文简体插件的方式相同，其展示页如下：
在这里插入图片描述
安装完成后，返回你要运行的文件界面，右击该文件，选择“View In Browser”选项，即可在默认浏览器中运行该文件。

提示：VScode不会像HBuilder X那样每次运行前提示保存，所以每次运行前请先手动保存。

调试你的HTML文件

调试文件所需的插件为：

Debugger for Chrome

其安装方法与安装中文简体插件的方式相同，其展示页如下：
在这里插入图片描述
安装完成后返回代码界面，按下F5，选择“Chrome”，会转到launch.json文件，如果没有转到launch.json的话，可以前往“运行和调试”——“创建launch.json文件”进行创建。

在这里插入图片描述

在打开的launch.json页面中添加如下语句：

		,
		{
			"name": "使用本机 Chrome 调试",
			"type": "chrome",
			"request": "launch",
			"file": "${workspaceRoot}/index.html",        //需要调试的代码页面的路径
		//  "url": "http://mysite.com/index.html",        //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
			"runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
			"sourceMaps": true,
			"webRoot": "${workspaceRoot}",
		//  "preLaunchTask":"build",
			"userDataDir":"${tmpdir}",
			"port":5433
		}

其中的第一行的“，”不要忘记，谷歌浏览器的安装路径改为自己的，需要调试的页面如果不是“index.html”请更改为相应的名字。添加后的代码布局大致为：
在这里插入图片描述
然后在“运行和调试”中选择“使用本机Chrome调试”。

在这里插入图片描述

在需要添加断点的地方，点击某行的最前方空白处即可添加断点。右键需要监视的变量，即可添加到监视，准备工作完毕后按F5即可进行调试。

在这里插入图片描述
其中调试控制台的几个按钮分别为“暂停/继续”、“单步跳过”、“单步调试”、“单步跳出”、“重启”和“停止”。

添加用户代码片段

每次码代码都想偷懒，希望一个缩写就能完成重复且枯燥的常用语句，VScode可以自定义用户代码段，让自己所输入的就是自己所想的。

点击“文件”——“首选项”——“用户代码段”，选择自己要定义哪些语言的自定义片段，HTML选择“html.json”，JS选择“javascript.json”，以此类推… …

进入对应的文件后，可以输入以下片段：

	"document.write": {
        "prefix": "dw", // 触发的关键字 输入dw按下tab键
        "body": [
			"document.write(\" \")",
        ],
        "description": "document输出"
	}

即输入dw后按Tab即可显示为document.write(" ")，其中prefix为用来触发自定义代码段的关键字，body为自定义的代码段，description为备注。当然可以输入多条，中间用“，”分隔，如下图所示：

在这里插入图片描述
用户自定义的代码段关键字（应该）不会与对应语言的保留关键字发生冲突，所以不必担心命名问题。

推荐插件

背景插件——background

在拓展中搜索：

background

其安装方法与安装中文简体插件的方式相同，其展示页如下：
在这里插入图片描述
首次安装后会提示报错，选择不再提示即可。

选择“文件”——“首选项”——“设置”，在设置搜索栏中输入“background”，然后选择"在settings.json中编辑"。

在这里插入图片描述

在文件中添加以下代码段：

    "workbench.startupEditor": "newUntitledFile",
    //background 的相关配置
    "update.enableWindowsBackgroundUpdates": false,
    "background.customImages": [
        "file:///D:/办公软件/show.png"     //背景图片路径
    ],
    "background.style": {
        "content":"''",
        "pointer-events":"none",
        "position":"absolute",            //图片显示位置
        "width":"100%",
        "height":"100%",
        "z-index":"99999",
        "background.repeat":"no-repeat",
        "background-size":"15%,15%",      //图片大小
        "opacity":0.3                     //图片透明度
    }
    "background.useFront": true,
    "background.useDefault": false,