Sublime Text里常的用插件(多图预警)

日期:2015-09-01 21:12:31

Sublime Text是一款我个人非常喜欢的代码编辑器,是由之前公司的一个牛人推荐的,不得不说用了它以后就一发不可收拾,它小巧而强悍,跟其它大的编辑器比起来响应速度更快一些。Sublime Text具有美观的界面和强大的扩展功能,有众多的插件让我们选择,下面列举几款常用的sublime Text 插件。

Package Control

安装Sublime Text后第一个就该安装它,作为方便安装管理插件的一款工具更是Sublime Text的标配,它的安装方法有很多这里就不做赘述了,附上一个安装地址

QQ截图20150901220828.png

Emmet

如果你从事前端的话对这款插件一定不陌生,它是一组专门用来提高书写HTML和CSS代码速度的便利工具。

emmet.gif


HTML-CSS-JS Prettify

HTML-CSS-JS Prettify是一款快速格式化HTML/CSS/Javascript代码格式的插件,使用它之前必须要在系统中先安装node.js,然后再配置一下node.js的安装路径。快速格式化快捷键:Ctrl+Shift+H

html.gif


Git

在工作中,版本控制软件最常用的软件之一,而最流行的版本控制工具是 Git。如果你厌倦了修改文件后回到命令行或是Git管理工具界面查看文件状态时,可以选择Sublime Text的Git插件,它包含了Git常用的操作命令,使用的时候只需要调出按:Ctrl+Shift+P命令面板,然后输入Git就出现众多操作指令,我们只需要选择相应的指令就能对Git版本仓库进行操作了。

Git.gif


GitGutter

Sublime Text有了Git插件后就能操作Git版本仓库了,可是这还不够,在我们开发中如果想实时看到文件内容的改动差异就需要安装GitGutter插件,来提升开发效率。

cb42e7cddad0c04794b783742ee8f2085e95295a.png

多说一句,在家里安装GitGutter后立马就能看到效果,但是公司的电脑却没用,后来去Github上看了GitGutter的说明文档,找到原因。只需要在Sublime Text里找到GitGutter的用户配置项,在用户配置文件加入Git在本地安装的路径:

QQ截图20150902093026.png

Terminal

这是一个能在当前文件或是当前项目根目录快速打开命令行的插件,配置简单很简单,当我发现这款插件的时候非常高兴,因为之前都是现在sublime里选择Reveal回到项目根目录,有了这个插件我就能省下我点击鼠标的力气。快捷键:ctrl+shift+alt+t,在当前文件夹根目录打开命令行。当然ctrl+shift+t

也是可以的,但是跟sublime的快捷键有冲突,所以就用第一个。

cmd.gif

如果忍受不了系统自带的可以自己配置想要的命令行工具,比如Git。可以打开Terminal默认配置看一下,把本地Git路径复制到配置项中就ok了。

{
	// The command to execute for the terminal, leave blank for the OS default
	// On OS X the terminal can be set to iTerm.sh to execute iTerm
	"terminal": "C:\\Program Files\\Git\\Git-bash.exe",

	// A list of default parameters to pass to the terminal, this can be
	// overridden by passing the "parameters" key with a list value to the args
	// dict when calling the "open_terminal" or "open_terminal_project_folder"
	// commands
	"parameters": []
}

Nettuts+ Fetch

如果你在用一些公用的或者开源的框架,比如 Normalize.css或者jquery.min.js,但是,过了一段时间后,可能该开源库已经更新了,而你没有发现,这个时候可能已经不太适合你的项目了,那么你就要重新折腾一遍或者继续用陈旧的文件。Nettuts Fetch可以让你设置一些需要同步的文件列表,然后保存更新。

QQ截图20150901230347.png

通过命令面板调用已经定义好的框架列表会很方便。

ad.gif

BracketHighlighter

类似于代码匹配,可以匹配括号,引号等符号内的范围。

2c23129492d6d74b8f9139711578e9ad0d1115a0.png


AdvancedNewFile

这个插件可以让我们在项目中快速创建文件夹和文件,比传统的创建更加高效。安装插件后只需要按快捷键ctrl+alt+n调出控制台,输入文件路径和名称就可以快速创建想要的文件了。

adv.gif


如果想在现有文件夹下创建新目录或新文件只需要在控制台输入文件夹名称的前几个字母按Tab键就自动补全文件夹名称。


AutoFileName

看插件名称已经知道这插件是做什么用的了,是的,就是自动识别文件名称和文件夹下的文件名称。当我们在引入CSS文件或是JS文件的时候总会忘记文件的路径或是名称,还好有AutoFileName这个插件帮我们完成这些繁琐的工作,我们只需要做很少事情就能实现自动补全文件名称的动作了。

adv1.gif


Gulp

Gulp作为前端自动化工具很多前端人员都应该知道怎么使用它,当在sublime里也能运行gulp时想想真是太酷了。sublime丰富的插件库肯定会有这样受欢迎的插件,写代码不想切换到命令行运行Gulp时就可以通过安装Gulp插件来完成这件事。

gulp1.gif

插件装好后可以通过打开命令面板(ctrl+shift+p)输入gulp就会显示相应的命令,这样选择起来就方便多了。当然还可以在gulpfile.js文件右键展开菜单栏就可以看到Gulp的选项了,展开后选择相应的命令就可以执行Gulp任务。运行gulp任务后就可以看到控制台的信息,同样可以通过命令面板显示和隐藏控制台信息。