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 ...
随机推荐
- OutputCache各参数的说明
OutputCache各参数的说明 Duration 缓存时间,以秒为单位,这个除非你的Location=None,可以不添加此属性,其余时候都是必须的. Location Location当被设置为 ...
- C# 获取配置文件节点值
<?xml version="1.0" encoding="utf-8" ?><configuration> <appSetti ...
- React react-ui-tree的使用
公司需要做一个IDE,要做IDE当然少不了文件列表了.下面我就来展示一下刚刚研究的一个库. 下面是链接:https://react.rocks/example/react-ui-tree 至于如何导入 ...
- application windows are expected to have a root view controller错误
产生这个提示的操作:在xcode4.6中创建一个名字为appTest空工程,create一个ios-application-empty application,直接编译运行 错误提示:虽然编译通过,也 ...
- build opencv with python support
cmake -DPYTHON_LIBRARY=/opt/anaconda/lib/libpython2.7.so -DPYTHON_INCLUDE_DIR=/opt/anaconda/include/ ...
- 评论PK投票功能的手机版
ajax投票.点赞.回复,投票后自动转到查看投票结果,投票结果进度条动画显示 地址:http://files.cnblogs.com/files/macliu/hyw_wap.rar 效果图: 首页:
- ActionBar-PullToRefreshLibs+沉浸式在部分手机上的布局错乱,目前知道的三星
前段时间看见ActionBar-PullToRefreshLibs用来刷新很好看,配合4.4以上支持的沉浸式效果更佳,于是便想配合沉浸式+ActionBar-PullToRefreshLibs做出一个 ...
- POP3、SMTP、IMAP和Exchange都是个什么玩意?
很多时候一直对POP3.SMTP.IMAP和Exchange等迷迷糊糊的.下面就整理说明一下: 当前常用的电子邮件协议有SMTP.POP3.IMAP4,它们都隶属于TCP/IP协议簇,默认状态下,分别 ...
- Ring3下Hook NtQueryDirectoryFile隐藏文件
NTSTATUS WINAPI Hook_NtQueryDirectoryFile(IN HANDLE FileHandle,IN HANDLE Event OPTIONAL,IN PIO_APC_R ...
- UESTC_秋实大哥带我飞 2015 UESTC Training for Graph Theory<Problem B>
B - 秋实大哥带我飞 Time Limit: 300/100MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Submit ...