我要评论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]",
"link:favicon": "link[rel='shortcut icon' type=image/x-icon href='${1:favicon.ico}']",
"link:mf|link:manifest": "link[rel='manifest' href='${1:manifest.json}']",
"link:touch": "link[rel=apple-touch-icon href='${1:favicon.png}']",
"link:rss": "link[rel=alternate type=application/rss+xml title=RSS href='${1:rss.xml}']",
"link:atom": "link[rel=alternate type=application/atom+xml title=Atom href='${1:atom.xml}']",
"link:im|link:import": "link[rel=import href='${1:component}.html']",
"meta": "meta/",
"meta:utf": "meta[http-equiv=Content-Type content='text/html;charset=UTF-8']",
"meta:vp": "meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}']",
"meta:compat": "meta[http-equiv=X-UA-Compatible content='${1:IE=7}']",
"meta:edge": "meta:compat[content='${1:ie=edge}']",
"meta:redirect": "meta[http-equiv=refresh content='0; url=${1:http://example.com}']",
"meta:kw": "meta[name=keywords content]",
"meta:desc": "meta[name=description content]",
"style": "style",
"script": "script",
"script:src": "script[src]",
"img": "img[src alt]/",
"img:s|img:srcset": "img[srcset src alt]",
"img:z|img:sizes": "img[sizes srcset src alt]",
"picture": "picture",
"src|source": "source/",
"src:sc|source:src": "source[src type]",
"src:s|source:srcset": "source[srcset]",
"src:t|source:type": "source[srcset type='${1:image/}']",
"src:z|source:sizes": "source[sizes srcset]",
"src:m|source:media": "source[media='(${1:min-width: })' srcset]",
"src:mt|source:media:type": "source:media[type='${2:image/}']",
"src:mz|source:media:sizes": "source:media[sizes srcset]",
"src:zt|source:sizes:type": "source[sizes srcset type='${1:image/}']",
"iframe": "iframe[src frameborder=0]",
"embed": "embed[src type]/",
"object": "object[data type]",
"param": "param[name value]/",
"map": "map[name]",
"area": "area[shape coords href alt]/",
"area:d": "area[shape=default]",
"area:c": "area[shape=circle]",
"area:r": "area[shape=rect]",
"area:p": "area[shape=poly]",
"form": "form[action]",
"form:get": "form[method=get]",
"form:post": "form[method=post]",
"label": "label[for]",
"input": "input[type=${1:text}]/",
"inp": "input[name=${1} id=${1}]",
"input:h|input:hidden": "input[type=hidden name]",
"input:t|input:text": "inp[type=text]",
"input:search": "inp[type=search]",
"input:email": "inp[type=email]",
"input:url": "inp[type=url]",
"input:p|input:password": "inp[type=password]",
"input:datetime": "inp[type=datetime]",
"input:date": "inp[type=date]",
"input:datetime-local": "inp[type=datetime-local]",
"input:month": "inp[type=month]",
"input:week": "inp[type=week]",
"input:time": "inp[type=time]",
"input:tel": "inp[type=tel]",
"input:number": "inp[type=number]",
"input:color": "inp[type=color]",
"input:c|input:checkbox": "inp[type=checkbox]",
"input:r|input:radio": "inp[type=radio]",
"input:range": "inp[type=range]",
"input:f|input:file": "inp[type=file]",
"input:s|input:submit": "input[type=submit value]",
"input:i|input:image": "input[type=image src alt]",
"input:b|input:button": "input[type=button value]",
"input:reset": "input:button[type=reset]",
"isindex": "isindex/",
"select": "select[name=${1} id=${1}]",
"select:d|select:disabled": "select[disabled.]",
"opt|option": "option[value]",
"textarea": "textarea[name=${1} id=${1} cols=${2:30} rows=${3:10}]",
"marquee": "marquee[behavior direction]",
"menu:c|menu:context": "menu[type=context]",
"menu:t|menu:toolbar": "menu[type=toolbar]",
"video": "video[src]",
"audio": "audio[src]",
"html:xml": "html[xmlns=http://www.w3.org/1999/xhtml]",
"keygen": "keygen/",
"command": "command/",
"btn:s|button:s|button:submit" : "button[type=submit]",
"btn:r|button:r|button:reset" : "button[type=reset]",
"btn:d|button:d|button:disabled" : "button[disabled.]",
"fst:d|fset:d|fieldset:d|fieldset:disabled" : "fieldset[disabled.]",
"bq": "blockquote",
"fig": "figure",
"figc": "figcaption",
"pic": "picture",
"ifr": "iframe",
"emb": "embed",
"obj": "object",
"cap": "caption",
"colg": "colgroup",
"fst": "fieldset",
"btn": "button",
"optg": "optgroup",
"tarea": "textarea",
"leg": "legend",
"sect": "section",
"art": "article",
"hdr": "header",
"ftr": "footer",
"adr": "address",
"dlg": "dialog",
"str": "strong",
"prog": "progress",
"mn": "main",
"tem": "template",
"fset": "fieldset",
"datag": "datagrid",
"datal": "datalist",
"kg": "keygen",
"out": "output",
"det": "details",
"cmd": "command",
"ri:d|ri:dpr": "img:s",
"ri:v|ri:viewport": "img:z",
"ri:a|ri:art": "pic>src:m+img",
"ri:t|ri:type": "pic>src:t+img",
"!!!": "{<!DOCTYPE html>}",
"doc": "html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+title{${1:Document}})+body",
"!|html:5": "!!!+doc",
"c": "{<!-- ${0} -->}",
"cc:ie": "{<!--[if IE]>${0}<![endif]-->}",
"cc:noie": "{<!--[if !IE]><!-->${0}<!--<![endif]-->}"
};
我在自己的配置文件中 var html$1 的定义里新增了一行：
"meta:edge_chrome_compat": "meta[http-equiv=X-UA-Compatible content='IE=Edge,chrome=1']",
然后将doc所在行改为：
//"doc": "html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+title{${1:Document}})+body",
"doc": "html[lang=${lang}]>(head>meta[charset=${charset}]+meta:edge_chrome_compat+title{${1:Document}})+body",
最后得到的结果如下，并且生成模板后，光标位于 Document 处，方便直接修改title。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>Document</title>
</head>
<body>
</body>
</html>
5. 写在最后
首先感谢xishuiinsz大神，我的这篇博客也是在看了他的 修改VS Code(即emmet语法)自动生成的HTML模板 之后，自己思考得来，可以说，前3个章节内容都是一样的，第4个章节是我自己思考得来。
有兴趣的同学可以自行尝试一下，记住，折腾之前千万记得备份配置文件哦。
本文地址：https://blog.csdn.net/qq_42123832/article/details/107492506
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论