当前位置: 首页 > Web前端 > HTML5

如何修改VSCode中预设的Emmet配置

时间:2023-04-05 16:52:27 HTML5

背景VSCode中预装了Emmet插件,利用其语法可以快速构建HTML结构。默认展开代码如下:文档当项目需求需要添加或修改预设值时,默认语法简单,手动添加和修改标签和属性比较麻烦。例如京东前端团队傲兔工作室使用的初始化HTML文件:PCHTMLtemplate使用Emmet语法解决To快速搭建上面例子的结构,需要修改VSCode中预设的Emmet配置,下面给出两种解决方案。版本:VisualStudioCode1.43.2安装路径:A:MicrosoftVSCode\修改默认配置文件路径:A:\MicrosoftVSCode\resources\app\extensions\emmet\node_modules\vscode-emmet-helper\out\expand\expand-full.js操作://1.添加/修改Emmet语法//打开expand-full.js,找到变量html$1//变量html$1保存的是键值对的语法,以及语法格式is{"grammar":"label[property]"}//示例如下://varhtml$1={//"a":"a[href]",//"meta:desc":"meta[name=descriptioncontent]",//"meta:compat":"meta[http-equiv=X-UA-Compatiblecontent='${1:ie=edge},${2:chrome=1}']"}//2.插入默认值//打开expand-full.js,在变量html$1中找到键值“doc”//键值“doc”将需要生成的标签存储为键值对,并且语法格式为{"label[attribute]"+|>"label[property]"}//例子如下:varhtml$1={//"!!!":"{}",////////////////////<%=htmlWebpackPlugin.options.title%>//////

////"doc":"html[lang=${lang}]>(head>meta[charset=${charset}]+meta:kw+meta:desc+meta:author+meta:robots+meta:compat+meta:renderer+title{${1:<%=htmlWebpackPlugin.options.title%>}})+(body>div.content)",//////////////////////<%=htmlWebpackPlugin.options.title%>//////
////"!|html:5":"!!!+doc",}添加自定义配置暂未研究