自用Sublime Text 插件主题配置大全

下载地址:Sublime Text

原则上收费的,但可以试用,试用期是免费的,在试用期间会提示你购买.

package control

首先必须要介绍的就是这个,它是用来进行插件管理的,插件的安装、查看、删除都可以用package control,非常的方便,安装package control也很方便,调出 sublime text 的控制台,在View -> Show Console,快捷键是ctrl + `,

然后在控制台复制进以下代码:

Sublime Text 3:

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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 2:

import urllib2,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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 能用了,能看到Sublime Text -> Preference -> Package Control就表示安装成功了,一般情况下是不用重启 sublime 的,但是如果没有看到,就重启一下 sublime 就可以了。

通过快捷键ctrl+ shift + p调用命令行,因为支持模糊查询,所以输入pc:ip,pc:list,pc:rm分别进行插件安装,插件浏览,插件删除

插件

Alignment

自动安装(所有插件同理)

这个插件是用来规格化代码的,常用的是将等号对齐,打开命令板ctrl+ shift + p,输入pc:ip,然后输入插件的名字,回车即可安装

手动安装(所有插件同理)

如果某些时候因为网络原因而导致插件安装失败,可以手动安装

找到插件的 Github 仓库,下载zip

将下载的zip文件解压后放进刚打开的Browse Package里,重启 sublime 即可安装成功

Material Theme


自用主题,并且目前这个插件更新了很多版,bug 已经非常少了,推荐给大家使用。这个主题要配合A File Icon图标插件配合使用,因为它的文件图标是那个插件提供的,依然是在Package Control下载图标插件即可。

主题具体的配置可以自己在标题链接的 Github 仓库里去看,如果懒的去看的,可以直接复制我的配置,打开Sublime Text -> Preference -> Settings,在User界面复制进如下代码:

{

"always_show_minimap_viewport": true,

"bold_folder_labels": true,

"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",

"fade_fold_buttons": false,

"font_options":

[

"gray_antialias"    ],

"font_size": 15,

"ignored_packages":

[

"Vintage"    ],

"indent_guide_options":

[

"draw_normal",

"draw_active"    ],

"line_padding_bottom": 3,

"line_padding_top": 3,

"material_theme_accent_scrollbars": true,

"material_theme_arrow_folders": false,

"material_theme_big_fileicons": true,

"material_theme_bold_tab": true,

"material_theme_bright_scrollbars": true,

"material_theme_bullet_tree_indicator": true,

"material_theme_compact_panel": true,

"material_theme_compact_sidebar": true,

"material_theme_contrast_mode": true,

"material_theme_disable_folder_animation": false,

"material_theme_disable_tree_indicator": true,

"material_theme_panel_separator": true,

"material_theme_small_statusbar": true,

"material_theme_small_tab": true,

"material_theme_tabs_autowidth": false,

"material_theme_tabs_separator": false,

"material_theme_tree_headings": true,

"overlay_scroll_bars": "enabled",

"show_encoding": true,

"show_line_endings": true,

"theme": "Material-Theme.sublime-theme" }


再推荐个主题

Brogrammer


配置方法:

{

"theme": "Brogrammer.sublime-theme",

"color_scheme": "Packages/Theme - Brogrammer/brogrammer.tmTheme"

}

AutoFileName

这个插件是在双引号内默认自动导入当前同文件夹下的其他文件名,如果想导入其他文件夹下的文件名,支持绝对路径和相对路径。这个插件在写 Js 代码,需要导入图片时,或者是需要在一些配置文件里填写文件的路径时,全程可以自动补全,非常好用。安装即可用。

ConvertToUTF8

这个插件可以有效地解决中文乱码问题,因为 sublime 的默认编码方式 UTF-8,所以有些 GBK 编码或者其他的编码会出现乱码问题,这个插件可以进行编码转换

Compare side-by-side

这是个进行文件比对的软件,但只是简简单单的进行文件比对,如果只需要文件比对功能的童鞋们可以用这个插件,如果想要进行更多功能的文件比对功能,例如与剪贴板里的文件进行比对,可以使用SublimeFileDiffs,这个插件的提示方式和git diff的格式一样,所以喜欢使用git的童鞋可以尝试,但是我个人使用的是 Compare side-by-side ,因为我觉得够用了。

DocBlockr

这个是代码自动注释插件,也是我非常喜欢的插件之一,因为个人写函数时有进行该函数文档说明的习惯,而这个插件可以自动将函数类型、参数个数及类型、函数返回值等直接生成好,正如安装成功后插件文档中写的All you need is to complete descriptions。使用方法很简单,只要在函数上方输入文档注释/**,然后回车即可生成。

Emmet

这是一个经过广大技术开发者检验的软件,确实堪称为前端开发神器,效率倍增。只需要输入很简短的缩写,它就能扩展开来,默认扩展快捷键是Tab或者ctrl + E。例如一开始输入!符号,然后 Tab,就能扩展成一个 HTML 编码所需要的全部头部和尾部。

附一个 emmet 的使用文档

很多人在安装成功后发现Tab并没有实现扩展,那是因为需要你把 sublime 的语法格式手动调整为html格式,在 sublime 的右下角有调整。

GitGutter

这个插件看名字就能知道是干什么用的,也是我自己非常喜欢的一款插件。它能在 gutter 中显示你这次编辑的文件相比目前 git 暂存区中的文件的异同,相当于实时的git diff,并且显示的也很友好,如图

将鼠标放在修改的提示符不动,会自动显示修改前是什么样的,很方便。

SublimeCodeIntel

一个全功能的 Sublime Text 代码智能自动补全引擎,支持很多语言的补全。这个插件比较大,所以通过Package Control进行安装的时候会比较慢,我 50M 的水管都安了十几分钟,而且尝试了很多次,如果自动安装失败可以尝试手动安装。

并且这个插件是需要自己手动配置的,我目前用 php 比较多,就说一下我是会怎么配置的

如果不知道你的 php 的路径,在终端中执行whereis php,复制显示结果

打开Sublime Text -> Preference -> Package Settings -> SublimeCodeIntel-> Settings-Default

然后在设置的最后codeintel_language_settings里的 php 的路径修改为你刚复制的现实的结果

如图

wordcount

这个软件就不多介绍了,名字告诉了一切,插件很小,自动安装很快,安装即可用,右下角显示,无需配置,插件按照空格统计英语单词,无法统计汉字字数。

JsFormat

即可在 JS 文件中通过鼠标右键 ->JsFormat 或键盘快捷键 Ctrl+Alt+F 对 JS 进行格式化

使用效果如下图

SideBarEnhancements

SideBarEnhancements 是一款很实用的右键菜单增强插件,安装此插件后配置方法为,重启 Sublime text 3 后,打开任意一个 JS 文件,按 ctrl+shift+space,这时候第一次运行会去下载对应的类库,可以按 ctrl+`(也就是调出控制台)来看进度

TrailingSpaces

有时候,在代码结尾打多了几个空格或 Tab,并没有任何显示效果,TrailingSpaces 这款插件能高亮显示多余的空格和 Tab

Tag

这是 HTML/XML 标签缩进、补全、排版和校验工具

安装该插件后,可以如上图方式使用 Tag 插件对 HTML/XML 进行自动排版等操作

Terminal

在编程过程中,我们经常需要使用到命令行窗口,Terminal 插件可以允许在 Sublime Text 3 中打开 cmd 命令窗口,安装好该插件后,即可使用快捷键 Ctrl+Shift+T 呼出命令行窗口

SublimeCodeIntel

这是一款代码提示插件,支持多种编程语言,该插件安装时间可能相对较长,更特别的是,安装该插件后需要根据您使用的编程语言进行配置,本部分将以配置 JavaScript 语言的代码提示功能为例,安装该插件后,点击Preferences->Browse Packages... 菜单

进入 SublimeCodeIntel 文件夹

再进入.codeintel 文件夹

将其中文件名为 config 的文件拖动到 Sublime Text 3 中,你会看到大概如下图的代码

将以下代码复制后粘贴到 Config 文件中

//注意上下文需要添加的逗号

"JavaScript":{

"javascriptExtraPaths":[]

}

复制粘贴后的效果如下图

保存后关闭 config 文件,在编写 JavaScript 时即可获得代码提示,如下图示

CssComb

CssComb 是为 CSS 属性进行排序和格式化插件 [官网],使用 Package Control 安装 CssComb 插件后,你可能发现它并不能运行,它依赖于 Node.js [官网],若您的计算机已安装过 NodeJS 环境,可跳过此步骤,若您的计算机中尚未安装过 Node.js 环境,应该到 Node.js 官网中 [下载] 并安装相应版本的 Node.js

安装 NodeJS 后,即可使用 CssComb 插件

使用方法:菜单 Tools->Run CSScomb 或在 CSS 文件中按快捷键 Ctrl+Shift+C

使用前,CSS 可能杂乱无章

使用后,CSS 属性按照作用类别出现

还可以选中一部分 CSS 代码进行排序

使用前,选中需要排序的 CSS 代码

使用后,选中部分代码已排好序

美中不足的是,CssComb 似乎不支持 IE hark

Autoprefixer

这是一款 CSS3 私有前缀自动补全插件,该插件使用 CanIUse 资料库,能精准判断哪些属性需要什么前缀,与 CssComb 插件一样,该插件也需要系统已安装 Node.js 环境

使用方法:在输入 CSS3 属性后(冒号前)按  Tab 键,如下图示

LiveReload

自动刷新浏览器,真神器啊!!无需保存后按F5,Ctrl+S保存后,自动刷新浏览器!

开始之前我们需要准备下面这两个插件

1、在 Sublime 安装LiveReload插件。

2、在 Chrome 浏览器安装LiveReload插件.(火狐的自己去插件中心搜索.)

安装好以后可以在地址栏旁边看到如下按钮。

接着右键单击选择管理扩展程序,把允许访问网址文件这一选项勾选上。

在 Sublime 中配置 LiveReload

在 Sublime 中配置 LiveReload

方法 1:过用户自定义配置来开启。

Preferences > Package Settings > LiveReload > Settings User

{"enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"]}

方法 2:通过控制台命令来开启。

1. Ctrl+Shift+P

2. LiveReload: Enable/disableplugins

HTMLBeautify

一个 HTML/Css/JavaScript 代码格式化 / 美化插件,基于 NodeJS(nodejs.org) / JSBeautifier (jsbeautifier.org) 开发。

安装

方式 1

下载并安装 NodeJS(nodejs.org), windows 下需要重启

打开 Sublime Text 2 的 Packages 目录, "Preferences" -> "Browse Packages"

在 Packages 目录本代码仓库,Git Clone https://github.com/rehorn/sublime-htmlbeautify

打开一个经过压缩的 .html/.htm/.js/.css 文件,用快捷键 ctrl+alt+q 执行格式化

方式 2

下载并安装 NodeJS(nodejs.org), windows 下需要重启

安装 Packages Control 后,将本代码仓库添加到源

ctrl+alt+p 之后,输入 add repository,输入 https://github.com/rehorn/sublime-htmlbeautify

执行 Packages Control 后,就能搜索到 sublime-uglifyjs ,安装即可

打开一个经过压缩的 .html/.htm/.js/.css 文件,用快捷键 ctrl+alt+q 执行格式化

使用

打开一个经过压缩的 .html/.htm/.js/.css 文件,用快捷键 ctrl+alt+q 执行格式化

自定义

打开 Sublime Text 2 的 Packages 目录, "Preferences" -> "Browse Packages"

进入 sublime-htmlbeautify

修改 Default (Windows).sublime-keymap 文件,可以 Windows 自定义快捷键,其他平台可按照格式新建一个

其他

本插件系 https://github.com/victorporof/Sublime-HTMLPrettify 的一个分支版本,修复了 windows 下无法正常运行和编码等问题。

AllAutocomplete

Sublime Text 默认的 Autocomplete 功能只考虑当前的文件,而 AllAutocomplete 插件会搜索所有打开的文件来寻找匹配的提示词。

SublimeREPL

这可能是对程序员最有用的插件。SublimeREPL 允许你在 Sublime Texxt 中运行各种语言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)。

ColorPicker

通常,如果你想使用一个颜色选择器则可能打开 Photoshop 或 GIMP。而在 Sublime Text 中,你可以使用内置的颜色选择器。安装完成后,只要按下 Ctrl / Cmd + Shift + C 快捷键。


最后推荐两个Web开发工具

Hbuilder

强大的HTML5 IDE 支持Win和OS X

Atom

Github出品,开源跨平台OS X,Win或Linux上使用它,Sublime上的插件主题几乎都有.

推荐阅读更多精彩内容