almost 3 years ago

Sublime的大名已经无需我介绍了,首先先介绍如何启用插件安装功能:

  1. 打开Sublime 3,然后按 ctrl+` 或者在View → Show Console
  2. 在打开的窗口里黏贴这个网站上的代码(注意: Sublime 2和3所黏贴的代码不一样,注意选择):https://packagecontrol.io/installation
  3. 安装完成后,按 Ctrl+Shift+p (Windows) / Command+Shift+p (Mac), 输入'Install Packages',之后Sublime会自动下载插件列表,然后弹出一个小的下拉菜单让你填写想要下载的插件名称。

注:

  • 第二步中的网站如果打开困难请翻墙,这年头不翻墙连个程序都没法好好写。
  • 第三步在选择完 Install Packages后,会出现卡住的情况,Sublime最底端的状态栏里会有一个 '=' 符号在来回移动。这个的意思是正在下载插件列表中,请稍后。 插件列表的下载跟墙也有关系,总之不会很快就是了。

接下来是本文重点,前端开发的几个必备插件(越靠后的几个越实用):

CSS3

链接: https://github.com/y0ssar1an/CSS3
简介: 支持CSS3里的语法高亮。(Sublime3里自带的CSS高亮不够用)。安装后, 打开一个CSS文件,然后按照下面GIF操作,将CSS3高亮作为CSS文件的默认高亮:


安装: Ctrl+Shift+P → Package Control: Install Package → CSS3

Sidebar Enhancement

链接: https://github.com/titoBouzout/SideBarEnhancements
简介: 让Sublime的侧边栏多出许多必备功能,如在浏览器中打开,改名,复制文件链接等等


安装: Ctrl+Shift+P → Package Control: Install Package → SideBarEnhancements

Git Gutter

链接: https://github.com/jisaacks/GitGutter
简介: 如果你使用Git做版本控制的话,这个插件可以在行号前标记处哪些行是新加的,删除的和修改过的。


安装: Ctrl+Shift+P → Package Control: Install Package → GitGutter

Bracket Highlighter

链接: https://github.com/facelessuser/BracketHighlighter
简介: 高亮各种括号的起始和结尾


安装: Ctrl+Shift+P → Package Control: Install Package → BracketHighlighter

HTML-CSS-JS Prettify

链接: https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
简介: 编辑HTML, CSS, JS时,经常会出现缩进不对,代码行不对其的情况。装了这个插件之后,只要按下Ctrl+Shift+h (Windows), Command+Shift+h (Mac), 你的文档就会被整理干净。
安装: Ctrl+Shift+P → Package Control: Install Package → HTML-CSS-JS Prettify

livestyle

链接: http://livestyle.emmet.io/

简介: 这货太神奇了。在调试页面的样式时,经常会打开Chrome自带的开发者工具,然后编辑CSS,等满意了再把CSS代码黏贴回Sublime里。这货允许你在Chrome里修改CSS,然后相对应的在Sublime里的CSS文件就自动更新了!(你更新Sublime里的CSS并保存,打开的网页也会自动更新)

安装: 需要安装两个插件,一个是Sublime的插件,一个是Chrome的插件。
Sublime插件: Ctrl+Shift+P → Package Control: Install Package → LiveStyle
Chrome插件: https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg

用法: 先重启你的Sublime,然后打开一个CSS文件。然后在Chrome里打开包含这个CSS的HTML页面 → 打开Chrome的开发者工具,工具栏的最后会多出一个 LiveStyle选项:


看下方File mapping里被HTML页面引用的CSS文件会自动和Sublime里打开的同名CSS文件关联起来。如果名字都对的话你就可以在Elements里开始编辑CSS了。编辑好后看下Sublime,该CSS文件会被自动更新。

livereload

链接: http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions

简介: 该软件需要付费($9.99). 这款软件不算是Sublime的插件,但是开发的时候非常必要。功能和上面介绍的livestyle类似,就是源码文件有所改动的话,打开的网页页面也会自动刷新。(但是不支持在网页里直接改源码,然后反向刷新源码文件)软件源码其实是开源的,但是Mac客户端要收费。其实就60块RMB,但是在开发的时候真是省了不少力气。Windows版是测试版,免费。

安装: 需要安装两个部件,一个是Mac客户端,一个是Chrome插件。

Mac客户端:http://itunes.apple.com/us/app/livereload/id482898991?mt=12
Chrome插件: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
如果你使用Safari或者火狐,请到这个页面上找相应的插件:http://livereload.com/extensions/

用法: 先将客户端打开,然后在这个窗口里点 '+' 添加你源文件所在的文件夹。然后在Chrome里打开相应的HTML文件,并点击Livereload插件的图标,如果图标里的圆点变成实心,则表明已经和客户端链接完成,可以开始同步修改了。

Emmet

链接: http://docs.emmet.io/abbreviations/syntax/
简介: 通过一套简单的语法让你快速生成大量的HTML代码,比如输入:

div.row>ul>li

然后按TAB会生成:

<div class="row">
    <ul>
        <li></li>
    </ul>
</div>

虽然要背一下语法,但是只需要记忆最常用的几个就好。效率提升杠杠的。

安装:Ctrl+Shift+P → Package Control: Install Package → Emmet

其它:

以下插件要看你的个人需求,视情况而定:

Advanced New File

链接: https://packagecontrol.io/packages/AdvancedNewFile
简介: 通过Sublime里的输入框来新建一个文件。Windows上按Ctrl+alt+n激活,Mac上按Command+alt+n激活。感觉有了SidebarEnhancement后,这个就没啥大用了。
安装: Ctrl+Shift+P → Package Control: Install Package → AdvancedNewFile

Djaneiro

链接: https://github.com/squ1b3r/Djaneiro
简介: 如果你使用Django框架开发,这个插件会添加以下常用的Snippet,帮助你编辑模板的时候少打些字。如果你有Pycharm的专业版,那就不需要这个了。
安装: Ctrl+Shift+P → Package Control: Install Package → Djaneiro
用法: 安装好后会多出一种文件类型 'Djaneiro → HTML (Django)'。输入'if'然后按Tab的话会自动转换为

{% if  %}
    
{% endif %}

请打开它的网站链接,上面有所有支持的命令列表。

Bootstrap 3 Snippets

链接: https://github.com/JasonMortonNZ/bs3-sublime-plugin
简介: 在Sublime里添加了很多常用的Bootstrap 3的快捷。但前提是需要记住这些快捷的名字。。。
安装: Ctrl+Shift+P → Package Control: Install Package → Bootstrap 3 Snippets

Package Sync

链接: https://packagecontrol.io/packages/Package%20Syncing
简介: 可以同步你多台机器上Sublime的配置和安装包。目前还没测试过,但应该能用。


References:

https://www.youtube.com/watch?v=NrYzJz1P4fE
http://limestrap.blogspot.in/2013/09/12-first-bootstrap-3-page-with-sublime.html

← A Great Quote from My Favorite Browser Plugin 在Mac OSX上安装R →
 
comments powered by Disqus