vlambda博客
学习文章列表

Sublime 常用插件介绍


声明:软件资源来自于网络搜索,仅供学习使用,严禁作于商业用途,违反者请自行承担法律责任,任何使用资源默认同意此声明!如果您想有更好的体验,建议购买正版软件,如有侵权或者损害他人利益,请留言删除!


html-css-jsprettify

功能:对Html,css,js文件进行格式化

简介:代替了JsFormat 和 CSSFormat

使用:快捷键Windows: ctrl+shift+i

快捷键配置:在Preferences / Key Bindings – User加上代码(数组内)

{“keys”: [“ctrl+shift+i”],”command”: “htmlprettify”}


CSSComb

功能:用来给CSS属性进行排序的格式化(处女座必备)

简介:按一定的顺序排列

使用:到https://github.com/csscomb/sublime-csscomb下载插件包,放到sublime text文件夹的\Data\Packages\User目录里

快捷键:ctrl+shift+c


ColorHighlighter

功能:方便调色

简介:它可以展示你所选择的颜色代码(像“#FFFFFF”, “rgb(255,255,255)”, “white”)的真正颜色。同时它还包含一个颜色选择器让你可以方便地更改颜色。

使用:快捷键Windows: ctrl+shift+w

快捷键配置:在Preferences / Key Bindings – User加上代码(数组内)

{ “keys”: [“ctrl+shift+w”],”command”: “color_picker”,”context”: [{“key”: “color_highlighter.color_picker”}]}


Trailing spaces

功能:检测并一键去除代码中多余的空格

简介:还在纠结代码中有多余的空格而显得代码不规范?或是有处女座情节?次插件帮你实现发现多余空格、一键删除空格、保存时自动删除多余空格,让你的代码规范清爽起来

使用:安装插件并重启,即可自动提示多余空格。一键删除多余空格:CTRL+SHITF+T(需配置),更多配置请点击标题。

快捷键配置:在Preferences / Key Bindings – User加上代码(数组内){ “keys”: [“ctrl+shift+t”], “command”: “delete_trailing_spaces” }


auto-save

功能:自动保存文件

简介:为保存提供了方便

使用:默认是不会自动保存,按快捷键Ctrl+Shift+S开启。

快捷键配置方法:首选项-快捷键设置,在数组内添加{ “keys”: [“ctrl+shift+s”], “command”: “auto_save” },如需自动启用,首选项-插件-auto-save—settings-usre粘帖一下配置

{

“auto_save_on_modified”: true,

“auto_save_delay_in_seconds”: 10,

“auto_save_all_files”: true,

“auto_save_current_file”: “”,

“auto_save_backup”: false,

“auto_save_backup_suffix”: “autosave”

}


autoprefixer(下载超慢)

功能:CSS添加私有前缀

简介:CSS还未标准化,所以要给各大浏览器一个前缀以解决兼容问题

使用:快捷键配置方法:首选项-快捷键设置,在数组内添加{ “keys”: [“ctrl+shift+enter”], “command”: “autoprefixer” },

快捷键:ctrl+shift+enter


CSS Extended Completions

功能:关联CSS文件,智能提示css文件中的类名,非常好用


JavaScript Completions

功能:支持javascript原生语法提示,妈妈再也不用担心我输入document.getElementById(id)


jQuery

功能:jQ函数提示

简介:快捷输入jQ函数,是偷懒的好方法


AutoFileName

功能:快捷输入文件名

简介:自动完成文件名的输入,如图片选取

使用:输入”/”即可看到相对于本项目文件夹的其他文件


SublimeLinter

功能:代码检查

简介:支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多种开发语言

使用:需要配置相应语言的环境,要检查JavaScript代码需要安装node.js,检查PHP代码需要安装PHP并配置环境等。


SideBarEnhancements

功能:扩充边栏菜单的功能

简介:包括在当前工程文件夹中新建文件,移动文件或文件夹,产生文件或文件夹的副本,在新窗口或浏览器中打开,刷新等。


Monokai Extended

功能:主题

简介:如果你喜欢 Soda Dark 和 Monokai,我建议你使用 Monokai Extended

使用:首选项-> 配色方案 -> User -> Monokai Extended

全文快捷键配置

[    { "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" },    { "keys": ["ctrl+shift+s"], "command": "auto_save" },    { "keys": ["f12"], "command": "open_in_browser" },    { "keys": ["ctrl+shift+enter"], "command": "autoprefixer" },    { "keys": ["ctrl+shift+i"],"command": "htmlprettify"}, { "keys": ["ctrl+shift+w"],"command": "color_picker","context":        [{"key": "color_highlighter.color_picker"}]}, ]


Emmet

功能:编码快捷键,前端必备

简介:Emmet作为zen coding的升级版,对于前端来说,可是必备插件,如果你对它还不太熟悉,可以在其官网上看下具体的演示视频。

使用教程:http://docs.emmet.io/cheat-sheet/


Bracket Highlighter

功能:代码匹配

简介:可匹配[], (), {}, “”, ”, ,高亮标记,便于查看起始和结束标记


view in browser

功能:通过默认浏览器打开文件

简介:方便打开浏览器检查编译效果

使用:快捷键配置方法:首选项-快捷键设置,在数组内添加快捷键:F12{ “keys”: [“f12”], “command”: “open_in_browser” }