使用VS Code写HTML时，每次”!+Tab”之后还要修改lang和viewport，十分麻烦。通过自定义Emmet的Snippets，可以一劳永逸，舒服啊！

找到expand-full.js文件

  • 在应用程序（Application）中找到Visual Studio Code，右键点击，选择“显示包内容”；
  • 在以下路径中找到expand-full.js文件；

/Contents/Resources/app/extensions/emmet/node_modules/vscode-emmet-helper/out/expand/expand-full.js

修改expand-full.js文件

修改lang为zh-CN

  • 找到defaultVariables，将lang修改为zh-CN；
  1. const defaultVariables = {
  2.         lang: 'zh-CN',
  3.         locale: 'en-US',
  4.         charset: 'UTF-8'
  5. };

修改viewport

  • 找到meta:vp，进行修改；
  1. "meta:vp": "meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}, minimum-scale=${3:1.0}, maximum-scale=${4:1.0}, user-scalable=${5:no}']",

实现效果

最后实现的效果如下：
Feb-20-2020 11-05-09.gif

即：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport"
  7.         content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  13. </body>
  15. </html>

以此类推，触类旁通，也可以自定义其他Emmet代码片段。