你的位置:首页 > 网页设计

[网页设计]前台研发工具Sublime


今天一个朋友@我,问有没有好的IDE推荐一下,其实现在有很多文本工具可供选择,像Nodepad++、Editplus之类的,之前我使用Editplus比较多,用了很多年,可能也是习惯了。

后来还用过一段时间的WebStorm,感觉也很不错,再后来就是使用Sublime,喜欢这个工具的原因主要是干净、轻量级、右侧缩略图,还有就是丰富的插件等。

简单的做一下介绍,包括安装、基本配置,还有几个 个人感觉必须的插件:

一.下载安装:

  下载地址:http://www.sublimetext.com/3

  根据你的平台(OS、windows还是Ubuntu),分x64和x86的,仔细看看,下载安装还是很简单的。

二.基本配置

  Sublime有很多插件,安装和管理这些插件的必备神器:Package Control [地址:https://packagecontrol.io/installation]

  这个是必须要安装的,安装方式:

  打开Sublime,通过Menu->View->Show Console打开控制台(或快捷键Ctrl+`),如下图:

  

  根据自己的版本,选择下面的内容,直接粘贴在图中所示的位置,然后回车即可(稍等以后,就可以安装完成了):

>> Sublime Text 2 :

import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

  

>>Sublime Text 3:  

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

三. 安装插件

如果以上的步骤都成功了, 那接下来安装插件就很简单了。

通过Menu->Preferences->Package Control,打开Package Control管理器(或者快捷键:Ctrl+Shift+P),输入"IP",如下图:

选择第一个“Package Control:Install Package”,如下图:

在输入框内输入你想要搜索的插件名称,然后点击安装就可以了,如安装Html5插件,可以输入Html,下面会自动显示Html5,选择一个你想要的,就可以安装了。

四.几个小插件

EMMET:你应该早就听说过Zen Coding,没错,就是这个东西,能帮助你快速的构建模板和编写html、js、css代码,比如你打开一个空白页,然后输入:html:5,直接Tab,会自动生成Html5格式的HTML页面模板。

ConvertToUTF8:如果不安装这个,有时候显示的中文会是乱码,所以也是必须要安装的

其他的插件,还有很多,看个人需求,就不一一介绍了。

可以百度一下,或者看看这几个地方(有挺多是重复的):

http://www.php100.com/html/it/focus/2014/1128/7935.html

http://www.oschina.net/translate/20-powerful-sublimetext-plugins