sublime_text2的常用插件

告诉大家一个好消息，sublime_text2的插件可以在线安装了，再也不用大家去下插件了，特别省心又省分，嘻嘻。

闲话少说，上干货！

首先，我们先下个sublime_text2

然后ctrl+` 快捷键或者 查看>控制台.然后输入下面的Python代码。就可以安装插件管理包了

接下来我们就可以开始安装插件了，是不是很开心啊，就是这么简单。

安装插件第一步：

ctrl+shift+p打开扩展面板，输入pci安装Package Control :Install Package

安装插件第二步：

在之后的弹出框里面输入插件名，又有同学问了，插件名我不知道怎么办啊，https://packagecontrol.io/去这个网站就可以找到各种插件了

以下我来给大家介绍一些自己经常用到的插件

1、Emmet

作用：超快地写网页代码
用法：它有自己的格式网上百度下

demo:
输入ul>li*5>img按ctrl+e
编译出
<ul>
     <li><img src="" alt=""></li>
     <li><img src="" alt=""></li>
     <li><img src="" alt=""></li>
     <li><img src="" alt=""></li>
     <li><img src="" alt=""></li>
</ul>

2、SideBarEnhancements
作用：快速浏览跟dw的F12很像，可以自定义快捷键
配置快捷键
然后通过ctrl + k, ctrl + b打开侧边栏，在侧边栏的文件中右击，找到 open width -> edit applications


然后在这里边设置firefox打开的方式。


application : 路径要修改为自己默认安装的路径。


[
    {"id": "side-bar-files-open-with",
        "children":
        [
            //application firefox
            {
                "caption": "firefox",
                "id": "side-bar-files-open-with-firefox",


                "command": "side_bar_files_open_with",
                "args": {
                            "paths": [],
                            "application": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
                            "extensions":".*" //any file with extension
                        }
            },


            {"caption":"-"},
            {
                "caption": "chrome",
                "id": "side-bar-files-open-with-chrome",


                "command": "side_bar_files_open_with",
                "args": {
                            "paths": [],
                            "application": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
                            "extensions":".*" //any file with extension
                        }
            }
        ]
    }
]
配置快捷键


Key bindings -> User


[
     { "keys": ["ctrl+shift+c"], "command": "copy_path" },
     { "keys": ["alt+f12"], "command": "open_in_browser" },
     { "keys": ["f12"], "command": "side_bar_files_open_with",
             "args": {
                "paths": [],
                "application": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
                "extensions":".*" //any file with extension
            } },
    { "keys": ["ctrl+f12"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
                "extensions":".*" //any file with extension
            } 
     }     
    
]




如果是其它浏览器，可以 ctrl+shift+c 路径，然后直接在地址栏粘贴。
这样就可以用这三个键在浏览中预览页面了：


F12 : Firefox


alt + F12 : IE


ctrl + F12 : chrome


当然，你也可以配置，其它配置器用这样的方式预览。






3、sass bulid
sublime中要安装sass和sass build才能支持sass的编写
在sublime中新建一个scss文件，按ctrl+b进行编译


4、SublimeOnSaveBuild
保存的同时编译scss文件


5、sass builder
设置存储文件地址


快捷键打开配置文件
：ctrl+b+ctrl+s


6、SassBeautify
格式化scss文件
使用方法：
1、Open the command palette (ctrl/cmd + shift + p)
2、Type 'SassBeautify'
3、Choose one of the following options:
Convert from CSS to current type
Convert from SCSS to current type
Convert from SASS to current type


7、css,js,image的压缩做到grunt中去了（这里的前面的自动化前端讲）


8、Tag
作用：对Html代码进行格式化
用法：安装该插件后会在菜单栏的Edit中多出新的选项Tag。也可以选中一段Html代码后，按Ctrl+Alt+F即可。


10、jsFormat
ctrl+shit+p Format:javascript 格式化js


11、ctrl+alt+{格式化css}

好啦，讲了这么多，该是要实践的时候了，快动手吧！