Sublime Plugin Introduction

Sublime text is one of the most popular text editors at present. It is a modern text editor with beautiful interface, smooth operation, fast start-up, low resource consumption, and many useful plug-ins. It is a good choice for people who often write programs.

Install

Sublime Text 的最新的版本是 Sublime Text3 Build 3207 ,这是一个收费的版本，但是可以免费无限期试用，安装完之后在 view 里面可以设置 side bar 的显示以及 minimap 的显示，同时可以在 preferences 里面设置 color scheme、 theme 和 font。

Plug-ins

Sublime text有非常多的好用的插件，这些插件能极大的提高我们的工作效率，在安装插件之前需要先安装 Package control ，这是一款管理其他插件的插件。有了它，我们就能很方便的 install 和 remove 其他插件，极大的提高了我们配置 Sublime text 的速度。

Package control

这是一款便于我们管理插件的 Sublime text 插件，安装也比较方便，安装方法是依次点击： menu -> view -> show console 或者按快捷键 ctrl+~ 。之后底部会出现 console 框，然后输入以下代码

sublime text3

1
2
3
4
5
6
7
8

import urllib.request,os,hashlib; 
h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 
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 text2

1
2
3
4
5
6
7
8
9
10

import urllib2,os,hashlib; 
h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 
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')

当在 console 框中输入上面的代码之后，在 status bar 上会有安装进度提示，等完成之后当在 menu -> preference 中能看到 package control 时说明 package control 安装成功了，然后就能愉快的安装和管理其他插件了。

通过 package control 安装和删除插件的方法是依次点击： menu -> perference -> package control 或者快捷键 Ctrl+Shift+P (windows) / Command+Shift+p (mac) ,然后在弹出的输入框中输入 install package 并选中 install package 后点击enter，接着就可以在弹出的新的输入框中输入你想要安装的插件的名称，然后回撤就可以安装了。（当输入 remove package 之后就是删除插件，其他的过程和上面的一样）

Emmet

Emmet 这是一个 Sublime Text 必不可少的前端开发插件，堪称神器，它的前身就是大名鼎鼎的 zencoding，它使用仿 CSS 选择器的徐发来生成代码，大大的提高了 HTML/CSS 代码的编写速度。Emmet对于前端开发来说非常方便，下面简单的介绍以下它的使用方法。

HTML

1、初始化
Emmet 可以快速生成不同前端语言的模版，快捷键是 Tab

1
2
3

html:5 或者 !     用于生成 HTML5 文档类型
html:xt          用于生成 XHTML 过渡文档类型
html:4s          用户生成 HTML4 严格文档类型

1
2
3
4

div.boxclass          生成 class 为 boxclass 的 div 标签
div#boxid             生成 id 为 boxid 的 div 标签
div.boxclass#boxid    生成 class 为 boxclass 以及 id 为 boxid 的div标签
a{contents}           生成 a 标签，里面的内容为 contents

1
2
3

>  : 子元素符号，表示嵌套
+  : 同级标签符号
^  : 可以使该符号前面的标签提升一行

1

(div>h1)+(div>span)

1

ul>li*3      ul 标签下面会生成3个 li标签

1

ul>li.class$*3    会生成三个 li 标签，class 值分别为 class1、class2、class3

CSS

1、属性值
常见的属性值的书写方法列举如下

1
2
3

w44    生成 width:44px
h44    生成 height:44px
m44    生成 margin:44px

1
2
3

p 表示 %
e 表示 em
x 表示 ex

DocBlockr

这是一个自动生成注释的插件，有了它，你就可以很方便的添加注释，可以省下很多时间，同时 DocBlockr 还可以支持自定义，你可以自定义自己的注释的样式。

Color Highlight

Color Highlight 这是一款颜色高亮显示的插件，非常好用，但是它的缺点是不能提取颜色。

Color Highlighter

Color Highlight 这也是一款颜色高亮的插件，它跟 Color Highlight 相比最大的不同就是可以提取颜色。

A File Icon

A File Icon 提供了一组漂亮的文件的 logo，不同的文件有不同的显示 logo，看起来很炫酷。

Git

Git 就不用我介绍了，他是个版本控制的插件，这个插件也是项目开发必不可少的。

Alignment

Alignment 是一款代码自动对齐的插件，使用快捷方式是 ctrl+alt+a

AutoFileName

AutoFileName 是一款输入文件路径时自动补全的插件，它可以快速帮你在文档中写路径。

BracketHighlighter

BracketHighlighter 是一款括弧高亮的插件，当代码太多时，好多括弧，看起来有点乱，有了这款插件，它会将不同的括弧以不同的颜色显示，让你的代码清晰明了。

Nodejs

Nodejs 这个就不需要我过多介绍了，可以提供 node.js 的自动提示。

SideBarEnhancements

SideBarEnhancements 是一款 side bar 右键增强的插件，有了它你就可以直接在 side bar 中右键在项目中添加文件或者删除文件，同时还有很多其他的功能，你们自己慢慢体会吧。

SyncedSidebarBg

SyncedSidebarBg 这款插件可以让你的 Sublime Text 的 side bar 的背景颜色和文本编辑区域的颜色保持一致。

ConvertToUTF8

ConvertToUTF8 可以将文件转码成utf-8格式，通过本插件，你可以编辑并保存目前编码不被 Sublime Text 支持的文件，特别是中日韩用户使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP ，ANSI等。ConvertToUTF8 同时支持 Sublime Text 2 和 3。

EncodingHelper

EncodingHelper 可以自动猜测你的文件的编码，并且显示在 status bar 上，将各种编码转换成为 UTF-8。

Codecs33

Codecs33 这款插件可以解决 Sublimt Text 在打开 GB2312 编码的文件时中文乱码的问题。

jQuery

jQuery 这款插件可以提供 jQuery 的自动提示功能，使用 jQuery 开发来说必不可少。

Vue

Vue 这款插件提供了 Vue 文件的高亮显示，使用 Vue.js 开发项目的话这款插件是必不可少的。

EJS2

ejs2 这款插件提供了对 .ejs 文件的高亮显示，如果开发中用到 EJS 的话这款插件必不可少。

Markdownediting

Markdownediting 是一款让 Markdown语法高亮显示的插件，如果你使用 Sublime 写 Markdown 文档，这款插件是必备的。

Vue Syntax Highlight

Vue 框架代码高亮插件，使用vue做前端开发这个插件必不可少。

Stylus

Stylus 代码高亮显示插件。

MonokaiC 是一款 sublime text3 下的主题，笔者推荐这款，安装方法如下

Install

First, install MarkdownEditing.

Package Control

Ctrl/Command + Shift + P to open the Command Palette
Select Package Control: Install Package
Search for MonokaiC
Press Enter

Manual

git clone https://github.com/avivace/MonokaiC ~/.config/sublime-text-3/Packages/MonokaiC
Change the target directory with ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/MonokaiC on OS X and %appdata%\Sublime Text 3\Packages\MonokaiC on Windows.

Activation

To enable the theme, open your preferred MarkdownEditing User setting file from Preferences > Package Settings > Markdown Editing > Markdown GFM Settings - USER (works with MultiMarkdown and Markdown Standard too) and put this:

1 2 3

{ "color_scheme": "Packages/MonokaiC/themes/ME-MonokaiC.tmTheme", }

Be sure to Set Syntax -> MarkdownEditing -> Markdown GFM on your Markdown files

然后编辑 Preferences > Package Settings > Markdown Editing > Markdown GFM Settings - USER 输入一下内容

1 2 3 4 5 6

{ "color_scheme": "Packages/MonokaiC/themes/ME-MonokaiC.tmTheme", "draw_centered": false, "line_numbers": true, "wrap_width": 160, }

• ← Previous Post
• Next Post →

...

...

00:00

00:00