Sublime Text 2中前端必备的常用插件

2022-08-26 10:38:13

Sublime Text 2安装的插件和所有预置的插件全部在Packages文件下，可以直接通过”preferences“—>”Browse Pakcages“来访问。

　　Sublime Text 2安装插件有两种方法：
　　1）离线安装，先下载好安装包，解压之后放到Packages文件夹下，重启Sublime即可。
离线安装包下载地址：http://sublime.wbond.net/Package%20Control.sublime-package

　　2）在线安装，在线安装之前，需要安装”Packages Control“这个包管理插件，安装方法是：
　　　选择”查看“—>”显示控制台“，然后在下面弹出的框中输入：

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

然后回车确认，安装完毕之后重启sublime，如果发现在Perferences中看到package control这一项，则安装成功。

然后我们按住 ctrl+shift+p。此时会输出一个输入框，输入install。
选择package contrl： install package 回车，需要稍定一会儿，右下角状态栏会显示正在连接的提示文字。
使用sublime时注意看右下角状态栏，很多插件的提示信息都显示在这里，这个状态栏很小，初次使用的人都有可能没有注意到它。

稍等一会儿后，它会出现一个插件列表，你也可以在输入框中输入文字进行搜索插件。搜索到自己想安装的插件，再选择它，回车。就自动给你安装好了。

如果要卸载插件， ctrl+shift+p 输入 remove，选择package control:remove package 然后再选择已安装的插件，回车即可卸载。

当然也可以这样：Preferences--> package control 选择安装和移除插件

点击Install Package之后，稍等一会，就出先搜索安装的列表

下面正式推荐几款必备的常用插件：

1.SublimeTmpl插件

　　这个插件允许用户定义文件的模板，比如在写一个html文件时，老是重复文件头的一些引入信息很繁琐，可以定义一个模板直接生成必须的信息，具体的SublimeTmpl插件用法请自行百度。

2.Emmet(Zen Coding)

大名鼎鼎的Zen Coding改名作Emmet啦，Zen Coding的Sublime Text 2插件也不再更新，现在整个项目搬到了Emmet了。仅仅需要一行代码就能快速生成html代码。

完整语法请参考：http://docs.emmet.io/cheat-sheet/

ul#nav>li.item$*4>a{Item $}

你只需要按下control + E，代码就会自动展开成：

<ul id="nav">

    <li class="item1"><a href="">Item 1</a></li>

    <li class="item2"><a href="">Item 2</a></li>

    <li class="item3"><a href="">Item 3</a></li>

    <li class="item4"><a href="">Item 4</a></li>

</ul>

3.Sublime CodeIntel

Sublime CodeIntel是我最喜欢的插件，它提供了很多IDE提供的功能，例如代码自动补齐，快速跳转到变量定义，在状态栏显示函数快捷信息等。
它支持的语言有：PHP, Python, RHTML, JavaScript, Smarty, Mason, Node.js, XBL, Tcl, HTML, HTML5, TemplateToolkit, XUL, Django, Perl, Ruby, Python3.
虽然有时候有点小问题，但真的能节省很多时间。强烈推荐安装。

4.Prefixr

由于CSS3和HTML5的W3C规范都尚未统一，各大浏览器对标准的支持还是有差异的。所以在编写CSS3代码还需要针对不同的浏览器写一堆的CSS3代码前缀。Prefixr插件能将CSS3代码自动生成跨浏览器CSS代码。

使用方法：

.box {

   border-radius: 10px;

   box-shadow: 0 0 5px rgba(0,0,0,.4);

}

按下ctrl + Alt + X（Windows）或者control + command + X（Mac），会转换成：

.box {

   -webkit-border-radius: 10px;

   -moz-border-radius: 10px;

   border-radius: 10px;

   -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);

   -moz-box-shadow: 0 0 5px rgba(0,0,0,.4);

   box-shadow: 0 0 5px rgba(0,0,0,.4);

}

5.为了避免打开含中文字符的文件出现乱码，需要先安装GBK Encoding Support这个插件，再安装ConvertToUTF8插件即可。

6.AndyJS2插件：一款针对Javsscript和jquery智能提示的插件。

7.jquery插件：jquery提示库。

其他还有很多插件或者配置，就不一一列举了，希望大家共同探讨...

插件介绍地址：https://sublime.wbond.net/

码农公寓

相关文章