sublime 前端开发工具
http://code.kpman.cc/2014/10/14/sublime-text-3-mac-指南/
gif 屏幕录制:http://recordit.co/ 或者 http://www.cockos.com/licecap/
http://blog.wpjam.com/m/emmet-grammar/
Sublime 前端开发工具
天下武功唯快不破,在项目开发中善于总结经验,提高开发效率。也是一名优秀的工程狮的必备技能。对于编程来说,一款顺手的IDE至关重要。而对于前段工程狮来说 Sublime Text就是一款非常有趣的IDE。善于发现和利用其优势,可以用来打造自己的前端开发工作流。
常用快捷键
快捷键 | 含义 |
---|---|
Ctrl+O | 快速开启整个文件夹 |
Ctrl+W | 关闭当前页面 |
Ctrl+N | 新建页面 |
Ctrl+Shift+T | 重新开启刚关闭的页面 |
Ctrl+Shift+V | 粘贴代码保持缩进 |
Ctrl+F | 查找 |
Ctrl+H | 替换 |
Ctr+L | 选择当前行 |
Ctr+D | 选中当前单词,继续敲可以选中多个 |
Cmd+/ | 注释掉/取消注释 |
Ctrl+} | 增加缩进 |
Ctrl+Tab | 切换页面 |
Ctrl+K,Ctrl+B | 显示隐藏sidebar |
Shift-Ctrl-enter | 当前行之前开辟一行 |
Ctrl+Shift+K | 删除整行 |
Shift+F11
(或者View --> Enter Distraction Free Mode
)进入zen状态,单份文件变成全屏幕,且左边会自动缩排。 使用情境:当不需要切换页面时,如写blog。
Goto Anything
Ctrl+P
可以快速跳转到当前项目中的任意文件,可进行关键词匹配,支持模糊匹配.Ctrl+P
+"@"+function name
此功能等同于Ctrl+R
可以快速跳转到定义的function(css选择器).Ctrl + Shift + F
全文搜索,可以找出整个Project内的关键字.Ctrl+P
+:
+行数
此功能等同于Ctrl+G
可以快速的跳到指定行数.
多行游标
产生多行游标的四种方法:
第一种方法:Ctrl+D
,使用 Ctrl+D
选择词的过程中可以使用 Ctrl+K
跳过本次选中。
第二种方法:Alt+F3
多选
第三种方法:Ctrl+A
,Ctrl+Shift+L
第四种方法:使用 “shift+ 鼠标右键点击”可以产生多行游标.
Ctrl+J
合并行,Ctrl+Shift+K
删除行,Ctrl+Shift+D
重复行
Emmet
emmet是一款编辑器插件,是由Zen Coding的原作者就进行开发。
安装Emmet,使用sublime安装插件最便利的方式就是通过Package Control进行安装。如果还没装Package Control?不要紧,通过快捷键Ctrl+\
或者View>Show Console菜单打开控制台,输入以下Python执行代码:
import urllib.request,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib.request.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
安装完成后,通过Shift+Ctrl+P
呼出面板,输入"pci"即可锁定"Package Control:Install Package",回车之后可以看到一个列表,继续输入"emmet"即可找到插件,再次回车等待片刻就安装完成。
Emmet 的工作流程:打开 HTML 或 CSS 文件->按语法编写指令->摁下 TAB 键->生成!
ex: #page>div.logo+ul#navigation>li*5>a{Item $}
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
Sublime还有其他不少优秀的插件
- snippets以模板的方式编程
- advanceNewfile
- httpRequest
- nettus fetch
- sidebarenhancement
- 使用lint进行语法及风格校验
sublime 前端开发工具的更多相关文章
- 一、HTML和CSS基础--开发工具--Sublime前端开发工具技巧介绍
下载:官网下载(根据系统下载) 安装:按步骤安装即可 注意:当前稳定版本为2,但3的功能有提升:Mac和Windows下的快捷键不同 优点:启动速度快,界面简洁,可以直接打开图片. 1 菜单栏主要功能 ...
- sublime前端开发工具常用技巧
ctrl+N//新建文件夹ctrl+shift+p//打开命令行!,ctrl+E//快速生成html模板ctrl+E//自动补齐ctrl+P(#@)//goto 任何地方,其中#查找元素,@查找样式c ...
- Sublime Text前端开发工具介绍
Sublime Text前端开发工具介绍.. Sublime Text这款前端开发工具中的非常优秀的特性进行介绍 ------------ sublime text 3 3114 注册码 —– BEG ...
- Web前端开发工具总结
前端开发工具: web前端开发乃及其它的相关开发, 推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs. ...
- 超高速前端开发工具——Emmet
[由于 CSDN 不支持富文本编辑器写的文章迁移到 Markdown 编辑器中修改,已重发了一个重新排版的版本, 新版链接:http://blog.csdn.net/ys743276112/artic ...
- 在线调试和演示的前端开发工具------http://jsfiddle.net/
在线调试和演示的前端开发工具------http://jsfiddle.net/
- 【翻译】我钟爱的Visual Studio前端开发工具/扩展
原文:[翻译]我钟爱的Visual Studio前端开发工具/扩展 怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做 ...
- 【前端开发工具】WijmoJS 2018 v3 正式发布,全面支持Angular7
WijmoJS(前端开发工具包)2018年度第三个大版本已经正式发布,本次更新除了全面支持Angular7之外,还允许用户使用Web Workers在前端更高效地导出PDF.智能的分组表头属性.全新的 ...
- 前端开发工具icestar
前端开发工具icestar 最近忙里偷闲,把之前的mock工具进行了全面的重构,最大的改变就是换了个名称icestar,icestar意思就是"爱死他",首先他的预想并不只是替代m ...
随机推荐
- Global.asax使用2
ASP.NET中利用Application和Session统计在线人数.历史访问量 先来简单说一下ASP.NET中的Application和Session 下图是我们非常熟悉的Web应用程序的结构: ...
- MySQL 基础 之 语句执行顺序
FORM: 对FROM的左边的表和右边的表计算笛卡尔积.产生虚表VT1 ON: 对虚表VT1进行ON筛选,只有那些符合<join-condition>的行才会被记录在虚表VT2中. JOI ...
- ExtJS 饼状图报表
简单的ExtJS饼状图报表. 先上源码,咱再慢慢解析: Ext.onReady(function(){ var store = Ext.create('Ext.data.JsonStore', { f ...
- (原+转)使用opencv的DFT计算卷积
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5462665.html 参考网址: http://blog.csdn.net/lichengyu/art ...
- windows 下查看端口占用命令
cmd netstat -ano
- java压缩文件出现中文乱码问题
在项目中需要压缩文件下载,做完了发现有中文乱码问题,终于明白了. 引入ant.jar包 import org.apache.tools.zip.ZipEntry; import org.apach ...
- C# 给自己的代码 添加上 自己的版权信息
如何将自己的代码自动添加版权信息 现在大多数公司都规定程序员在程序文件的头部加上版权信息,这样每个人写的文件都可以区分开来,如果某个文件出现问题就可以快速的找到文件的创建人,用最短的时间来解决问题,常 ...
- Web框架-Django基础
一.django简介 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内 ...
- LFS,编译自己的Linux系统 - 编译临时系统
编译GCC-4.8.2 PASS 1 解压并重命名 cd /mnt/lfs/sources tar -Jxf ../mpfr-3.1.2.tar.xz mv mpfr-3.1.2 mpfr tar - ...
- C语言编译过程简介
刚开始接触编程的时候,只知道照书敲敲代码,一直都不知道为什么在windows平台下代码经过鼠标那样点击几下,程序的结果就会在那个黑色的屏幕上.现在找了个机会将C语言的编译原理做一下小小的总结,这样也能 ...