程序编辑器层出不穷,但是有一款常青树——sublime text ,其底下的插件琳琅满目,这款软件也是我换了电脑后立马就安装的几款软件之一,我现在给大家介绍下我是怎么使用这款软件的
先上图:
所有的插件介绍时,都在标题链接了相应的Github仓库,我讲的不清楚时,可以进仓库查看官方解释。
package control
首先必须要介绍的就是这个,它是用来进行插件管理的,插件的安装、查看、删除都可以用package control
,非常的方便,安装package control
也很方便,调出 sublime text 的控制台,在View -> Show Console
,快捷键是control + `
,
然后在控制台复制进以下代码:
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
然后等待就行,等到 sublime 能用了,能看到Sublime Text -> Preference -> Package Control
就表示安装成功了,一般情况下是不用重启 sublime 的,但是如果没有看到,就重启一下 sublime 就可以了。
通过快捷键super + shift + p
调用命令行,因为支持模糊查询,所以输入 pc:ip
,pc:list
,pc:rm
分别进行插件安装,插件浏览,插件删除
解决 There are no packages available for installation 问题
- 首先是网络上说的,在终端执行
ping sublime.wbond.net
,然后将ping
出的ip地址添加到hosts
文件中,macOS的hosts
文件在/etc/hosts
- 此处借鉴这篇文章的处理方法,将
channel_v3.json
文件下载,放置到自己的电脑中,然后打开Sublime Text -> Preference -> Package Settings -> Package Control -> Settings-User
,将
"channels":
[
" /Users/pengtuo/code/channel_v3.json " // (此处填你的 channel_v3.json 文件路径)
],
复制进去,即可覆盖原先的默认路径,直接查找你的文件
channel_v3.json 文件下载_ 提取密码: bu2y
Alignment
自动安装(所有插件同理)
这个插件是用来规格化代码的,常用的是将等号对齐,打开命令板super + shift + p
,输入pc:ip
,然后输入插件的名字,回车即可安装
手动安装(所有插件同理)
如果某些时候因为网络原因而导致插件安装失败,可以手动安装
找到插件的Github仓库,下载zip
然后打开
将下载的
zip
文件解压后放进刚打开的Browse Package
里,重启 sublime 即可安装成功
并不是所有的插件都能这样安装,有的会有 bug
安装成功后,将你想要对齐等号的部分圈住,然后快捷键super + control + A
即可,这地方可能和QQ的截屏快捷键冲突,有需要的自己改一下
Material Theme
这个是主题插件,就是我现在正在用的主题,我挑了一圈,发现还是这个最好看,就如一开始展示的图片,并且目前这个插件更新了很多版,bug已经非常少了,推荐给大家使用。这个主题要配合zz File Icon
图标插件配合使用,因为它的文件图标是那个插件提供的,依然是在Package Control
下载图标插件即可。
(2017.3.20更新)经评论提醒,发现主题GitHub的图标插件名改了叫:A File Icon,搜不到不能自动安装,可手动安装。不过主题应该自带图标。
主题具体的配置可以自己在标题链接的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"
}
然后你就会发现你的sublime界面已经不一样了
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
这个软件就不多介绍了,名字告诉了一切,插件很小,自动安装很快,安装即可用,右下角显示,无需配置,插件按照空格统计英语单词,无法统计汉字字数。
修改 sublime 在 dock 中程序图标
折腾了这么久,怎么能不修改一下程序图标呢,毕竟我感觉原先那个有些难看。
这里有一个仓库,里面有一些图标和参考教程
- 下载你想替换的图标,需要
icns
格式,推荐一个主题网站,里面有很多的sublime主题设计,包括程序图标,部分提供直接下载。 - 终端执行:
open /Applications/Sublime\ Text.app/Contents/Resources/
- 找到里面的程序图标(一眼就能找到),然后将你下载的图标名字修改成一毛一样的,复制进去替换
- 终端执行
./mac_replace_icons
,这个文件是从上述的那个仓库中下载的
我的修改:
OK,到现在我的sublime如何使用介绍完了,后续肯定还会用到更多的插件,将在本文后直接更新。
推荐简书上另一个人的一篇文章,介绍的也很详细