sublime 前端开发工具

2022-08-17 10:23:56

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进行语法及风格校验

码农公寓