sublime text 2 前端编码神器-快捷键与使用技巧介绍

前言

代码编辑器或者文本编辑器,对于程序员来说,就像剑与战士一样,谁都想拥有一把可以随心驾驭且锋利无比的宝剑,而每一位程序员,同样会去追求最适合自己的强大、灵活的编辑器,相信你和我一样,都不会例外。

如果说“神器”是我能给予一款软件最高的评价,那么我很乐意为它封上这么一个称号。sublime text 2(以下简称ST2)小巧绿色且速度非常快,跨平台支持Win/Mac/Linux,支持32与64位,支持各种流行编程语言的语法高亮、代码补全等,但ST2有着很多其他编辑器没有的超酷的特性,让它的好用达到了前所未有的程度……

ST2不是免费的,但可以永久免费使用,只是在保存的时候,偶尔会弹出要你购买注册的对话框,仅此而已。软件官网下载地址:http://www.sublimetext.com/2。去下载试试吧~

最近一直在使用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

2

3

4

5

1.按Ctrl+`调出console

2.在底部代码行贴上以下代码并回车:

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,显示以下弹窗:

1

2

3

4

5

6

Disable Package :禁用插件

enable Package :启用插件

Install Package :安装插件

List Package :查看已安装插件列表

Remove Package :移除插件

Upgrade Package :升级插件

  • 3.安装插件

Preferences→Package Control→Install Package,输入插件名称,会看到编辑器的底部在loading下载安装中,安装完后,一般重启即可。

插件及功能推荐

编码快捷键,前端必备-Emmet

Emmet作为zen coding的升级版,对于前端来说,可是必备插件,如果你对它还不太熟悉,可以在其官网(http://docs.emmet.io/)上看下具体的视频教程。或者是也可以再这里看http://docs.emmet.io/cheat-sheet/

举例:ul#nav>li.item$*4>a{Item $}  然后Tab键

显示结果是

1

2

3

4

5

6

<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>

有够快么?还有更多例子,请看http://docs.emmet.io/abbreviations/syntax/

快捷输出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…,在创建好的py文件输入下列内容:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

import sublime, sublime_plugin

import 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…打开),文件名随意,如open_browser.py。插件部分完工了。

二、接下来,为刚才的插件分配快捷键。点菜单Tools -> Command Palette…,或者f12,打开命令集,选择“key Bindings – User”打开个人快捷键配置,输入下列内容:

1

[{ "keys": ["f12"], "command": "open_browser" }]

这就是要做的全部工作,可以测试下了。打开一个html文件,f12试试,没意外的话文件会在默认浏览器打开了。url_map里配置的站点目录到URL的映射应该也是可用的。

PS:如果要指定用什么浏览器预览,也可以将最后一行代码改成这样:

1

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的语法高亮,所以这个插件可以帮上我们

后记

不过由于编辑器过于快捷,也就是过于偷懒吧,所以不建议初学者使用~  – –      还有更多功能,等你来发现

新增插件介绍文章:http://www.xuanfengge.com/practical-collection-of-sublime-plug-in.html

转载自:http://www.xuanfengge.com/sublime-text-2-artifact.html

时间: 2024-10-10 05:17:43

sublime text 2 前端编码神器-快捷键与使用技巧介绍的相关文章

转: sublime text 2 前端编码神器-快捷键与使用技巧介绍

代码编辑器或者文本编辑器,对于程序员来说,就像剑与战士一样,谁都想拥有一把可以随心驾驭且锋利无比的宝剑,而每一位程序员,同样会去追求最适合自己的强大.灵活的编辑器,相信你和我一样,都不会例外. 如果说"神器"是我能给予一款软件最高的评价,那么我很乐意为它封上这么一个称号.sublime text 2(以下简称ST2)小巧绿色且速度非常快,跨平台支持Win/Mac/Linux,支持32与64位,支持各种流行编程语言的语法高亮.代码补全等,但ST2有着很多其他编辑器没有的超酷的特性,让它的

Sublime Text 3前端开发常用优秀插件介绍

Package Control插件管理 提到Sublime Text插件安装,就不得不提Package Control [官方文档] 简而言之,它是用来管理插件的插件 所以,首次使用前也是需要安装的 使用Ctrl+`(Esc键下方)快捷键或者通过View->Show Console菜单打开命令行 将以下代码复制后粘贴到如上图中"<代码粘贴处>",然后按Enter(回车),稍等片刻 import urllib.request,os,hashlib; h = '2915d

sublime text 2 学习(一):快捷键

初用sublime text 2,还不错,不装任何插件,能很好的编辑javascript,css,html,很赞.整理一下快捷键:常用的比如Ctrl+S就不列了:而且只列举Windows的. Ctrl+W 关闭当前页签,很通用.Ctrl+Shift+W关闭所有页签,估计能猜到. Ctrl+Shift+v 粘贴并且格式化,比较实用. Ctrl+[ 减少缩进Ctrl+] 增加缩进 Ctrl+k,Ctrl+u 先按Ctrl+K,再按Ctrl+U,大写,这有点不习惯Ctrl+k,Ctrl+l 小写 ct

sublime text 3解放鼠标的快捷键总结

sublime text 3解放鼠标的快捷键总结 Sublime text 3是我最喜欢的代码编辑器,每天和代码打交道,必先利其器,掌握基本的代码编辑器的快捷键,能让你打码更有效率.刚开始可能有些生疏,只要花一两个星期坚持使用并熟悉这些常用的快捷键,今后就能解放鼠标了,省心省力又省时,何乐而不为呢. 以下是个人总结不完全的快捷键总汇,祝愿各位顺利解放自己的鼠标. 选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3 选中文本按下快捷键,即可一次性选择全部的相

Sublime Text 3实用功能和常用快捷键收集

1.可以直接打开图片 版本3有个很好的特性(对于前端来说):可以直接在ST3中打开图片. 2.Goto Anything功能 — 快速查找(ctrl + P) 输入@+函数名可以快速找到函数. 输入#+文本可以快速进行文件内文本匹配. 3.多行游标功能(ctrl + D,非常实用) 如何将文件中的某个单词更改为另一个? 方法一:利用查找替换功能:ctrl + H 方法二(推荐):多行游标功能,选中一个后,按ctrl+D可以同时选中另一个,同时多了另一个光标. 但多行游标能完成查找替换功能不能完成

Sublime Text 2 一些常用的快捷键

atrl+F查找后按F3或者ctrl+F3,是查找下一个,shift+F3是查找上一个alt+f3高亮所有的查找的ctrl+h 查找并替换 ctrl+left是向左一个单词跳跃,right同理 ctrl+top是光标不动,然后视图往上移动 shift+up,down,left,right 是移动并选择 ctrl+enter 是无论光标在上一行什么位置,都转到下一行开始,上一行代码不动 ctrl+n 新建文件ctrl+shift+n 打开新Sublimectrl+shift+t 重新打开最近关闭文

sublime text 3 前端开发常用插件

代码对齐: Alignment html代码补全:  Emmet CoffeeScript语法:  Better CoffeeScript css格式化:  CSS Format less语法:  LESS js代码格式化: JsFormat 代码注释文档:  DocBlockr 代码美化: HTML-CSS-JS Prettify 去除行尾空格:  TrailingSpaces 语法检测:  SublimeLinter, SublimeLinter-coffeelint, SublimeLin

设置 sublime text 2 启动Python的快捷键

在preference-->key-bulindings--users,将下面代码黏贴进去. {"keys":["f5"],"caption": "SublimeREPL: Python - RUN current file","command": "run_existing_window_command", "args":{"id": &q

打造属于自己的前端开发神器 -- 给Sublime Text加上Eclipse的光环

打造属于自己的前端开发神器 -- 给Sublime Text加上Eclipse的光环 2013-05-16 14:39:15 将Sublime Text打造成如Eclipse一般的前端开发IDE 1. 快捷键移植篇   从Java开始的梦, 到如痴如醉的Front End, 却始终摆脱不了Eclipse的束缚.   对于Javaer, Eclipse是非常不错的选择, 但对于单纯的前端而言, 是不是觉得略显笨重, 其中各种不想要的东西, 反正是诸多不爽, 曾用过Eclipse来做前端的人应该都有