唯品秀前端博客

现如今前端用的最多开发工具恐怕就是Visual Studio Code,但我们每次新建html模板时候,是否总是感觉太单调,如果能像其他编辑器样能定制一套属于自己的模板那该多好,其实是完全可以的的

找到html.json文件

右上角文件 ->首选项 -> 用户代码片段 ->html.json文件,如下图

当然,喜欢命令的小伙伴也可以直接:键盘快捷键Ctr+Shift+P搜索关键字snippet,回车,选择列表上html


不管怎么样,你最终打开的大概就是如下图这么个文件,内容也许有所不同,格式是不是就这么回事儿?

打造自己的模板

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "full sample": {
        "prefix": "html 自定义模板", //对应的是你使用这个模板时候的快捷键,当你输入html就会出现对应的一堆木板,其中就有个“html 自定义模板”
        "body": [
            "<!DOCTYPE html>\n\n<head>\n\t<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n\t<meta name="viewport" content="width=device-width, initial-scale=1">\n\t<meta name="keywords" content="关键词">",
            "\t<meta name="description" content="网站描述">\n\t<title>网站标题</title>",
            "\t<script type="text/javascript" src="https://www.baidu.com"> </script>\n</head>\n\n<body>",
            "\t<div id="container"></div>",
            "</body>\n\n</html>"
        ],
        "description": "The full sample code - 我是一个模板"
    }
}

注意,它是个json格式文件,那么很显然,你可以再次编辑N多个模板供你使用

简单说说几个常用转义字符含义

1
2
3
4
\t \r \n都是转义字符,空格就是单纯的空格,输入时可以输入空格
\t 的意思是 横向跳到下一制表符位置
\r 的意思是 回车
\n 的意思是回车换行
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(8) 打赏

上一篇:

下一篇:

相关推荐

7 条评论关于"Visual Studio Code自定义html5模板"

表情

最新评论

  1. 轩陌
    Mac OS X Chrome 71.0.3578.98

    你这终于不用那个啥知言做评论了啊,那玩意太费劲了,又是登录注册的不方便

    1. 唯品秀前端技术博客
      Mac OS X Chrome 70.0.3538.110

      @轩陌主要是竟然给我搞广告,搞广告我还忍了,竟然还经常崩溃,不是请求失败就是找不到头像,体验贼差

      1. 轩陌
        Mac OS X Chrome 71.0.3578.98

        @唯品秀前端技术博客看见那种需要登录什么的就不评论了,太麻烦,你这个评论等级还有浏览器是学我么

        1. 唯品秀前端技术博客
          Mac OS X Chrome 70.0.3538.110

          @轩陌样式拿的你的,大佬,教我怎么定制下REST API接口,我也想升级下主题

          1. 轩陌
            Mac OS X Chrome 71.0.3578.98

            @唯品秀前端技术博客你这回复没有邮件通知,体验不好,我github有接口地址

            1. 唯品秀前端技术博客
              Windows 10 Chrome 57.0.2987.98

              @轩陌只会通知我自己,你github里我看了,通过xm-api.php去注册的,但我拿来用就报错

    2. 唯品秀前端技术博客
      Windows 10 Chrome 57.0.2987.98

      @轩陌加上邮件通知了

  2. 暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏