之前在知乎上搜索好用的前端开发工具,投票最多的是webStrom,试用过后发现果真好用,代码补全,代码检查,支持主流的版本控制,比如git,svn等等。但是毕竟是一款集成的IDE,启动速度慢、吃内存是不争的事实。

sublime text2就弥补了这个不足,轻量级,秒速启动,运行流畅。而且有许多给力的插件包,可以根据需要配置成强有力的编辑神器,我主要用他来写html、javascript,下面是具体的配置步骤:

1.下载安装sublime text2

http://www.sublimetext.com/2

点击链接直接下载,我下载的版本是sublime text2,刚看了一下已经出了3,安装方法和普通软件一样,不再赘述。

2.安装 packet control

打开sublime text,按ctr+~,在弹出的console里面输入一下代码;重启sublime text,在Preferences菜单栏下看到Package 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; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

3.安装前端开发插件

  按ctrl+shirft+P,输入install package,回车,即可在弹出的输入框中输入插件包名,安装插件。

html插件

  • emmet:快速写HTML,CSS代码,有代码补全等功能。

快捷键 功能
! 或 html:5 –> tab html5类型文档
html:4s –> tab html4严格文档类型
html:xt –> tab xhtml过渡型文档

还有其他一些仿css选择器的快捷方式,比如:

输入 p.a –>tab 直接生成 <p class="a"></p>

使用(),+,<,一次添加多个元素:(p.a<span)+(p.b<ul<li*3),其中<表示添加子元素,+表示添加同级元素,*3表示数量,按tab之后输出如下:

其他emmet技巧请戳

javascript插件

  • andyJS2: js和jQuery智能补全插件。
  • jQuery:jQuery智能补全插件。

4.删除插件

ctrl+shift+p,输入remove package,选择想删除的包即可.

[工具]sublime text2-前端开发利器的更多相关文章

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

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

  2. 工具武装的前端开发工程师 Mac 软件清单

    Awesome Mac  这个仓库主要是收集非常好用的Mac应用程序.软件以及工具,主要面向开发者和设计师.有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章<工具武装的前端开发工程 ...

  3. Sublime Text 前端开发常用扩展插件推荐

    Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text ...

  4. 前端开发利器—FIDDLER 转

    http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器—FIDDLER 1.Fiddler相对其他调试工具 ...

  5. 前端开发利器 Sublime Text 3 使用技巧和总结笔记

    这篇文章是本人在使用该工具进行前端开发的自我总结,思路也许不是很清楚,不过还是希望对读者的你有所帮助,千万别把这边文章收藏起来发霉哦,无论背多少次快捷键,还不及自己多实际操作几次. 目前官方版正式版 ...

  6. 前端开发利器webStorm

    这里推荐一个前端开发工具webStorm.用了大概快半年了,发现所有其他工具无出其右的.目前最新版本已经到4.0.2,半年前还是2.X 相比aptana.dreamweaver.sublime和vim ...

  7. sublime text 前端开发插件安装和配置

    前端开发sublimeconfig mac配置 此文件目录中文件主要是关于sublime的插件配置,快捷键配置,主题和字体配置. 插件列表 所有插件都可以使用Package Control安装,具体的 ...

  8. 前端开发利器 Emmet 介绍与基础语法教程

    在前端开发的过程中,编写 HTML.CSS 代码始终占据了很大的工作比例.特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”.闭合标签等.而现在 Emmet 就是为了提高代码编写 ...

  9. [转] 前端开发利器--Brackets 的七种武器和旁门左道

    转自:http://www.jianshu.com/p/ff7798aa4548 Brackets是Adobe开发的web编辑器,是一款免费开源.多平台支持的软件,并在于GitHub上维护.Brack ...

随机推荐

  1. 图解向hadoop分布式文件系统写文件的工作流程

    网上看到一张关于hadoop分布式文件系统(hdfs)的工作原理的图片,其实主要是介绍了向hdfs写一个文件的流程.图中的流程已经非常清晰,直接上图 好吧,博客园告诉我少于200字的文章不允许发布到网 ...

  2. js 魔鬼训练

    1.Object.assign 偷梁换柱 / 融合 - 将多个对象合并到第一个对象中去.这样一来methods对象中就包含着data对象了.否则this无法正常访问data中的title var ne ...

  3. 代码对齐 分类: C#小技巧 2014-04-17 14:45 166人阅读 评论(0) 收藏

    开发项目时,为了是代码层次清晰.美观,常常需要调整多行,使之对齐.在网上也看到一些方法,感觉不好用,偶尔发现一个小技巧. (1)多行代码同时右移 同时选中几行,按"Tab"键,就会 ...

  4. android设置view透明度的效果

    android设置view透明度的效果 推荐textView.setBackgroundColor(Color.TRANSPARENT);     第一种方法:在xml文件中设置背景颜色. andro ...

  5. [Angular 2] NgNonBindable

    If you want to print someting like {{content}} on the html, using ng-non-bindable directive: <div ...

  6. LTTng调试: 一个系统软件工程师的随手涂鸦

    http://nanxiao.me/install-lttng/ http://packages.efficios.com/ http://lttng.org/ http://lttng.org/do ...

  7. linux安装tomcat(转载:http://blog.csdn.net/zhuihunmiling/article/details/8977387)

    在安装Tomcat之前需要安装j2sdk(Java 2 Software Development Kit),也就是JDK 1.安装JDK完毕. 2.安装Tomcat 1)下载apache-tomcat ...

  8. android 安全退出应用程序的几种方法

    android 安全退出应用程序的几种方法 正常关闭应用程序: 当应用不再使用时,通常需要关闭应用,可以使用以下三种方法关闭android应用: 第一种方法:首先获取当前进程的id,然后杀死该进程.a ...

  9. windows服务(Windows Installer问题,错误5:拒绝访问)

    Windows Installer问题,错误5:拒绝访问 shillan,2006-11-03 09:40:38 现象: 使用MSI文件来安装的软件在安装和卸载时系统提示:“不能访问Windows I ...

  10. 使用jq深入研究轮播图特性

    网站轮播图 太耳熟的词了  基本上做pc端的 主页绝壁会来一个轮播图的特效 轮播图他一个页面页面的切换,其实的原理是通过css的定位 ,定位到一起,第一张首先显示,其余默认隐藏. 今天我实现的这个轮播 ...