互联网技术 · 2024年2月19日

修改VScode默认生成的HTML模板的方法

这篇文章主要介绍了VScode修改默认生成的HTML模板的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

在VScode中,新建HTML页面时可以输入!+tab键,快速生成HTML代码模板,默认生成的代码模板如下:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
</body>
</html>

由于生成的代码模板中有一些不需要,所以每次生成后都需要删除,很麻烦。其实我们可以修改默认生成的HTML代码模板。

操作步骤:

1.找到VScode安装目录下的expand-full.js文件

路径为

VScoderesourcesappextensionsemmetnode_modulesvscode-emmet- helperoutexpandexpand-full.js

2.利用编辑器搜索lang

找到下列代码区域

“!!!”: “{<!DOCTYPE html>}”,
“doc”: “html>(head>meta[charset=${charset}]+title{${1:Document}})+body”,
“!|html:5”: “!!!+doc”,

修改为

“!!!”: “{<!DOCTYPE html>}”,
// “doc”: “html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+meta:edge+title{${1:Document}})+body”,
“doc”: “html>(head>meta[charset=${charset}]+title{${1:Document}})+body”,
“!|html:5”: “!!!+doc”,

3.重启VScode

再次输入!+tab键时,此时默认生成的代码模板已更改,如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body>
</body>
</html>

到此这篇关于VScode修改默认生成的HTML模板的方法的文章就介绍到这了。

OpenMagic API

Need more than content? Move into the product flow.

If you are here for model access, pricing, developer docs, or the future API console, the dedicated product path now lives on api.openmagic.ai.

登录免费注册