Sublime Text常用快捷键和插件

本是古典何须时尚 2022-02-26 04:55 260阅读 0赞

Sublime Text是一个代码编辑器，也是HTML和散文先进的文本编辑器。

本文通过实例来介绍项目中常用快捷键和插件的用法，熟悉快捷键和引用插件可以极大的提高我们的开发效率。

### sublime常用快捷键 ###

输入“html:5”后点击Tab键或输入“!”后点击Ctrl+E都能转换为html5的骨架结构，转换为的代码如下图：

Tips：需安装Emmet插件；

右下角的文本类型要选为“html”。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70][]

输入“div.wrapper>div.header>span.title\{标题\}”或“ul.lis>li\*5>p.title+p.content”后点击Tab可以快速生成相应的代码，转换为的代码如下图：

Tips：上面两种写法只是其中的一部分，大家可以自己练习多种组合；

img\[src="face/bd/$.gif"\] ＋Tab，bd目录下自动从1开始到最后，适合于一次性增加从1--多个的图片。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1][]

“Ctrl+Shift+P”用于快速更改文件类型（js/css）（第一图）、安装插件（第二图）等，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3][]

“Ctrl+G”用于快速定位到行数，比如审查元素知道修改的样式在那一行，就可以点击快捷键，然后输入行数，就能定位到相应的位置进行修改；

“Ctrl+C”用于撤回信息，而“Ctrl+Y”用于恢复信息，都可多次操作；

“Ctrl+/”用于注释信息，可单行也可以多行；

“Ctrl+F”用于查找输入的内容，可往前、往后或全部查找；

“Ctrl+Shirt+D”用于复制游标所在行；

“Ctrl+D”用于选择游标所在单词，连续“Ctrl+D”实现多个选择（选择与第一次选择相同的单词）；如果中间有要跳过的相同单词，可以先点击“Ctrl+K”再点击“Ctrl+D”；

“Alt+F3”用于选择所有与游标所在单词相同的单词，跟上面一个快捷键对于批量修改非常方便。

“Alt+Shift+1/2/3”，后面数字表示要显示多少列，如下图，对于参照html编写css和js有很大的便利。

Tips：从标题到这块是最经常用到的快捷键，一定熟悉记住。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 4][]

“Ctrl+\] ”增加缩进，“Ctrl+\] ” 减小缩进，好的排版有利于查看；

“Ctrl+Shift+V”保持缩进粘贴，直接用“Ctrl+V”有时会导致显示排版乱了，使用该快捷键可以保持原来的排版；

“Ctrl+PgUp”往前切换Tab栏的文件，“Ctrl+PgDn”往后切换Tab栏的文件；

“/\*\*+Tab”常用于js的自动补全注释信息和内容；

“Ctrl+P”用于快速查找并打开文件，点击快捷键后打开命令面板，直接点击就可以打开文件，也可以进行搜索操作；

“Ctrl+L”用于选择单行；

“Ctrl+H”用于查找替换，可替换单个或全部替换；

“Ctrl+Shift+Enter”在当前上方添加一行；

右键点击“Open Containing Folder”可以打开该文件的本地目录。

“Ctrl+Shift+P”打开命令面板，输入range点击第一条就会出现了，然后输入开始和结束数字，可以批量修改序号，需安装插件Text Pastry。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 5][]

“跟踪函数ctags”在使用函数调转功能前，需要先生成.tags文件，只需在项目文件管理器的项目文件上右键点击Ctags:Rebuild Tags即可（注意，在改动文件之后也许重新生成.tags）；所有工作都准备充分之后，就可以在函数名上右键点击navigate 头definition跳转到指定函数了，返回用jump back，需安装插件ctags。

### sublime常用插件 ###

直接安装：直接下载安装包解压缩到Packages目录（菜单->preferences->Browse Packages）；

使用Package Control组件安装（在线安装）：点击“Ctrl+\`”，然后输入“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())（）”回车，下载完毕后，重启Sublime Text程序；如果在Perferences->中看到package control这一项，则安装成功。

Tips：输入代码为3版本，其他版本代码可以百度搜索。

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

比如“Emmet”，在搜索框输入“Emmet”，列表就会显示插件“Emmet”，然后点击该条数据，就会开始安装该插件，安装信息可查看左下角。

Tips：安装插件时保持网络畅通，避免插件由于网络原因奔溃。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 7][]

常用插件用法说明：

Emmet（原名 Zen Coding）：一种快速编写html/css的方法；

Autoprefixer：CSS3私有前缀自动补全插件；

AutoFileName：显示路径下文件名；

SyncedSidebarBg：自动同步侧边栏底色为编辑窗口底色；

HTML-CSS-JS Prettify：html/css/js格式化工具，依赖node.js，格式化的HTML不能有中文和中文符号等，HTMLPrettify.sublime-settings路径对应node安装目录，使用快捷键“Ctrl+Shift+H”；

sublimelinter：检查js语法；

jQuery：补全JQ代码；

Text Pastry：可以一次性改批量序号，用法快捷键里面有介绍；

ctags：跟踪函数，用法快捷键里面有介绍；

Less2Css：保存less文件时候自动生成css文件，windows下，Less2CSS对lessc.cmd有依赖，请下载：https://github.com/duncansmart/less.js-windows/releases后并将其路径（ E:/Less）添加至系统环境变量中；一般建议生产环境不使用less，所以这个还是蛮方便的；

SideBarEnhancements：设置浏览器，如下图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 8][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70]: /images/20220226/8cd4ecc6a7684ad181a3dabb7abaa335.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1]: /images/20220226/a18a87cb7b004ecaaaab0fb934187972.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2]: /images/20220226/bb14456cf783470d92283f802be92b4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3]: /images/20220226/06b83f6286174c7888961be6d6fc447d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 4]: /images/20220226/a021dde4a7ed4e3f8119a4f594574652.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 5]: /images/20220226/7e3c85bc493147f7b6e64cabf2800da4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 6]: /images/20220226/28bc38b41a3041739c287b74d76c9dbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 7]: /images/20220226/b76cb428d6464b95b795e86393a60182.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 8]: /images/20220226/6bacde9457194f5784908d9d6eb74f49.png