修改VSCode中感叹号回车自动生成的HTML模板

最新推荐文章于 2022-07-13 17:44:10 发布

姚文洲

最新推荐文章于 2022-07-13 17:44:10 发布

阅读量7.1k

点赞数 1

分类专栏： VSCode 文章标签： visual studio code

本文链接：https://blog.csdn.net/qq_42123832/article/details/107492506

版权

本文介绍了如何修改Visual Studio Code (VSCode)中使用感叹号回车生成的HTML模板，包括备份配置文件、修改charset、调整光标初始位置和自定义模板内容的详细步骤。

摘要由CSDN通过智能技术生成

VSCode编写html文件时，使用英文感叹号+回车即可生成一个html的模板，本文讲述如何在一定程度上自定义这个模板。

1. 备份配置文件，以防不测

该模板由emmet语法生成，配置文件位于{VSC安装路径}\resources\app\extensions\emmet\node_modules\vscode-emmet-helper\out\expand\expand-full.js
再次强调，在修改之前请备份原本的配置文件!!!

所有修改均需要保存文件然后重启VSCode才能生效。

2. 修改charset为zh-CN

将模板中的 <html lang="en"> 改为 <html lang="zh-CN">
使用VSCode打开 expand-full.js，搜索 defaultVariables，我的是在第5679行，将下面内容中的 en 替换成 ch-CN 即可。

const defaultVariables = {
   
	//lang: 'en',
	locale: 'zh-CN',
	locale: 'en-US',
	charset: 'UTF-8'
};

3. 修改光标的初始位置

默认情况下，生成的模板，光标的初始位置为 device-width，连按三次tab键才会进入到body中。可以通过修改 expand-full.js 来解除初始光标对相应文本的选中状态。
使用VSCode打开 expand-full.js，找到 device-width的位置(我的在第4980行)，将其中的 ${n:...} 语法去除掉即可。在此处要做的就是去掉 ${1:和对应的}，同理，${2: 和对应的 } 也要去除掉。

//"meta:vp": "meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}']",
"meta:vp": "meta[name=viewport content='width=device-width, initial-scale=1.0']",

4. 自定义模板内容

在 expand-full.js 中搜索 !!! 可以找到下面内容(我的在第5096行)：

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

结合我们实际操作的行为分析可知，3个英文感叹号+回车，会触发 <!DOCTYPE html>；1个英文感叹号+回车，会触发3个感叹号的内容和doc的内容。因此我们分析doc的语法可知：在doc中添加 +xxx 即可在模板中添加下面这个变量中的相应的值：

var html$1 = {
   
	"a": "a[href]",
	"a:blank": "a[href='http://${0}' target='_blank' rel='noopener noreferrer']",
	"a:link": "a[href='http://${0}']",
	"a:mail": "a[href='mailto:${0}']",
	"a:tel": "a[href='tel:+${0}']",
	"abbr": "abbr[title]",
	"acr|acronym": "acronym[title]",
	"base": "base[href]/",
	"basefont": "basefont/",
	"br": "br/",
	"frame": "frame/",
	"hr": "hr/",
	"bdo": "bdo[dir]",
	"bdo:r": "bdo[dir=rtl]",
	"bdo:l": "bdo[dir=ltr]",
	"col": "col/",
	"link": "link[rel=stylesheet href]/",
	"link:css": "link[href='${1:style}.css']",
	"link:print": "link[href='${1:print}.css' media=print]",