如何优雅地使用SublimeText3_html/css_WEB-ITnose

概述

Sublime Text3下载地址：http://www.sublimetext.com/3。本文所有操作都是基于Sublime Text3，操作系统为mac，本文主要摘取自Sublime Text Unofficial Documentation。熟练掌握各种功能和技巧，能极大提高工作效率。

快捷键集合

快捷键

Cmd + shift + d:： 复制并粘贴当前选中内容，如果没选中，复制粘贴光标所在行。

安装

官网下载.dmg文件； 打开.dmg文件； 拖拽Sublime Text 3到Applications文件夹。

如果想要在命令行中启动Sublime Text，需要在终端执行一下命令：

ln -s  "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl 

这样设置之后在终端执行subl即可打开Sublime Text，执行subl 可以打开对应文件。

基本概念

熟悉本节介绍的概念能让你更好地理解本教程。

The Data Directory

几乎所有需要的文件都会保存在data directory下，不同操作系统路径不同：

Windows: %APPDATA%\Sublime Text 3 OS X: ~/Library/Application Support/Sublime Text 3 Linux: ~/.config/sublime-text-3

可以通过菜单：(Sublime Text -> Preferences -> Browse Packages…)在findle中打开该目录的子目录。

The Packages Directory

这是data directory下的一个重要目录。关于编程和标记语言的所有支持都保存在这里。可以通过菜单: (Sublime Text -> Preferences -> Browse Packages…) 在findle中打开该目录。

本文中Packages, packages path, packages folder或者packages directory都指它。

The User Package

Packages/User用于保存自定义插件(plugins)，snippets,宏(macros)。可以将它看作packages folder下的私人区域。个人程序和插件设置都存放在这里。

Sublime Text更新时不会修改里面的内容。

Sublime Text是可编程的

可以通过API使用Python开发插件。 快捷键 Ctrl + ` 打开控制台，可以在这里执行Python脚本，可以通过这里安装一些插件。

Packages, Plugins, Resources and Other Terms

几乎Sublime Text的所有功能都可以扩展和自定义，可以修改编辑器行为，添加macro和snippets，扩展菜单等等。也可以利用编辑器API创建复杂插件。

Sublime Text的灵活性导致你需要学习很多配置文件。这些配置文件都是JSON活着XML格式。

本文中有时候讲这些配置文件叫做resources。

Sublime Text会查看packages folder下的resources。

package是指包含相关资源的目录。

vi/vim Emlation

可以使用Vintageous让Sublime Text支持vi/vim.

编辑

多字段选择修改

Sublime Text支持多处文本的同时修改：

选中需要修改的文字，编辑器会自动提示文档内的相同文本。 按Cmd + d添加下一个文本段到标记列表，如果需要跳过当前文本段，按Cmd + k然后Cmd + d 快捷键Cmd + u可以将当前文本段从编辑列表去掉 ESC键可以退出编辑状态

整行选取

Cmd + l可以选取光标所在行，活着当前选区所在所有行Cmd + Shift + l可以将选区的分裂为多选区，可同时编辑

文本选择

Alt + Shift + 在对应放上增加下一个token入选区 Ctrl + Shift + m选中光标所在括号的所有内容 Cmd + Shift + j选中与光标所在行相同缩进的内容

字符交换

Ctrl + t交换相邻的两个字母

搜索替换

Sublime Text支持Perl Compatible Regular Expressions (PCRE) engine的正则表达式搜索，默认搜索为普通搜索，需要在搜索框左边点击对应按钮切换到正则表达式搜索，也可以使用快捷键进行切换。

Option + Cmd + r搜索的正则表达式和普通文本切换

单文件内的搜索和替换

Cmd ＋ f打开搜索框 ESC关闭搜索框 Option + Cmd + c切换区分大小写 Option + Cmd + w切换是否完整匹配：time 匹配timeOut或者 time单独单词 Option + Enter选中全部匹配结果并可同时编辑 Cmd + g或者Enter查找下一个 Cmd + Shift + g查找前一个 Cmd + e选中文本后按此快捷键可直接搜索

替换

Option + Cmd + f打开替换面板 Cmd + g或者Enter查找下一个 Option + Cmd + e替换并查找下一个 Option + Enter当焦点在替换面版时会选中全部匹配项并处于可编辑状态

多文件搜索

Cmd + Shift + f打开多文件搜索面版

设置多文件搜索范围

在多文件搜索面版的Where栏指定搜索范围，支持以下方式的搜索范围指定：

unix格式的路径 使用通配符排除特定文件symbolic location入： , 等

也可以使用逗号结合以上三种格式的范围。

文件导航和文件管理

goto anything文件导航

搜索项目任意文件并导航。可在搜索栏进行过滤，可预览当前选中文件。

Cmd + p打开文件面版 Enter打开当前项并关闭导航面版 ->打开当前项，不关闭导航面版 ESC关闭导航面版

更多操作：

Cmd + r搜索当前文件内的symbol，如函数，类，或者markdown的标题； Ctrl + g跳转到指定行；

左侧side bar导航

Cmd + k然后Cmd + b可切换导航关闭状态

项目

Sublime Text将当前打开文件，文件夹当作一个project，将文件夹拖拽到side bar可添加到当前项目。菜单中选择 (Project -> Save Project As…) 可将相关文件文件夹关联信息保存，下次通过菜单 (Project -> open project) 可快速打开所有相关文件。

使用snippet添加常用模板

将常用的代码段保存起来, 使用tab在设置好的文本上扩展出来,能提高效率,设置方法:

菜单: Tools –> New Snippet… 自动打开模板 编辑好之后保存在Packages/User目录下即可,文件后缀为.sublime-snippet

            hello  -->      source.python  -->  

content下CDATA包裹的是扩展后的最终文本； tabTrigger是snippet的标识, 在标识后面按tab会用content替换标识； 触发替换的作用域。

例子如下:

         author   

在author之后按tab键会扩展为@author: 德淸 deqing.qdq@alibaba-inc.com

Sublime Text3基本使用及常用插件介绍

Sublime Text3下载地址：http://www.sublimetext.com/3本文所有操作都是基于Sublime Text3.

这里是一个非常全面的教程。

快捷键列表

Ctrl + g 跳转到相应的行 Ctrl + m 在括号起始位置和终止位置之间切换 Ctrl + Shift + m 选中括号内内容 Ctrl + Shift + k 删除光标所在行 Ctrl + x 当光标选中区间时剪切选中区间，否则剪切光标所在行 Ctrl + Shift + up 向上选择行，并支持同时编辑多行 Ctrl + Shift + down 向下选择行，并支持同时编辑多行 Ctrl + l 选择光标所在行

FAQs

1.不支持gbk编码

安装插件 ConvertToUTF8 ,可能需要根据提示安装辅助插件。

2.HTML标签中间的大括号如何自动补全

菜单-> preferences -> Key Bindings - User在json配置文件中添加如下配置。

{ "keys": ["{"], "command": "insert_snippet", "args": {"contents": "{$0}"}} 

3.中文输入法不跟随输入位置

答：官方修复之前使用：IMESupport插件。

4.如何为特定文件类型制定语法高亮，如为.handlebar文件设置html高亮

答：菜单中选择：View > Syntax > Open all current extension as... > html这样就可以为自定义后缀名文件使用所需的语法高亮。

Package Control插件管理

Package Control是Sublime Text的包管理器，可以通过它安装2000多个package。安装后的package将自动更新。基本上大部分工具通过自动和手动都可以完成安装。

通过控制台安装Package Control

1.按快捷键Ctrl + `调出控制台；2.在控制台中运行如下代码；

 import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) 

3.以上代码将创建Package安装目录。并且下载Package Control.sublime-package文件到目录下；4.重启Sublime Text，完成安装。

手动安装Package Control

自动安装的原理其实就是在特定目录为Package Control创建文件夹和配置文件，手动创建所需目录，文件同样可以达到安装的目的：

菜单中选择：Preferences > Browse Packages...； 在打开的资源管理器中向上一个目录，然后进入到Installed Packages/目录； 下载Package Control.sublime-package并复制到Installed Packages/目录下； 重启Sublime Text，完成安装。

卸载已安装的插件

如果是通过package control安装的, 快捷键Cmd + Shift + p打开面板搜索Package Control: Remove Package然后选择需要卸载的插件。

SidebarEnhancements

为左侧sidebar增加功能。

Emmet

Emmet通过简洁的语法描述html内容，提高工作效率。

使用Package Control安装Emmet

快捷键Ctrl + Shift + p然后在控制窗口中输入Package Control: Install Package； 选择Emmet安装，重启Sublime Text完成安装。

快捷键

Tab

在HTML, XML, HAML, CSS, SASS/SCSS, LESS and strings in programming languages (like JavaScript, Python, Ruby etc.)中按Emmet语法写好语句后Tab键即可生成所需的代码。

由于某些语言中Sublime Text默认的Tab行为是作者更期望的，可以在Emmet.sublime-setting文件中设置disable_tab_abbreviations_for_scopes来取消Tab在这些文件类型中的触发。具体方法见官网tab-key-handler

Ctrl + e

默认在大部分自定义后缀名的文件中使用Tab是不能触发Emmet的，但是使用Ctrl + e可以在任意文档中生效，这在编写html模板时非常有用。

Emmet基本语法

emmet-zen-coding-tutorial是个很不错的教程，下面是一些简单的语法规则。

元素

通过元素名生成HTML标签，如div生成

查看更多关于如何优雅地使用SublimeText3_html/css_WEB-ITnose的详细内容...