首页 » Web技术 » HTML/CSS » 正文

Sublime Text常用插件总结及Package Control安装方法

Sublime Text 是一个代码编辑器,具有漂亮的用户界面和强大的功能,并且它还是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。本文主要分享几款程序开发中可能用到的插件。

sublime-text

Sublime Text插件安装方法

在介绍插件之前,先写下Sublime Text安装插件的方法,主要有以下两种:

1. 直接通过下载安装包安装

在编辑器菜单中点击“Preferences”–“Browse Packages…”打开插件安装目录,然后把下载的安装包解压后放到该目录即可(可能需要重启编辑器后才生效)。

2. 通过 Package Control 进行在线安装

Package Control是一个用来进行在线安装插件的工具,在使用前需要先安装。

  • 安装Package Control的方法如下

点击菜单中的 “View”–“Show Console”(也可通过快捷键 Ctrl + ` 打开,不过可能因与系统其他软件快捷键冲突而打不开)调出 Console。然后把下面的代码粘贴进去后回车即可,需稍微等待一段时间。(以下代码可能会因更新而导致失效,请以官网代码为准。

/*Sublime Text 2 代码*/
import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

/*Sublime Text 3 代码*/
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)

重启Sublime Text即可。

  • 通过 Package Control 安装Sublime插件

Sublime Text

使用 Ctrl + Shift + P 调出面板,然后输入 pci ,选中“Package Control: Install Package”并回车,然后通过输入插件的名字找到插件并回车安装即可。

Sublime Text常用插件总结

1. Emmet

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度。

Sublime Text

 

  • 适用版本:Sublime Text 2 / Sublime Text 3
  • 调用方法:Ctrl+E 或者 !
  • 快捷键大全
  • 下载地址:Github

附:Emmet使用文档

2. HTML-CSS-JS Prettify

从名字中就可以看出,这是一款美化 HTML 、CSS、JS及Json代码的插件。需要注意的是,必须先安装 Node.js(最好使用默认安装路径,否则安装完插件后还需修改配置文件)

HTML-CSS-JS Prettify

  • 适用版本:Sublime Text 2 / Sublime Text 3
  • 调用方法:Ctrl+Shift+P 或者 Ctrl+Shift+H 或者 右键–“HTML/CSS/JS Prettify”–“Prettify Code”
  • 下载地址:Github

3. Sublime​Code​Intel

支持所有 Komode Editor 支持的代码语言,如:JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP等。

SublimeCodeIntel

提供以下功能:

  • 打开并跳转到函数/类等的符号定义位置
  • 实时显示模块/符号的自动补全功能
  • 在状态栏显示当前函数的相关信息

插件相关:

  • 适用版本:Sublime Text 2 / Sublime Text 3
  • 调用方法:跳转到定义位置(Alt+ClickControl+Windows+Alt+Up)、返回(Control+Windows+Alt+Left
  • 下载地址:Github

4. AutoFileName

一款在 Sublime Text 中可以自动补全文件路径及名称的插件。没有这个插件之前,如果我们要输入文件的路径,就需要凭自己的记忆来输,但是你能确保记得正确吗?能否记得图片是 jpg 还是 png 吗?想更快的输入文件名吗?那么,你肯定需要这款插件!

sublime-text-plugin-autofilename

  • 适用版本:Sublime Text 2 / Sublime Text 3
  • 调用方法:<img src="../" />
  • 下载地址:Github

 5. jQuery

一款自动补全 jQuery 函数的插件,带有语法高亮,并且包含几乎所有的 jQuery 方法。

jQuery

  • 适用版本:Sublime Text 2 / Sublime Text 3
  • 下载地址:Github

6. DocBlockr

DocBlockr 是一款 Sublime Text 2 & 3 都可以使用的代码快注释插件。支持的语言有:JavaScript (including ES6), PHP, ActionScript, Haxe,CoffeeScript, TypeScript, Java, Groovy, Objective C, C, C++ and Rust.

DocBlockr

  • 适用版本:Sublime Text 2 & 3
  • 调用方法:输入 /** 后按 Enter 或者 Tab
  • 下载地址:Github

7. BracketHighlighter

BracketHighlighter 是一款Sublime下匹配标签高亮的小插件,可以把匹配到的如 {}、()、”、””等对应的符号或者标签高亮显示。

BracketHighlighter

  • 适用版本:Sublime Text 2 & 3
  • 调用方法:选中标签即可显示
  • 下载地址:Github

8. Browser Refresh

通过一个快捷键可以实现保存文件,切换到浏览器并自动刷新浏览器来查看更改结果。

sublime-text-browser-refresh

9. IMESupport

解决中文输入框不跟随的问题

  • 适用版本:Sublime Text 2 & 3
  • 快捷键:无
  • 下载地址:GitHub

 

未完待续…


该篇属于专题:《Sublime Text 技巧

本文共 8 个回复

  • 灰常记忆 2015/01/13 16:02

    代码控适合这个 :razz:

  • 糯米汇 2015/01/13 20:43

    看起来有点复杂

  • Finle 2015/01/15 09:31

    不是程序员,用基本的破解版就很OK 了。

  • IELTS代攷 2015/01/16 12:43

    感谢分享。。。

  • 威客资讯 2015/01/17 16:58

    看着是挺详细的。

  • agrug 2015/06/15 09:43

    多谢总结。

发表评论