zoukankan      html  css  js  c++  java
  • Sublime Text 2中前端必备的常用插件

    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/

  • 相关阅读:
    POJ 3261 Milk Patterns (求可重叠的k次最长重复子串)
    UVaLive 5031 Graph and Queries (Treap)
    Uva 11996 Jewel Magic (Splay)
    HYSBZ
    POJ 3580 SuperMemo (Splay 区间更新、翻转、循环右移,插入,删除,查询)
    HDU 1890 Robotic Sort (Splay 区间翻转)
    【转】ACM中java的使用
    HDU 4267 A Simple Problem with Integers (树状数组)
    POJ 1195 Mobile phones (二维树状数组)
    HDU 4417 Super Mario (树状数组/线段树)
  • 原文地址:https://www.cnblogs.com/huige728/p/3260733.html
Copyright © 2011-2022 走看看