唯品秀前端博客
当前位置: 别具匠心 > Visual Studio Code自定义html5模板

Visual Studio Code自定义html5模板

2018-10-25 分类:别具匠心 作者:管理员 阅读(3793)

现如今前端用的最多开发工具恐怕就是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 的意思是回车换行

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(7) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
7

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 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有接口地址

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

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

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

      @轩陌加上邮件通知了

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 245 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 6 个
  • 评论总数: 875 条
  • 链接总数: 14 个
  • 标签总数: 436 个
  • 建站时间: 1086 天
  • 注册用户: 4198 人
  • 访问总量: 8743220 次
  • 最近更新: 2019年12月4日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线