整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

超级实用的 Sublime Text 插件 大汇总!

超级实用的 Sublime Text 插件 大汇总!

ackage Control

功能:安装包管理

简介:sublime插件控制台,提供添加、删除、禁用、查找插件等功能

使用:https://sublime.wbond.net/installation

安装方法:

  1. CTRL+` ,出现控制台

  2. 粘贴以下代码至控制台

ST2:

1import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;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')

ST3:

1importurllib.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())

其他方法:

如果以上方法不能安装,请使用下面的方法

  1. 选择菜单:Preferences > Browse Packages

  2. 打开sublime插件安装包文件夹

  3. 下载文件并复制到打开的文件夹

  4. 重启sublime

Emmet

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

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

使用:教程-http://docs.emmet.io/cheat-sheet/、http://peters-playground.com/Emmet-Css-Snippets-for-Sublime-Text-2/

JSFormat

功能:Javascript的代码格式化插件

简介:很多网站的JS代码都进行了压缩,一行式的甚至混淆压缩,这让我们看起来很吃力。而这个插件能帮我们把原始代码进行格式的整理,包括换行和缩进等等,是代码一目了然,更快读懂~

使用:在已压缩的JS文件中,右键选择jsFormat或者使用默认快捷键(Ctrl+Alt+F)

LESS

功能:LESS高亮插件

简介:用LESS的同学都知道,sublime没有支持less的语法高亮,所以这个插件可以帮上我们

使用:打开.less文件或者设置为less格式

Less2CSS

功能:编译Less

简介:监测到文件改动时,编译保存为.css文件

使用:打开.less文件,编写代码保存即可看到同时生成.css的文件,如果没有则需要安装node。不推荐用这种方法编译,要么用koala,要么就用grunt编译。

Alignment

功能:”=”号对齐

简介:变量定义太多,长短不一,可一键对齐

使用:默认快捷键Ctrl+Alt+A和QQ截屏冲突,可设置其他快捷键如:Ctrl+Shift+Alt+A;先选择要对齐的文本

sublime-autoprefixer

功能:CSS添加私有前缀

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

使用:Ctrl+Shift+P,选择autoprefixer即可。需要安装node.js。

其他设置如快捷键请参考:https://sublime.wbond.net/packages/Autoprefixer

Clipboard History

功能:粘贴板历史记录

简介:方便使用复制/剪切的内容

使用:

  • Ctrl+alt+v:显示历史记录

  • Ctrl+alt+d:清空历史记录

  • Ctrl+shift+v:粘贴上一条记录(最旧)

  • Ctrl+shift+alt+v:粘贴下一条记录(最新)

Bracket Highlighter

功能:代码匹配

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

使用:点击对应代码即可

Git

功能:git管理

简介:插件基本上实现了git的所有功能

使用:https://github.com/kemayo/sublime-text-git/wiki

jQuery

功能:jQ函数提示

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

DocBlockr

功能:生成优美注释

简介:标准的注释,包括函数名、参数、返回值等,并以多行显示,手动写比较麻烦

使用:输入/*、/**然后回车,还有很多用法,请参照

https://sublime.wbond.net/packages/DocBlockr

ColorPicker

功能:调色板

简介:需要输入颜色时,可直接选取颜色

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

ConvertToUTF8

功能:文件转码成utf-8

简介:通过本插件,您可以编辑并保存目前编码不被 Sublime Text 支持的文件,特别是中日韩用户使用的 GB2312,GBK,BIG5,EUC-KR,EUC-JP ,ANSI等。ConvertToUTF8 同时支持 Sublime Text 2 和 3。

使用:安装插件后自动转换为utf-8格式

AutoFileName

功能:快捷输入文件名

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

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

Nodejs

功能:node代码提示

教程:https://sublime.wbond.net/packages/Nodejs

IMESupport

功能:sublime中文输入法

简介:还在纠结 Sublime Text 中文输入法不能跟随光标吗?试试「IMESupport 」这个插件吧!目前只支持 Windows,在搜索等界面不能很好的跟随光标。

使用:Ctrl + Shift + P →输入pci →输入IMESupport →回车

Trailing spaces

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

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

使用:安装插件并重启,即可自动提示多余空格。一键删除多余空格:CTRL+SHITF+T(需配置),更多配置请点击标题。快捷键配置:在Preferences / Key Bindings – User加上代码(数组内)

1{"keys":["ctrl+shift+t"],"command":"delete_trailing_spaces"}

FileDiffs

功能:强大的比较代码不同工具

简介:比较当前文件与选中的代码、剪切板中代码、另一文件、未保存文件之间的差别。可配置为显示差别在外部比较工具,精确到行。

使用:右键标签页,出现FileDiffs Menu或者Diff with Tab…选择对应文件比较即可

GBK Encoding Support

功能:中文识别

简介:Sublime Text 2可识别UTF-8格式的中文,不识别GBK和ANSI,因此打开很多含中文的文档都会出现乱码。可以通过安装插件GBK Support,来识别GBK和ANSI。

使用:

  • Open a GBK File

  • Save file with GBK encoding

  • Change file encoding from utf8 to GBK or GBK to utf8


本文转自:W3C中文教程/中文网(w3schools.wang),如果你是IT从业者,它也许会对你有帮助!


ublime是我们前端开发非常常用的编辑工具,今天来给大家分享10个应用技巧和诀窍。


1) 选择

以下是一些Sublime Text选择文本的快捷键:

  • Command + D 选中一个单词
  • Command + L 选中一行
  • Command + A 全选
    Ctrl + Command + M` 选中括号内所有内容 (编写CSS或JS时非常实用)


Sublime Text还支持一次选中多行的操作:Furthermore, Sublime Text brings lets us select multiple lines at once, which can significantly boost your productivity. There are several ways to perform this feature:

  • Command 按住Command键再点击想选中的行
  • Command + Ctrl + G (选中部分文本时) 按此键选中所有相同文本
  • Command + D (选中部分文本时) 直接选中下一次出现的该文本


2) CSS排序

CSS属性的顺序一般不重要,因为无论何种顺序浏览器都能正确渲染。但排序所有的属性还是有助于代码的整洁。在Sublime Text中,选中CSS属性后按F5就可以按字母顺序排序。

也可以使用 CSSComb 等第三方插件,更详细的控制排序的方法。


3) 命令面板(Command Palette)

使用命令面板可以快速完成多重任务。按Command + Shift + P调出面板,键入需要的命令即可。看以下的几个示例:

▼ 重命名文件

▼ 设置文件为HTML语法

▼ 插入代码片段


4) 切换标签页与工程

在同时打开多个标签页时,可以用以下的热键切换:

  • Command + T 列出所有的标签页
  • Command + Shift + ] 下一标签页
  • Command + Shift + [ 上一标签页
  • Command + Ctrl + P 切换侧边栏显示的工程


5) 拼写检查

如果你经常使用Sublime Text从事英文创作,那么启用拼写检查就非常有用处了。选择Preferences > Settings – User菜单,添加以下代码:

"spell_check": true,


6) 跨文件编辑

同一个编辑操作可以在多个文件中同时重复。举个例子,多个文件中有同一段代码时,可用以下的步骤快速编辑:

  1. 按Command + Shift + F在Find框中输入待查找的代码。可按Command + E快速使用选择中的代码段。
  2. 在Where框中指定需要查找的文件范围,或填写<open files>表示查找目前打开的文件。
  3. 在Replace框中输入要替换成的代码,按Replace按钮批量替换。


7) 文件爬虫

按Command + R可以列出文档中所有的CSS选择器。可以选择并立刻跳转查看。这个操作比使用一般的“查找”功能快得多。


8) 更换主题

Sublime Text的外观主题可以更换。Soda Theme就是一个不错的主题,可以在包管理器中安装。

如果要安装的主题并不在在线软件仓库中,也可以手动安装:

  1. 下载并解压缩主题包
  2. 点击菜单 Preferences > Browse Packages…
  3. 把主题文件夹复制到Packages文件夹中.
  4. 点击菜单 Preferences > Settings – Users 并加入以下代码:"theme": "Soda Light.sublime-theme"


9) 更换Sublime Text程序图标

不仅主题可以更换,图标也可以。在Dribbble上有大量重新设计的Sublime Text精美图标。更换方法:

下载一个图标,有.icns格式的最好。如果没有,用iConvert转换之。

终端执行:

open /Applications/Sublime\ Text.app/Contents/Resources/

替换Sublime Text 3.icns或Sublime Text 2.icns文件。


8) 增强侧边栏

SideBarEnhancements插件有效地改进了Sublime Text的侧边栏。安装插件后在侧边栏上点击右键,可以找到一下新功能:在资源管理器中打开、新建文件、新建文件夹、以…打开、在浏览器中打开。

注:在浏览器中打开的热键是F12。

你还知道哪些sublime的技巧吗?欢迎你来留言哦!

插件安装方式,ctrl+shift+p输入install packages

CSS3:支持CSS3里的语法高亮。(Sublime3里自带的CSS高亮不够用)。安装后, 打开一个CSS文件,然后按照下面GIF操作,将CSS3高亮作为CSS文件的默认高亮。

livestyle:调试后实时更新页面。安装这个还需要安装谷歌的插件。

Emmet:快速生成代码,用过h5build的应该知道。ul*li*3相当于:

<ul><li></li><li></li><li></li></ul>

记下语法就ok.

ConvertToUTF8:编码转utf8

CSScomb:css属性排序

html5:html规范包,输入html+tab生成html规范文档

Alignment:代码对齐,快捷键ctrl alt a

Autoprefixer插件:css3私有前缀自动补全插件

AutoFileName:自动完成文件名的输入,如图片选取,快捷输入文件名路径补全

less sass插件

JsFormat js格式化插件

Terminal 命令行插件

Minify 代码美化压缩插件

Color Highlighter 颜色选择插件

快捷键

Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。

Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名、函数名等。

Ctrl+L 选中整行,继续操作则继续选择下一行,效果和 Shift+↓ 效果一样。

Ctrl+Shift+L 先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行。

Ctrl+Shift+M 选择括号内的内容(继续选择父括号)。举个栗子:快速选中删除函数中的代码,重写函数体代码或重写括号内里的内容。

Ctrl+M 光标移动至括号内结束或开始的位置。

Ctrl+Enter 在下一行插入新行。举个栗子:即使光标不在行尾,也能快速向下插入一行。

Ctrl+Shift+Enter 在上一行插入新行。举个栗子:即使光标不在行首,也能快速向上插入一行。

Ctrl+Shift+[ 选中代码,按下快捷键,折叠代码。

Ctrl+Shift+] 选中代码,按下快捷键,展开代码。

Ctrl+K+0 展开所有折叠代码。

Ctrl+← 向左单位性地移动光标,快速移动光标。

Ctrl+→ 向右单位性地移动光标,快速移动光标。

shift+↑ 向上选中多行。

shift+↓ 向下选中多行。

Shift+← 向左选中文本。

Shift+→ 向右选中文本。

Ctrl+Shift+← 向左单位性地选中文本。

Ctrl+Shift+→ 向右单位性地选中文本。

Ctrl+Shift+↑ 将光标所在行和上一行代码互换(将光标所在行插入到上一行之前)。

Ctrl+Shift+↓ 将光标所在行和下一行代码互换(将光标所在行插入到下一行之后)。

Ctrl+Alt+↑ 向上添加多行光标,可同时编辑多行。

Ctrl+Alt+↓ 向下添加多行光标,可同时编辑多行。

Ctrl+J 合并选中的多行代码为一行。举个栗子:将多行格式的CSS属性合并为一行。

Ctrl+Shift+D 复制光标所在整行,插入到下一行。

Tab 向右缩进。

Shift+Tab 向左缩进。

Ctrl+K+K 从光标处开始删除代码至行尾。

Ctrl+Shift+K 删除整行。

Ctrl+/ 注释单行。

Ctrl+Shift+/ 注释多行。

Ctrl+K+U 转换大写。

Ctrl+K+L 转换小写。

Ctrl+Z 撤销。

Ctrl+Y 恢复撤销。

Ctrl+U 软撤销,感觉和 Gtrl+Z 一样。

Ctrl+F2 设置书签

Ctrl+T 左右字母互换。

F6 单词检测拼写

Ctrl+F 打开底部搜索框,查找关键字。

Ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找,略高端,未研究。

Ctrl+P 打开搜索框。举个栗子:1、输入当前项目中的文件名,快速搜索文件,2、输入@和关键字,查找文件中函数名,3、输入:和数字,跳转到文件中该行代码,4、输入#和关键字,查找变量名。

Ctrl+G 打开搜索框,自动带:,输入数字跳转到该行代码。举个栗子:在页面代码比较长的文件中快速定位。

Ctrl+R 打开搜索框,自动带@,输入关键字,查找文件中的函数名。举个栗子:在函数较多的页面快速查找某个函数。

Ctrl+: 打开搜索框,自动带#,输入关键字,查找文件中的变量名、属性名等。

Ctrl+Shift+P 打开命令框。场景栗子:打开命名框,输入关键字,调用sublime text或插件的功能,例如使用package安装插件。

Esc 退出光标多行选择,退出搜索框,命令框等。

Ctrl+Tab 按文件浏览过的顺序,切换当前窗口的标签页。

Ctrl+PageDown 向左切换当前窗口的标签页。

Ctrl+PageUp 向右切换当前窗口的标签页。

Alt+Shift+1 窗口分屏,恢复默认1屏(非小键盘的数字)

Alt+Shift+2 左右分屏-2列

Alt+Shift+3 左右分屏-3列

Alt+Shift+4 左右分屏-4列

Alt+Shift+5 等分4屏

Alt+Shift+8 垂直分屏-2屏

Alt+Shift+9 垂直分屏-3屏

Ctrl+K+B 开启/关闭侧边栏。

F11 全屏模式

Shift+F11 免打扰模式