只需一步，快速开始
后使用快捷导航没有帐号？
3天0基础建站课程热门推荐
查看: 632|回复: 0
Sublime text2如何设置快捷键让编写的HTML文件在不同的浏览器预览？
主题帖子积分
Ta的其他好帖:
· · · · · · · ·
天涯海角搜一下：
亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net
才可以下载或查看，没有帐号？
Preferences—Key Bindings—User.
01(png).jpg (45.07 KB, 下载次数: 1)
Sublime text2如何设置快捷键让编写的HTML文件在不同的浏览器预览？
09:38 上传
然后就跳出一个空白页面。
第二部，将以下代码键入。
[
//ie
& & {
& && &&&&keys&: [&f2&],
& && &&&&command&: &side_bar_files_open_with&,
& && &&&&args&: {
& && && && &&paths&: [],
& && && && &&application&: &C:\\Program Files (x86)\\Internet Explorer\\iexplore.exe&,
& && && && &&extensions&: &.*&
& && &&&}
& & },
//chorme
& &&&{
& && &&&&keys&: [&f1&],
& && &&&&command&: &side_bar_files_open_with&,
& && &&&&args&: {
& && && && &&paths&: [],
& && && && &&application&: &C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe&,
& && && && &&extensions&: &.*&
& && &&&}
& & }
]复制代码其中“keys”是指定快捷键，替换成自己想要的。
application是你浏览器在电脑上的目录地址，替换了就OK了。注意是双斜杠\\。
第三步，保存。
02(png).jpg (44.21 KB, 下载次数: 1)
Sublime text2如何设置快捷键让编写的HTML文件在不同的浏览器预览？02
09:39 上传
然后就搞定了。
Enjoy Coding !
道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题!
如果您是道勤主机用户，那么您可以通过QQ【】、售后QQ【】、旺旺【诠释意念】、免费电话、后台提交工单这些方式联系道勤主机客服！
如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！
本内容系 道勤团队 www.daoqin.net 客服与技术人员研究整理的智慧结晶，转载勿用于商业用途，并保留本文链接，侵权必究！
上一篇名称：下一篇名称：
帖子永久地址：&<button type="submit" class="pn" onclick="setCopy('Sublime text2如何设置快捷键让编写的HTML文件在不同的浏览器预览？\nhttp://www.daoqin.net/thread-.html', '帖子地址已经复制到剪贴板您可以用快捷键 Ctrl + V 粘贴到 QQ、MSN 里。')">推荐给好友【道勤网】- www.daoqin.net
打造设计艺术学习的顶尖团队！ - 论坛版权1、本主题所有言论和图片纯属会员个人意见，与本论坛立场无关
2、本站所有主题由该帖子作者发表，该帖子作者与享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
7、管理员和版主有权不事先通知发贴者而删除本文
道勤网-最新内容
&精彩内容推荐
建站技术交流导读////
道勤网- 推荐内容！ /6
欢迎您加入道勤交流QQ群 ，有什么不懂的可以在群里面相互的交流学习。
即将上线SDK 开发教程，欢迎关注！
道勤网推出Discuz x3.2 高清教程免费分享，欢迎下载收看，需要注册登录本站哦！
道勤网推出SEO系列建站视频教程！欢迎各位朋友们的访问，想在第一时间内学习的可以加入我们的道勤网VIP，所有资源免费下载哦
道勤网推出云主机-独立服务器-vps 高清教程免费分享，欢迎下载收看，需要注册登录本站哦！
道勤网推出悬赏任务系统-欢迎提问！大家相互解决问题！
道勤建站群：
道勤美工群：
工作时间：8:00-18:00
客服热线：
官方微信扫一扫
联系我们了解更多吧！
网站客服：
主机技术：
主机售后：
地址：
山西省太原市经济开发区0579号C座
海南省三亚市亚龙湾经济开发区45号（分部）
Powered by ! X3.2 &sublime text 2 前端编码神器-快捷键与使用技巧介绍 - 轩枫阁 – 前端开发 | web前端技术博客
/ sublime text 2 前端编码神器-快捷键与使用技巧介绍
阅读：17708
作者：ivan
代码编辑器或者文本编辑器，对于程序员来说，就像剑与战士一样，谁都想拥有一把可以随心驾驭且锋利无比的宝剑，而每一位程序员，同样会去追求最适合自己的强大、灵活的编辑器，相信你和我一样，都不会例外。
如果说“神器”是我能给予一款软件最高的评价，那么我很乐意为它封上这么一个称号。sublime text 2（以下简称ST2）小巧绿色且速度非常快，跨平台支持Win/Mac/Linux，支持32与64位，支持各种流行编程语言的语法高亮、代码补全等，但ST2有着很多其他编辑器没有的超酷的特性，让它的好用达到了前所未有的程度……
ST2不是免费的，但可以永久免费使用，只是在保存的时候，偶尔会弹出要你购买注册的对话框，仅此而已。软件官网下载地址：。去下载试试吧~
最近一直在使用ST2，因为DW太臃肿，而ST2编写代码速度很快很轻便~
SublimeText2 支持但不限于 C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and XML 等主流编程语言的语法高亮。ST2 拥有优秀的代码自动完成功能 (自动补齐括号，大括号等配对符号；自动补全已经出现的单词；自动补全函数名)，非常智能；另外 ST2 也拥有代码片段（Snippet）的功能，可以将常用的代码片段保存起来，在需要时随时调用。
强大的多行选择和多行编辑
代码地图、多种界面布局与全屏免打扰模式
强大的快捷键，提高你的编码效率。
常用快捷键
CTRL+N：新建文件
CTRL+w：关闭文件
CTRL+O：打开文件
CTRL+Z：撤销
CTRL+Y：撤销还原
CTRL+F：查找
CTRL+H：替换
Esc：小工具窗口隐藏
编码快捷键
Ctrl+Shift+P 打开命令面板，如设置编码语言
Tab：缩进、自动完成
Shift+Tab 去除缩进
Ctrl+J 合并行（已选择需要合并的多行时）
Ctrl+T 词互换
Ctrl+U 软撤销
Ctrl+K Backspace 从光标处删除至行首
Ctrl+KK 从光标处删除至行尾
Ctrl+K+T 折叠属性
Ctrl+K+U 改为大写
Ctrl+K+L 改为小写
Ctrl+K+0 展开所有
Ctrl+Enter 插入行后（快速换行）
Ctrl+Shift+/ 注释已选择内容
Ctrl+Shift+↑可以移动此行代码，与上行互换
Ctrl+Shift+↓可以移动此行代码，与下行互换
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+D 复制光标所在整行，插入在该行之前
Ctrl+Shift+K 删除整行
Ctrl+Shift+L 鼠标选中多行（按下快捷键），即可同时编辑这些行
Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）
Ctrl+Shift+Enter 光标前插入行
Ctrl+PageDown 、Ctrl+PageUp 文件按开启的前后顺序切换
Ctrl+鼠标左键 可以同时选择要编辑的多处文本
Shift+鼠标右键（或使用鼠标中键）可以用鼠标进行竖向多行选择
查找快捷键
CTRL+P：查找当前项目中的文件和快速搜索，快速查找标签位置
Ctrl+P输入 @ 查找文件主标题/函数；或输入：跳转到文件某行
CTRL+G：跳转到指定行
CTRL+F：查找
Ctrl+D 选词 （反复按快捷键，即可继续向下同时选中下一个相同的文本进行同时编辑）
Ctrl+L 选择整行（按住-继续选择下行）
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+R 快速列出/跳转到某个函数
ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找
其他快捷键
Ctrl+K+B 开启/关闭侧边栏
Ctrl+Tab 当前窗口中的标签页切换
Ctrl+F2 设置书签
Shift+F2 上一个书签
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屏
Alt+. 闭合当前标签
Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑
Tab 缩进 自动完成
F2 下一个书签
F6 检测语法错误
F9 行排序(按a-z)
F11 全屏模式
安装插件准备步骤
1.先装一个管理插件的插件，必备：package control
1.按Ctrl+`调出console2.在底部代码行贴上以下代码并回车：import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())&3.重启sublime text，如果在Perferences-&package settings中看到package control这一项，则安装成功。
2.点击Preferences→Package Control，显示以下弹窗：
Disable Package ：禁用插件enable Package ：启用插件Install Package ：安装插件List Package ：查看已安装插件列表Remove Package ：移除插件Upgrade Package ：升级插件
3.安装插件
Preferences→Package Control→Install Package，输入插件名称，会看到编辑器的底部在loading下载安装中，安装完后，一般重启即可。
插件及功能推荐
编码快捷键，前端必备-Emmet
Emmet作为zen coding的升级版，对于前端来说，可是必备插件，如果你对它还不太熟悉，可以在其官网（）上看下具体的视频教程。或者是也可以再这里看
举例：ul#nav&li.item$*4&a{Item $}
显示结果是
<div class="crayon-num" data-line="crayon-588f0b<div class="crayon-num crayon-striped-num" data-line="crayon-588f0b<div class="crayon-num" data-line="crayon-588f0b<div class="crayon-num crayon-striped-num" data-line="crayon-588f0b<div class="crayon-num" data-line="crayon-588f0b<div class="crayon-num crayon-striped-num" data-line="crayon-588f0b
&ul id="nav"&&&&&&li class="item1"&&a href=""&Item 1&/a&&/li&&&&&&li class="item2"&&a href=""&Item 2&/a&&/li&&&&&&li class="item3"&&a href=""&Item 3&/a&&/li&&&&&&li class="item4"&&a href=""&Item 4&/a&&/li&&/ul&
有够快么？还有更多例子，请看
快捷输出dtd头文件，即HTML头部信息
在没装emmet插件的情况下，如果输入html，显示的仅是简单的html结构，不包含dtd头文件，这让人很郁闷。不过以下的解决方法挺不错，支持多种头文件，html5的写法也支持哦~
在装了emmet插件之后，可以使用html:4t、html:4s、html:xt、html:xs、html:xxs、html:5等6中dtd设置中的一种，然后TAB键，即可快速生成头文件。关于头文件，以前经常使用的是html:xt这个格式的，也就是dreamweaver自动生成的头文件。不过现在标准的是html:5的头文件，基本的浏览器都支持了，没什么问题。
让Sublime Text2支持快捷键在浏览器中预览
用过dreamweaver的同学都知道，F12能快捷在浏览器中浏览正在编辑的文件。而这个功能在sublime需要，点击右键，然后open in browser。这显然还不够便捷。下面来看怎么解决吧~
Sublime Text2支持用Python编写插件，详细步骤是：
一、点击菜单Tools -& New Plugin&#8230;，在创建好的py文件输入下列内容：
123456789101112131415161718
import sublime, sublime_pluginimport webbrowser&url_map = {&&&&'/Users/jerry/Sites/test/' : 'http://test/',}&class OpenBrowserCommand(sublime_plugin.TextCommand):&&&&def run(self,edit):&&&&&&&&window = sublime.active_window()&&&&&&&&window.run_command('save')&&&&&&&&url = self.view.file_name()&&&&&&&&for path, domain in url_map.items():&&&&&&&&&&&&if url.startswith(path):&&&&&&&&&&&&&&&&url = url.replace(path, domain).replace('\\', '\/')&&&&&&&&&&&&&&&&break&&&&&&&&&webbrowser.open_new(url)
将文件保存到Packages/User目录（Packages可通过菜单里的Browser Packages&#8230;打开），文件名随意，如open_browser.py。插件部分完工了。
二、接下来，为刚才的插件分配快捷键。点菜单Tools -& Command Palette&#8230;，或者f12，打开命令集，选择“key Bindings &#8211; User”打开个人快捷键配置，输入下列内容：
<div class="crayon-num" data-line="crayon-588f0b
[{ "keys": ["f12"], "command": "open_browser" }]
这就是要做的全部工作，可以测试下了。打开一个html文件，f12试试，没意外的话文件会在默认浏览器打开了。url_map里配置的站点目录到URL的映射应该也是可用的。
PS：如果要指定用什么浏览器预览，也可以将最后一行代码改成这样：
webbrowser.get('safari').open_new(url)
webbrowser具体支持get哪些浏览器，可以通过webbrowser._browsers查看。只是，ST2默认使用的是python2.6，在我的mac os下，python2.6找不到任何可用的浏览器。2.7的webbrowser.py里多了一段patch，可以找到firefox和safari。好在，对我来说，能在默认浏览器预览已经够用了。
JS Format-Javascript的代码格式化插件
很多网站的JS代码都进行了压缩，一行式的甚至混淆压缩，这让我们看起来很吃力。而这个插件能帮我们把原始代码进行格式的整理，包括换行和缩进等等，是代码一目了然，更快读懂~
LESS-LESS高亮插件
用LESS的同学都知道，sublime没有支持less的语法高亮，所以这个插件可以帮上我们
不过由于编辑器过于快捷，也就是过于偷懒吧，所以不建议初学者使用~
&#8211; &#8211;
还有更多功能，等你来发现
新增插件介绍文章：
纸飞机许愿
前端路上，一路有你。编辑你的正能量，快乐工作，努力生活~
请选择弹奏的曲谱
点击开始录制，可以录制弹奏的曲子
分享钢琴节奏：