豆米的画像
首页Home博客Blogs标签Tags分类Categories时间线Timeline豆米DouMi本站Website登录Login

sublimeText3编辑器使用教程

发表于 2016-08-10
更新于 2024-05-23
分类于 技术专栏
阅读量 9944
字数统计 12286

更新日志：

2016-08-10：

完成sublimeText3的基本配置

2016-09-21：

  1. 在项目中不断更新sublimeText，所以之前的有些插件已经没有多大用途。
  2. 增加React、Babel插件，让Sublime更贴近目前前端开发的环境
  3. 加上一些安装Eslint的坑

保留这篇文章，另加了一篇新的文章sublimeText3编辑器支持ES6的开发

sublimeText是一款轻便的编辑工具，因为有其众多的插件以及跨平台让这款编辑器变得更加受欢迎。在使用sublimeText之前，我们肯定会先安装一些常用的插件，这样在开发过程中才可以更加便利。

1、常用插件安装

在安装所有常用的插件之前我们需要安装一个必备插件，通过该插件就可以迅速地安装别的插件。Package Control 是标准配置，调用快捷键Ctrl+Shift+P便可以弹出该插件面板：

Package control插件的安装方法是：

1、按Ctrl+~调出console

2、粘贴以下代码到底部命令行并回车：

import urllib.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.1、系统功能

1.1.1、git

在工作中，版本控制软件最常用的软件之一，而最流行的 VCS 是 Git。你是否厌倦了保存文本文件，并切换回终端运行一些 Git 命令。如果你能从文本编辑器本身执行 Git 命令，岂不是很好？ 在对应的文件中启动Package Control面板，输入git便有git操作的各种命令：

参考网页： https://packagecontrol.io/packages/Git

1.1.2、gitGutter

Sublime Text 有了 Git 插件之后，GitGutter 更好的帮助开发者查看文件之前的改动和差异，提升开发效率。 安装完该插件，只要修改某个文件，左侧栏便有相应的标记：

参考网页： https://packagecontrol.io/packages/GitGutter

1.1.3、SideBarEnhancements

SideBarEnhancements 是一款很实用的右键菜单增强插件，有以 diff 形式显示未保存的修改、在文件管理器中显示该文件、复制文件路径、在侧边栏中定位该文件等功能，也有基础的诸如新建文件/目录，编辑，打开/运行，显示，在选择中/上级目录/项目中查找，剪切，复制，粘贴，重命名，删除，刷新等常见功能。

SideBarEnhancements 还有一个功能就是自定义打开文件的程序，在侧边栏中右键点击一个文件（夹），选择 Open With -> Edit Applications 就可以修改关联了，配置文件自带示例，可以很方便地套用。

Copy as Text… 是 SideBarEnhancements 的又一个特色功能，可以复制包含各种形式的路径、URL（甚至包括 base64 的 data:uri）、转码后的文件名、各种 HTML Tag（a、img、script、style）等。

参考网页： https://packagecontrol.io/packages/SideBarEnhancements

1.1.4、Origami

该插件是帮助你创建新的面板或者删除面板、移动或者克隆视图从一个面板到另一个面板。常用的命令是创建和删除面板： 创建面板：首先按住Ctrl+K，之后再按住Ctrl+方向键创建对应方向的面板； 比如：Ctrl+K之后按Ctrl+ Right有：

删除面板同理，找到对应的快捷键即可。 参考网页： https://packagecontrol.io/packages/Origami

1.1.5、EncodingHelper

该插件可以显示文件的编码格式，并将各种各样的编码转换为UTF-8。

1.1.6、PlainTasks

该插件可以提供一个辅助的任务列表编辑器。类似如下：

具体使用情况参考：https://packagecontrol.io/packages/PlainTasks

1.1.7、Theme - SpaceGray

目前使用的一个主题插件。安装完成之后在Preferences-Setting-User中添加下面的配置：

{
"color_scheme": "Packages/Color Scheme - Default/Monokai Bright.tmTheme",
"draw_minimap_border": true,
"font_size": 14,
"highlight_line": true,
"ignored_packages":
[
	"Vintage"
],
"show_encoding": true,
"theme": "Spacegray Eighties.sublime-theme"
//"theme": "Soda Dark 3.sublime-theme"
}

参考网页：https://packagecontrol.io/packages/Theme%20-%20Spacegray

1.1.8、Bracket Highlighter

BracketHighlighter 是一个括号、引号、标签高亮插件，支持 []、()、{}、””、” 和 等，比 Sublime Text 自带的高亮要明显得多。效果类似于：

参考网页： https://packagecontrol.io/packages/BracketHighlighter

1.1.9、Alignment

用于代码格式的自动对齐。按Ctrl+Alt+A，可以是凌乱的代码以等号为准左右对其

参考网页：https://packagecontrol.io/packages/Alignment

1.1.10、SublimeLinter

SublimeLinter 是一个代码校验插件，它可以帮你找出错误或编写不规范的代码，支持 C/C++、CoffeeScript、CSS、Git Commit Messages、Haml、HTML、Java、JavaScript、Lua、Objective-J、Perl、PHP、Puppet、Python、Ruby 和 XML 语言。 参考网页：https://packagecontrol.io/packages/SublimeLinter

1.1.11、SublimeTmpl

SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板，所有的文件模板都在插件目录的templates文件夹里，可以自定义编辑文件模板。

SublimeTmpl默认的快捷键：

ctrl+alt+h html
ctrl+alt+j javascript
ctrl+alt+c css
ctrl+alt+p php
ctrl+alt+r ruby
ctrl+alt+shift+p python

如果想要新建其他类型的文件模板的话，先自定义文件模板方在templates文件夹里，再分别打开Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings这四个文件照着里面的格式自定义想要新建的类型。 参考网页：https://packagecontrol.io/packages/SublimeTmpl

1.1.12、AdvancedNewFile

该插件自动创建文件并保存。快捷键调用Ctrl+Alt+N即可。

参考网页：https://packagecontrol.io/packages/AdvancedNewFile

1.2、代码编写

1.2.1、Emmet

Emmet 是一个前端开发的利器，其前身是 Zen Coding。它让编写 HTML 代码变得简单。Emmet 的基本用法是：输入简写形式，然后按 Tab 键。 比如在HTML文件中刚开始编写的时候直接打个！号，然后按CTRL+E就可以自动帮你补齐 剩余的HTML头部等信息 再比如生成一些html语句：

ul>.item$*10

将会自动生成：

<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
</ul>

再比如输入h2{This is title}，再按住CTRL+E将会生成：

<h2>this is title</h2>

还有就是在标签中需要添加一个JS的代码，直接输入script，Emmet会自动生成

<script></script>

参考网页：https://packagecontrol.io/packages/Emmet

1.2.2、AllAutocomplete

Sublime Text 默认的 Autocomplete 功能只考虑当前的文件，而 AllAutocomplete 插件会搜索所有打开的文件来寻找匹配的提示词。 参考网页： https://packagecontrol.io/packages/All%20Autocomplete

1.2.3、AutoFileName

该插件可以帮你自动补齐文件路径以及提示文件名称，类似于这种效果：

参考网页： https://packagecontrol.io/packages/AutoFileName

1.2.4、DocBlockr

如果你遵循的编码的风格很严格，这款插件能够使你的任务更容易。DocBlokr 帮助你创造你的代码注释，通过解析功能，参数，变量，并且自动添加基本项目。类似于这样的效果：

参考网页： https://packagecontrol.io/packages/DocBlockr

1.2.5、Comment-Snippets

该插件可以迅速地创建有用的注释。效果如下：

选择第一个comm-todo便有：

参考网页： https://packagecontrol.io/packages/Comment-Snippets

1.2.6、Better Completion

该插件类似于All auto completion。也是补全代码的功能。 参考网页：https://packagecontrol.io/packages/Better%20Completion

1.2.7、Sublime CodeIntel

SublimeCodeIntel 是一个代码提示、补全插件，支持 JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python3、XML、Sass、XSLT、Django、HTML5、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit 和 PHP 等语言，是 Sublime Text 自带代码提示功能的很好扩展。它还有一个功能就是跳转到变量、函数定义的地方，十分方便。

使用 SublimeCodeIntel 之前你需要安装相应程序并把路径写入 ~/.codeintel/config 或 project_root/.codeintel/config 中，ReadMe 中有详细的 说明，不再赘述。

十分不建议把 SublimeCodeIntel 与其他单个语言的扩展 package 一同使用，虽然很多语言扩展 package 比 SublimeCodeIntel 的代码提示功能要完善。如果需要一同使用，请在用户配置文件（菜单 Preferences -> Package Settings -> SublimeCodeIntel -> Settings – User 中加入下面的内容，并去掉要禁用的语言。

"codeintel_enabled_languages":
[
"JavaScript", "Mason", "XBL", "XUL", "RHTML", "SCSS", "Python", "HTML",
"Ruby", "Python3", "XML", "Sass", "XSLT", "Django", "HTML5", "Perl", "CSS",
"Twig", "Less", "Smarty", "Node.js", "Tcl", "TemplateToolkit", "PHP"
],
"codeintel_live_enabled_languages":
[
"JavaScript", "Mason", "XBL", "XUL", "RHTML", "SCSS", "Python", "HTML",
"Ruby", "Python3", "XML", "Sass", "XSLT", "Django", "HTML5", "Perl", "CSS",
"Twig", "Less", "Smarty", "Node.js", "Tcl", "TemplateToolkit", "PHP"
]

1.2.8、TrailingSpaces

有时候在代码结尾打多了几个空格或Tab，一般不会察觉，TrailingSpacer这款插件能高亮显示多余的空格和Tab，并可以一键删除它们，有代码洁癖的朋友应该会喜欢这个插件。

参考网页：https://packagecontrol.io/packages/TrailingSpaces

1.3、HTML

1.3.1、HTML5

该插件帮助开发者在写html5代码的时候自动补全剩余的代码片段，比如输入<time然后回车就会自动补全成：<time datetime="2011-01-12">January 12th, 2011</time>。

参考网页：https://packagecontrol.io/packages/HTML5

1.3.2、HTMLAttributes

该插件会自动补齐HTML的一些属性。

参考网页：https://packagecontrol.io/packages/HTMLAttributes

1.3.3、HTMLBeautify

该插件格式化HTML代码，使代码看起来更加舒服。

参考网页：https://packagecontrol.io/packages/HTMLBeautify

1.4、JavaScript

1.4.1、JavaScript Completion

该插件自动补齐JavaScript语法。

参考网页：https://packagecontrol.io/packages/JavaScript%20Completions

1.4.2、JavaScript Snippets

该插件可以自动补全一些JavaScript的代码片段，类似于这种效果：

就可以得到下面的函数：

更多的精简命令参考网页： https://packagecontrol.io/packages/JavaScript%20Snippets

1.4.3、JsFormat

JavaScript代码格式化插件。快捷键是Ctrl+Alt+F。

参考网页：https://packagecontrol.io/packages/JsFormat

1.4.4、JSLint

一款JavaScript代码语法错误检查的工具。使用方法：

参考网页： https://packagecontrol.io/packages/JSLint

1.5、CSS

1.5.1、Autoprefixer

该插件可以帮助开发者补全CSS3 私有前缀。做法便是在你的文件中按照正常的格式书写，之后等写完CSS文件直接调用即可，该插件便会去检查目前文件中需要带有浏览器相关的属性，有的话自动补全。 效果类似于：

之后打开Package Control并输入autoPrefix CSS，之后的效果便是这样：

参考网页： https://packagecontrol.io/packages/Autoprefixer

1.5.2、ColorPicker

通常，如果你想使用一个颜色选择器则可能打开 Photoshop 或 GIMP。而在 Sublime Text 中，你可以使用内置的颜色选择器。安装完成后，只要按下Ctrl + Shift + C 快捷键。如果快捷键有些冲突的话可以通过Package Control来调出该插件。

参考网页： https://packagecontrol.io/packages/ColorPicker

1.5.3、Hex-to-HSL-Color Converter

在用CSS3的一些属性时会用到HSL颜色模式，用软件转来转去确实麻烦，用Hex-to-HSL-Color这个插件便可轻松解决，鼠标选中一个或多个十六进制颜色代码，按下Shift+Ctrl+U立马转换为HSL颜色模式。

参考网页：https://packagecontrol.io/packages/Hex%20to%20HSL%20Color%20Converter

1.5.4、CSS Compact Expand

每个人写CSS都有不同的风格，有些人喜欢写成一行，有些人喜欢写成多行，各有各的好处，我倒喜欢将CSS写成一行，这样能减少CSS文件大小，且屏幕能显示更多的Class方便查找。如果阅读别人的代码不符合自己的习惯，可以用CSS Compact Expand这个插件将CSS格式化一下，按 Ctrl+Alt+[ 收缩CSS代码为一行显示，按 Ctrl+Alt+] 展开CSS代码为多行显示

参考网页： https://packagecontrol.io/packages/CompactExpandCss

1.6、Jquery

1.6.1、jQuery

该插件可以提供Jquery代码编写的自动补全功能。比如：

自动提供Jquery的函数供开发者选择。

参考网页： https://packagecontrol.io/packages/jQuery

1.6.2、jQuery Mobile 1.4 Snippets

jQuery Mobile（jQueryMobile） 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。 该插件可以提供jQuery Mobile的代码片段补全功能。

参考网页：https://packagecontrol.io/packages/jQuery%20Mobile%201.4%20Snippets

1.7、bootstrap

1.7.1、Bootstrap 3 Snippets

该插件提供bootstrap 3 版本的代码片段补全功能，并且输入的简写都是以bs3为开头的，比如： 输入bs3-cdn，插件便会帮你补全成：

结果是：

参考网页：https://packagecontrol.io/packages/Bootstrap%203%20Snippets

2、sublimeText使用技巧与常用快捷键

2.1、sublimeText使用技巧

2.1.1、GotoAnything的使用

 快捷键是：CTRL+P
 可以快速打开文件。

CSS文件中查找某个选择符也可以用这个快捷键，但是需要加上@

JS文件查找某个函数也可以用这个快捷键，但是也需要加上@

在HTML文件中查找某个元素也可以用这个快捷键，但是需要加上的是符号#

快速跳到某一行格式是“：行号”

2.1.2、多行游标的使用

跳到需要使用的字符，使用CTRL+D选择，再按CTRL+D会选中下一个字符串，如果这个不需要更改可以CTRL+K跳过该字符串

还有另一个快捷键是ALT+F3，可以选中所有的需要的字符

拆行的方式：CTRL+A全部选择，再按住CTRL+SHIFT+L产生多行游标

最后一种方式是跳到所需的字符上，按住SHIFT键和鼠标右键，直接拖动，就可以产生游标

2.2、常用快捷键

  • 快速跳到下一行：CTRL+ENTER
  • 快速跳到上一行：CTRL+SHIFT+ENTER
  • 快速复制文本并调到下一行：CTRL+SHIFT+D
  • 增加缩进：CTRL+]
  • 减少缩进：CTRL+[
  • 拷贝保持正确的缩进：CTRL+SHIFT+V
  • 快速注释：CTRL+/
  • 取消注释：CTRL+SHIFT+/
  • 快速选择某一行：CTRL+L
  • 快速选择某一个单词：CTRL+D

3、SublimeText打包

当我们转换工作环境的时候，没必要将刚才的插件重新安装一遍，只需要在第一遍的时候将这些插件打包起来，下次换台电脑照样直接打开使用，这样省事多了，操作方法可以参考这篇文章： https://segmentfault.com/a/1190000000707661

4、SublimeText常用的User配置

一般我们的全局配置会配置在Preferences-->Settings-User下，下面的配置是个人常用的一种，可以参考一下：

	"caret_style": "phase",
	"color_scheme": "Packages/User/SublimeLinter/Monokai Bright (SL).tmTheme",
	"draw_minimap_border": true,
	"font_face": "YaHei Consolas Hybrid",
	"font_size": 15,
	"highlight_line": true,
	"highlight_modified_tabs": true,
	"ignored_packages":
	[
		"Vintage"
	],
	"show_encoding": true,
	"tab_size": 2,
	"theme": "Spacegray Eighties.sublime-theme",
	"trim_trailing_white_space_on_save": true

公众号关注一波~

微信公众号

关于评论和留言

如果对本文 sublimeText3编辑器使用教程 的内容有疑问，请在下面的评论系统中留言，谢谢。

网站源码：linxiaowu66 · 豆米的博客

Follow：linxiaowu66 · Github