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+ACtrl+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 前端开发工具的更多相关文章

  1. 一、HTML和CSS基础--开发工具--Sublime前端开发工具技巧介绍

    下载:官网下载(根据系统下载) 安装:按步骤安装即可 注意:当前稳定版本为2,但3的功能有提升:Mac和Windows下的快捷键不同 优点:启动速度快,界面简洁,可以直接打开图片. 1 菜单栏主要功能 ...

  2. sublime前端开发工具常用技巧

    ctrl+N//新建文件夹ctrl+shift+p//打开命令行!,ctrl+E//快速生成html模板ctrl+E//自动补齐ctrl+P(#@)//goto 任何地方,其中#查找元素,@查找样式c ...

  3. Sublime Text前端开发工具介绍

    Sublime Text前端开发工具介绍.. Sublime Text这款前端开发工具中的非常优秀的特性进行介绍 ------------ sublime text 3 3114 注册码 —– BEG ...

  4. Web前端开发工具总结

    前端开发工具: web前端开发乃及其它的相关开发, 推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs. ...

  5. 超高速前端开发工具——Emmet

    [由于 CSDN 不支持富文本编辑器写的文章迁移到 Markdown 编辑器中修改,已重发了一个重新排版的版本, 新版链接:http://blog.csdn.net/ys743276112/artic ...

  6. 在线调试和演示的前端开发工具------http://jsfiddle.net/

    在线调试和演示的前端开发工具------http://jsfiddle.net/

  7. 【翻译】我钟爱的Visual Studio前端开发工具/扩展

    原文:[翻译]我钟爱的Visual Studio前端开发工具/扩展 怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做 ...

  8. 【前端开发工具】WijmoJS 2018 v3 正式发布,全面支持Angular7

    WijmoJS(前端开发工具包)2018年度第三个大版本已经正式发布,本次更新除了全面支持Angular7之外,还允许用户使用Web Workers在前端更高效地导出PDF.智能的分组表头属性.全新的 ...

  9. 前端开发工具icestar

    前端开发工具icestar 最近忙里偷闲,把之前的mock工具进行了全面的重构,最大的改变就是换了个名称icestar,icestar意思就是"爱死他",首先他的预想并不只是替代m ...

随机推荐

  1. OutputCache各参数的说明

    OutputCache各参数的说明 Duration 缓存时间,以秒为单位,这个除非你的Location=None,可以不添加此属性,其余时候都是必须的. Location Location当被设置为 ...

  2. C# 获取配置文件节点值

    <?xml version="1.0" encoding="utf-8" ?><configuration>  <appSetti ...

  3. React react-ui-tree的使用

    公司需要做一个IDE,要做IDE当然少不了文件列表了.下面我就来展示一下刚刚研究的一个库. 下面是链接:https://react.rocks/example/react-ui-tree 至于如何导入 ...

  4. application windows are expected to have a root view controller错误

    产生这个提示的操作:在xcode4.6中创建一个名字为appTest空工程,create一个ios-application-empty application,直接编译运行 错误提示:虽然编译通过,也 ...

  5. build opencv with python support

    cmake -DPYTHON_LIBRARY=/opt/anaconda/lib/libpython2.7.so -DPYTHON_INCLUDE_DIR=/opt/anaconda/include/ ...

  6. 评论PK投票功能的手机版

    ajax投票.点赞.回复,投票后自动转到查看投票结果,投票结果进度条动画显示 地址:http://files.cnblogs.com/files/macliu/hyw_wap.rar 效果图: 首页:

  7. ActionBar-PullToRefreshLibs+沉浸式在部分手机上的布局错乱,目前知道的三星

    前段时间看见ActionBar-PullToRefreshLibs用来刷新很好看,配合4.4以上支持的沉浸式效果更佳,于是便想配合沉浸式+ActionBar-PullToRefreshLibs做出一个 ...

  8. POP3、SMTP、IMAP和Exchange都是个什么玩意?

    很多时候一直对POP3.SMTP.IMAP和Exchange等迷迷糊糊的.下面就整理说明一下: 当前常用的电子邮件协议有SMTP.POP3.IMAP4,它们都隶属于TCP/IP协议簇,默认状态下,分别 ...

  9. Ring3下Hook NtQueryDirectoryFile隐藏文件

    NTSTATUS WINAPI Hook_NtQueryDirectoryFile(IN HANDLE FileHandle,IN HANDLE Event OPTIONAL,IN PIO_APC_R ...

  10. UESTC_秋实大哥带我飞 2015 UESTC Training for Graph Theory<Problem B>

    B - 秋实大哥带我飞 Time Limit: 300/100MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit ...