Maison >interface Web >tutoriel HTML >如何优雅地使用 Sublime Text 3_html/css_WEB-ITnose
Sublime Text3下载地址:http://www.sublimetext.com/3。本文所有操作都是基于Sublime Text3,操作系统为mac,本文主要摘取自Sublime Text Unofficial Documentation。熟练掌握各种功能和技巧,能极大提高工作效率。
快捷键集合
Cmd + shift + d:: 复制并粘贴当前选中内容,如果没选中,复制粘贴光标所在行。
如果想要在命令行中启动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下,不同操作系统路径不同:
可以通过菜单:(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 + l可以选取光标所在行,活着当前选区所在所有行Cmd + Shift + l可以将选区的分裂为多选区,可同时编辑
文本选择
字符交换
搜索替换
Sublime Text支持Perl Compatible Regular Expressions (PCRE) engine的正则表达式搜索,默认搜索为普通搜索,需要在搜索框左边点击对应按钮切换到正则表达式搜索,也可以使用快捷键进行切换。
单文件内的搜索和替换
替换
多文件搜索
Cmd + Shift + f打开多文件搜索面版
设置多文件搜索范围
在多文件搜索面版的Where栏指定搜索范围,支持以下方式的搜索范围指定:
也可以使用逗号结合以上三种格式的范围。
goto anything文件导航
搜索项目任意文件并导航。可在搜索栏进行过滤,可预览当前选中文件。
更多操作:
左侧side bar导航
Sublime Text将当前打开文件,文件夹当作一个project,将文件夹拖拽到side bar可添加到当前项目。菜单中选择(Project -> Save Project As…)可将相关文件文件夹关联信息保存,下次通过菜单(Project -> open project)可快速打开所有相关文件。
将常用的代码段保存起来, 使用tab在设置好的文本上扩展出来,能提高效率,设置方法:
<snippet> <content><![CDATA[Hello, ${1:this} is a ${2:snippet}.]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --></snippet>
例子如下:
<snippet> <content><![CDATA[@author: 德淸 deqing.qdq@alibaba-inc.com]]></content> <tabTrigger>author</tabTrigger></snippet>
在author之后按tab键会扩展为@author: 德淸 deqing.qdq@alibaba-inc.com
Sublime Text3下载地址:http://www.sublimetext.com/3本文所有操作都是基于Sublime Text3.
这里是一个非常全面的教程。
快捷键列表
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是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创建文件夹和配置文件,手动创建所需目录,文件同样可以达到安装的目的:
卸载已安装的插件
如果是通过package control安装的, 快捷键Cmd + Shift + p打开面板搜索Package Control: Remove Package然后选择需要卸载的插件。
为左侧sidebar增加功能。
Emmet通过简洁的语法描述html内容,提高工作效率。
使用Package Control安装Emmet
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-zen-coding-tutorial是个很不错的教程,下面是一些简单的语法规则。
元素
通过元素名生成HTML标签,如div生成
,当需要生成自定义标签时,使用Ctrl + e即可,如foo生成子元素嵌套>
类似CSS子选择器div>ul>li生成。
<div> <ul> <li></li> </ul></div>
兄弟元素+
类似CSS兄弟选择器,+生成兄弟关系的元素div+p+div生成。
<div></div><p></p><div></div>
向上操作符^
Emmet操作符的作用对象是基于当前上下文的,>操作符会让上下文向下转移到深层元素,^操作符可以向上移动上下文,如div+div>p>span+em生成。
<div></div><div> <p><span></span><em></em></p></div>
通过^操作符修改上下文控制元素div+div>p>span+em^bq生成
<div></div><div> <p><span></span><em></em></p> <blockquote></blockquote></div>
多元素操作符*
使用后跟数字,生成对于数量的元素ul>li*5生成。
<ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul>
分组操作符()
使用括号分组完成复杂的逻辑div>(div>ul>li*2>a)*2+footer>p生成
<div> <div> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> <div> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> <footer> <p></p> </footer></div>
id和class生成
使用类似css中id和class的语法,可以为元素添加所需属性如div#header+div.cls1.cls2生成。
<div id="header"></div><div class="cls1 cls2"></div>
自定义属性
使用类似CSS中[attr]的语法添加自定义属性td[title="Hello" colspan=3]生成。
<td title="hello" colspan="3"></td>
元素编号$
使用*生成多个元素的时候,可以使用$进行编号ul>li.item$*5生成。
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li></ul>
{}添加文本
ul>(li{item $})*3生成。
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li></ul>
sublimetext-markdown-preview是Sublime Text的一个Markdown预览插件,有了它就可以轻松使用Sublime Text编辑Markdown文档了。
使用Package Control安装
手动安装
预览Markdown文件
sublime-autoprefixer根据Can I Use数据库信息为CSS样式添加适当的厂商前缀,也可以自定义需要添加前缀的浏览器版本。
sublime-autoprefixer只对CSS起作用,不处理Sass或者LESS之类的预处理格式。
使用Package Control安装sublime-autoprefixer
使用autoprefixer
高亮括号配对在查找时很方便。
使用Package Control安装BracketHighlighter
这个插件在1秒没有按键时会自动保存。个人感觉太频繁,可根据需求选择也可以启动sublime text的自动保存功能:
菜单: Sublime Text -> Preferences -> Settings - user
在配置文件中加上: "save_on_focus_lost": true这样当前文档失去焦点时会自动保存。
quoteHTML将HTML拼接为js字符串
作者:德淸文章源自:http://qiudeqing.com/tools/2015/05/31/sublime-text-3.html