sublime_text2的常用插件

来源：互联网发布：认知失调理论知乎编辑：程序博客网时间：2024/05/07 10:32

告诉大家一个好消息，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}

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

0 0