Sublime Text 3 web 开发常用配置

时间：2022-01-13 18:30:26

前沿

Sublime Text 是一个代码编辑器（Sublime Text 2是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。是目前应用最广泛的编程工具之一，受到众多程序猿的追捧。网络上已有很多关于Sublime Text3的配置文章，但很多都不太适合本人的需求，很多插件在前端开发中很少会用到或者不能恰当的使用。由于每次重装一次Sublime Text3都需要在各种文章中搜寻适合自己的插件并安装，做了很多无用功，特写出本文总结一下，以备下次使用。

Sublime Text3 注册

Sublime Text3是一款收费软件，需要注册后才能使用。注册方式如下：

打开Sublime Text3-->Help-->Eenter License-->输入注册码。

限于国人知识产权的薄弱意思和贪婪心理，很少有人真会去买注册码，以下是3个注册码：

—– BEGIN LICENSE —–

Andrew Weber

Single User License

EA7E-855605

813A03DD 5E4AD9E6 6C0EEB94 BC99798F

942194A6 02396E98 E62C9979 4BB979FE

91424C9D A45400BF F6747D88 2FB88078

90F5CC94 1CDC92DC 8457107A F151657B

1D22E383 A997F016 42397640 33F41CFC

E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D

5CDB7036 E56DE1C0 EFCC0840 650CD3A6

B98FC99C 8FAC73EE D2B95564 DF450523

—— END LICENSE ——
—– BEGIN LICENSE —–

K-20

Single User License

EA7E-940129

3A099EC1 C0B5C7C5 33EBF0CF BE82FE3B

EAC2164A 4F8EC954 4E87F1E5 7E4E85D6

C5605DE6 DAB003B4 D60CA4D0 77CB1533

3C47F579 FB3E8476 EB3AA9A7 68C43CD9

8C60B563 80FE367D 8CAD14B3 54FB7A9F

4123FFC4 D63312BA 141AF702 F6BBA254

B094B9C0 FAA4B04C 06CC9AFC FD412671

82E3AEE0 0F0FAAA7 8FA773C9 383A9E18

—— END LICENSE ——
—– BEGIN LICENSE —–

J2TeaM

2 User License

EA7E-940282

45CB0D8F 09100037 7D1056EB A1DDC1A2

39C102C5 DF8D0BF0 FC3B1A94 4F2892B4

0AEE61BA 65758D3B 2EED551F A3E3478C

C1C0E04E CA4E4541 1FC1A2C1 3F5FB6DB

CFDA1551 51B05B5D 2D3C8CFE FA8B4285

051750E3 22D1422A 7AE3A8A1 3B4188AC

346372DA 37AA8ABA 6EB30E41 781BC81F

B5CA66E3 A09DBD3A 3FE85BBD 69893DBD

—— END LICENSE ——

Sublime Text 3安装插件的方法：

直接安装

安装Sublime text 3插件很方便，可以直接下载安装包解压缩到Packages目录（菜单->preferences->packages）。

使用Package Control组件安装

也可以安装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. 重启Sublime Text 3。
  2. 如果在Perferences->package settings中看到package control这一项，则安装成功。

如果这种方法不能安装成功，可以进行手动安装：

  1. 先下载https://github.com/wbond/sublime_package_control中的zip文件，解压后将文件夹名更改为package control。
  2. 下载插件分支https://github.com/wbond/sublime_package_control/tree/python3中的zip文件，解压后覆盖到package control中，完成此插件API函数的更新。
  3. 将package control文件夹放入C:\Users\Mr.DenGo(你的电脑名)\AppData\Roaming\Sublime Text 3\Packages中，重启sublime text 3即可生效。

用Package Control安装插件的方法：

  1. 按下Ctrl+Shift+P调出命令面板
  2. 输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。

常用插件列表

  • Emmet

Emmet绝对的节省时间。您可以轻松快速地编写HTML。

使用方法: ctrl + alt + enter，并且开始输入Emmet风格的HTML.

详细使用方法可以参考 Emmet指南 。

  • DocBlockr

一个真正简单的方式来轻松地创建许多语言包括JavaScript，PHP和CoffeeScript的文档块。只要在函数的上面输入 /** ，按 Tab 就可以了。DocBlockr会观察函数需要的变量名和类型，并创建文档块。

  • Alignment （代码对齐）

一个非常简单和易于使用的插件,使你的代码组织和美观。当您重温代码时候非常有用。

使用方法：选中要调整的行，然后按 Ctrl + Alt + A。

  • BracketHighlighter

该插件提供行数列高亮的各种配对的语法符号。（注：就是将配对的括号等显示在行数列上）

  • Sublime Prefixr

Prefixr，CSS3 私有前缀自动补全插件，显然也很有用哇。

  • JS Format

一个JS代码格式化插件。

  • SublimeLinter

一个支持lint语法的插件，可以高亮linter认为有错误的代码行，也支持高亮一些特别的注释，比如“TODO”，这样就可以被快速定位。（IntelliJ IDEA的TODO功能很赞，这个插件虽然比不上，但是也够用了吧）

  • JsMinifier

该插件基于Google Closure compiler，自动压缩js文件。

  • jQuery

Sublime Text3支持jQuery。

  • CSSComb

这是用来给CSS属性进行排序的格式化插件。如果你想保持的代码干净整洁，并且希望按一定的顺序排列（是不是有点强迫症了？），那么这个插件是一种有效解决的方案。特别是当你和其他有自己代码编写风格的开发者一同协作的时候。

  • MarkDown Editing

SublimeText不仅仅是能够查看和编辑 Markdown 文件，但它会视它们为格式很糟糕的纯文本。这个插件通过适当的颜色高亮和其它功能来更好地完成这些任务。

  • DocBlockr

DocBlockr 可以使你很方便地对代码建立文档。它会解析函数，变量，和参数，根据它们自动生成文档范式，你的工作就是去填充对应的说明。

  • Git

Git插件，提供Git常用的命令集合。

  • FileDiffs

查找文档不同。

  • ColorPicker

如果你经常要查看或设置颜色值，这个插件可以很方便地调用你本机的调色板应用。这是一个双向的功能，你既可以在调色板中选择一个颜色，然后按“确定”按钮把该值填写到 SublimeText 中活动文档的当前位置，也可以在活动文档中选择一个颜色的值，按此插件的快捷键就会在显示的调色板中定位到该值所对应的颜色。

  • CanIUse

如果您想检查浏览器是否支持你包括在你的代码中的CSS和HTML元素，那么这是你需要的插件。所有您需要做的就是选择有疑问的元素，插件将为你做其余的事情。

附Sublime Text 3 快捷键列表：

精华版

  • Ctrl+Shift+P：打开命令面板
  • Ctrl+P：搜索项目中的文件
  • Ctrl+G：跳转到第几行
  • Ctrl+W：关闭当前打开文件
  • Ctrl+Shift+W：关闭所有打开文件
  • Ctrl+Shift+V：粘贴并格式化
  • Ctrl+D：选择单词，重复可增加选择下一个相同的单词
  • Ctrl+L：选择行，重复可依次增加选择下一行
  • Ctrl+Shift+L：选择多行
  • Ctrl+Shift+Enter：在当前行前插入新行
  • Ctrl+X：删除当前行
  • Ctrl+M：跳转到对应括号
  • Ctrl+U：软撤销，撤销光标位置
  • Ctrl+J：选择标签内容
  • Ctrl+F：查找内容
  • Ctrl+Shift+F：查找并替换
  • Ctrl+H：替换
  • Ctrl+R：前往 method
  • Ctrl+N：新建窗口
  • Ctrl+K+B：开关侧栏
  • Ctrl+Shift+M：选中当前括号内容，重复可选着括号本身
  • Ctrl+F2：设置/删除标记
  • Ctrl+/：注释当前行
  • Ctrl+Shift+/：当前位置插入注释
  • Ctrl+Alt+/：块注释，并Focus到首行，写注释说明用的
  • Ctrl+Shift+A：选择当前标签前后，修改标签用的
  • F11：全屏
  • Shift+F11：全屏免打扰模式，只编辑当前文件
  • Alt+F3：选择所有相同的词
  • Alt+.：闭合标签
  • Alt+Shift+数字：分屏显示
  • Alt+数字：切换打开第N个文件
  • Shift+右键拖动：光标多不，用来更改或插入列内容
  • 鼠标的前进后退键可切换Tab文件
  • 按Ctrl，依次点击或选取，可需要编辑的多个位置
  • 按Ctrl+Shift+上下键，可替换行

选择类

  • 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 免打扰模式

相关文章