sublime前端开发常用插件

2024年4月22日 147次阅读 来源: 李清昌的前端博客

为了方便安装其他插件，首先安装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( 'http://sublime.wbond.net/' +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( 'http://sublime.wbond.net/' + 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-8
Firefox > 20    火狐版本>20
Firefox >= 20    火狐版本>=20
Firefox < 20    火狐<20
Firefox <= 20    火狐<=20
iOS 7    指定IOS 7浏览器
    原文作者：李清昌的前端博客
    原文地址: https://segmentfault.com/a/1190000007869866
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞