为了方便安装其他插件,首先安装Package Control,安装方法如下
Sublime Text 2:
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( '/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
Sublime Text 3:
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( '/' + pf.replace(' ','%20')).read())
将上面代码在sublime view -- show console( ctrl + ` )即可成功安装[快捷键可能会被占用]
一般情况下,插件都可以满足正常使用的需求,少数默认操作可能不符合自己的习惯,可以通过 菜单 -- Preferences -- Browse Packages打开对应的安装包,进行配置。
1.HTML-CSS-JS Prettify[依赖nodejs]
对HTML CSS JS 进行美化
安装完成后,还要对插件进行设置:
右键点击sublime -- HTML CSS JS Prettify -- Set plugin option,将设置里的nodejs路径填写正确即可开始使用,使用方法:
control+shift+h
2.autofilename
填写背景图片路径,图片路径,引用JS,CSS等行为时,可以提示路径。
3.Inc Dec Value
增加或减少数字,日期,和十六进制颜色。
将光标放置到需要调整的数值的中间或者两边,按住alt,将光标放置到需要调整的数值的中间或者两边,通过上下键或者鼠标滚轮加大或者减小数值
4.emmet
快速生成想要的代码,输入基础代码,然后按tab
示例
基础代码:!
生成:HTML
基础代码:ul.className>.liClassName
生成:
<ul class="className"><li class="liClassName"></li></ul>
基础代码:a.className[data-key="value"]{链接文本}
生成:
<a href="" class="className" data-key="value"></a>
基础代码:input:button[value=确定]
生成:
<input type="button" value="确定">
基础代码:div.className*3
生成:
<div class="className"></div><div class="className"></div><div class="className"></div>
触类旁通,以上三个例子包含了类型,属性,文本数量,可以自行组合
6.autoprefixer
自动补全样式前缀,安装成功后需要进行快捷键配置
Preferences -- Key Bindings – User
添加代码
[{ "keys": ["ctrl+alt+shift+p"], "command": "autoprefixer" }]
然后根据自己设置的快捷键进行修改。
再对需要兼容的版本进行设置
Preferences -- Package Settings -- Autoprefixer -- Settings - User
进行如下设置。
{"browsers": ["last 1 version"]}
以上仅仅是举例,具体适配内容根据下面内容自行设置
last 2 versions 每一个主要浏览器的最后2个版本last 2 Chrome versions 谷歌浏览器的最后两个版本> 5% 市场占有量大于5%> 5% in US 美国市场占有量大于5%ie 6-8 ie浏览器6-8Firefox > 20 火狐版本>20Firefox >= 20 火狐版本>=20Firefox < 20 火狐<20Firefox <= 20 火狐<=20iOS 7 指定IOS 7浏览器
如果觉得《sublime前端开发常用插件》对你有帮助,请点赞、收藏,并留下你的观点哦!