HTML5学堂-码匠 HTML5学堂

您当前位于:开发工具 ——> sublime编辑器的操作方法

sublime编辑器的操作方法

2016/03/17 21:54:25 | 作者:HTML5学堂(码匠) | 分类:开发工具 | 关键词:sublime,代码编辑器,插件

sublime方法

HTML5学堂:前面介绍过sublime安装和配置方法,也介绍过sublime的快捷键,今天给大家介绍下模板设置,同时介绍一个非常实用的插件。

快捷模板设置

编写代码时我们经常实用快捷键产生代码,比如html的基本结构我们都是直接使用"!" + "tab"直接产生一个html结构,但有的时候我们会需要一个固定的模板,自带viewport引入jQuery等等。比如我们需要一个移动端需要的模板

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.     <script src="../js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     
  11. </body>
  12. </html>

第一步

打开工具—选择新代码段:

sublime 选择新代码段

第二步

打开后,我们会看到这样

sublime 替换模板内容

“Hello, ${1:this} is a ${2:snippet}.”这句就是我们需要替换的模板内容。

tabTrigger设置快捷键

scope设置这个快捷键控制的类型

基本设置好了之后:

sublime 完成基本设置之后

第三步

设置好后需要保存,但是保存需要特别注意文件后缀必须为".sublime-snippet",保存后就可以使用"hello" + "tab"快捷产生代码了。快去试试吧。

插件推荐

网上下载的sublime一般会自带插件Package Control,这个插件非常方便,可以用于查找安装更新插件。

首先咱们升级下Package Control,打开首选项-Package Control然后update一下,升级后我们就可以用它来找到更多有意思的插件了。

每次返回目录查找资源是件非常痛苦的事情,AutoFileName这个插件就解决了我们的苦恼了,这个插件可以自动找到目录,并让你选择目录下的资源。

插件效果

打开Package Control选择Install Package会出来一个列表,里面有非常多的插件资源。

sublime 各类插件资源

搜索并选择AutoFileName,sublime的左下方会有一个加载状态提示,安装完毕后就可以使用了。非常实用的一个插件,快去试试吧。

找不到sublime配置方法和快捷键请看这里:Sublime Text插件安装与配置方法Sublime Text 常用快捷键

HTML5学堂小编 - 其其 耗时1.5h

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端