前端开发必备编辑器:Sublime Text2,前端最好用的编辑器

从我学接触网站,一直都是使用dreamweaver,不管别人怎么认为dreamweaver不好。我还是觉得他是我使用过最好的代码编辑器,第一:它有自动补全功能;第二:有代码提示;第三:创建html文档时能够帮你自动完成文档头部代码。第四:可以格式化对齐代码。有时候还需要可视化查看功能。尽管它的反应速度不快,功能庞大。但我觉得目前市面上真正能够比dreamweaver好的可能没有。

今年我又接触到另外一个好的编辑器:Sublime Text2.

Sublime Text2有这么几个优点:

1.速度飞快。2.界面简洁。3.功能强大。4.插件众多。5.快捷键多。6.可以不保存关闭下次再开编辑。7.界面好看,可定制。

当然它最重要的还是插件众多,使得它的功能庞大。

安装Sublime Text 2插件的方法:

1.直接安装

安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages)。

2.使用Package Control组件安装

也可以安装package control组件,然后直接在线安装:

  1. 按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音)
  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 2。
  4. 如果在Perferences->package settings中看到package control这一项,则安装成功。

如果这种方法不能安装成功,可以到这里下载文件手动安装

用Package Control安装插件的方法:

  1. 按下Ctrl+Shift+P调出命令面板
  2. 输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。

常用的插件有:

Zen Coding 改为Emmet

欢迎围观新的Emmet的代码,更加的强大了 前端代码编写必备插件,推荐安装

jQuery Package for sublime Text

如果你离不开jQuery的话,这个必备~~

Sublime Prefixr

Prefixr,CSS3 私有前缀自动补全插件,显然也很有用哇

3295EA17446A511394CAF129BA18F871F4BF8ED4ED60F_500_166

JS Format

一个JS代码格式化插件。

格式化js:选中一段文本,control+alt+f。

Placeholders

故名思意,占位用,包括一些占位文字和HTML代码片段,实用。

Sublime Alignment

对于喜欢整齐的玛民来说,这不失为一个省事的插件。

选中文本并按ctrl + alt + a 就可以进行对齐操作了。

JsMinifier

该插件基于Google Closure compiler,自动压缩js文件。

快捷键“ Ctrl+Alt+M”压缩Js代码、“ Ctrl+Alt+Shift+M”压缩Js并生成压缩文件 *.min.js

由于是被墙,使用时会出现超时,修改配置。

1.找开 Packages\JsMinifier\Minifier.sublime-settings
2.修改 compiler 的值为 ‘uglify_js’。

Sublime CodeIntel

代码自动提示

Bracket Highlighter

类似于代码匹配,可以匹配括号,引号等符号内的范围。

835024F0256DF068BA4FAFDF193047FBA419295D0EBB8_367_242

GBK to UTF8

将文件编码从GBK转黄成UTF8,快捷键Ctrl+Shift+C

主要快捷键

Ctrl+L 选择整行(按住-继续选择下行)

Ctrl+KK 从光标处删除至行尾

Ctrl+Shift+K 删除整行

Ctrl+Shift+D 复制光标所在整行,插入在该行之前

Ctrl+J 合并行(已选择需要合并的多行时)

Ctrl+KU 改为大写

Ctrl+KL 改为小写

Ctrl+D 选词 (按住-继续选择下个相同的字符串)

Ctrl+M 光标移动至括号内开始或结束的位置

Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)

Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)

Ctrl+Shift+/ 注释已选择内容

Ctrl+Z 撤销

Ctrl+Y 恢复撤销

Ctrl+M 光标跳至对应的括号

Alt+. 闭合当前标签

Ctrl+Shift+A 选择光标位置父标签对儿

Ctrl+Shift+[ 折叠代码

Ctrl+Shift+] 展开代码

Ctrl+KT 折叠属性

Ctrl+K0 展开所有

Ctrl+U 软撤销

Ctrl+T 词互换

Tab 缩进 自动完成

Shift+Tab 去除缩进

Ctrl+Shift+↑ 与上行互换

Ctrl+Shift+↓ 与下行互换

Ctrl+K Backspace 从光标处删除至行首

Ctrl+Enter 光标后插入行

Ctrl+Shift+Enter 光标前插入行

Ctrl+F2 设置书签

F2 下一个书签

Shift+F2 上一个书签

【下载地址】

官网地址:http://www.sublimetext.com/


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流