详细设置 && 20+插件
本文章会在本人有插件或者设置更新时,进行不定时更新
2015-12-31更新:NO. 21 侧边栏同步编辑窗口底色插件。
2016-04-06更新:代码片段:better-completions
;主题:Material
,Seti_UI
;代码格式化:HTML-CSS-JS Prettify
;vue语法高亮:Vue Syntax Highlight
;Terminal
与MarkdownEditing
个性化定制
GitSavvy 、
2016-07-03更新:自定义代码片段;livereload
:保存自动刷新浏览器;WakaTime
:记录你的编程时间
为什么要选择Sublime Text3?
- Sublime Text3 自动保存,打开图片
- 跨平台启动快!!!!多行游标,太好用。
- 插件,简直选不过来。
- 代码片段
- VIM兼容模式
菜单栏基础功能介绍
File
:文档相关,新建文件,打开文件或文件夹等。Edit
:文件编辑相关,复制,剪切等(CVS大法好)。除此之外还有一些强大的功能。Selection
:选择相关,帮助选择代码。Find
:查找替换相关。这个和其它编辑器区别好像不大。View
:对Sublime_Text编辑器本身的一些配置。SideBar
:开启侧边栏Ctrl+k,b
Show console
:打开控制台窗口,安装package control需要使用.
Goto
:快捷导航:下面介绍。Goto Anythingtools
:工具,一些命令。new Snippet
:自定义代码片段,保存到user下
Project
: 项目相关,用的少。Preferences
:对于sublime_text进行一些个性化定值。Help
:如同名字。注册在这里
快捷键
line
相关:Ctrl+Shift+D
:复制当前行Ctrl+Shift+K
:删除当前行Ctrl+j
合并一行Ctrl+Enter
:在当前行下添加新行。AfterCtrl+Shift+Enter
:在当前行上添加新行。BeforeCtrl+Shift+上、下
:移动当前行
Comment
注释:Ctrl+/
:行注释。Ctrl+Shift+/
:块注释
Ctrl+Shift+P
:调用命令面板,快速查找,例如:改变语法模式等。Shift+Alt+1,2,3,4,5
:开启对应数字的多栏编辑
Ctrl+P
:Goto Anything
Ctrl+P
: 查找项目中的文件:- 直接输入名称:在不同文件中切换,支持级联的目录模式
:
:+ 行号:Ctrl+G
定位到具体的行。@
:+ 符号:Ctrl+R
定位到具体的符号,例如:JS函数名,CSS选择器名。#
:+ 关键字:Ctrl+;
匹配到具体的匹配的关键字。主要是模糊匹配。
多行游标
Ctrl+D
:选中当前光标所在位置的单词。连续使用时,进行多光标选择,选中下一个同名单词。Ctrl+K
:配合Ctrl+D
可以跳过下一个同名单词。Ctrl+L
:选择当前光标所在位置的行。连续使用时,继续选中下一行。Ctrl+Shift+L
:在多行选中后,在所有选中的行后产生游标。Alt+F3
:选中文档中所有的同名单词。Shift+鼠标右键
:向下拖动,产生多个光标。
设置
使用 View
–>Show console
,快捷键: Ctrl+` 调出console面板输入sublime.log_commands(True)
,可以得到当前使用的命令面板进行设置的值。方便进行快捷键的绑定。
下面这些都可以通过命令面板快捷查找
Settings-User
:个人对于sublime_text的定制。使用JSON格式,会直接覆盖掉Settings-Default
默认设置中的内容。
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
"theme": "Material-Theme-Darker.sublime-theme",
"draw_minimap_border": true,
"font_face": "Monaco",
"font_size": 10,
"highlight_line": true,
"save_on_focus_lost": true,
"theme": "Spacegray Eighties.sublime-theme",
"word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",
"word_wrap": true,
"trim_trailing_white_space_on_save": true,
"ensure_newline_at_eof_on_save": true,
"disable_tab_abbreviations": true,
"translate_tabs_to_spaces": true,
"tab_size": 4,
"fade_fold_buttons": false,
"bold_folder_labels": true,
"auto_find_in_selection": true
key - Bindings-User
:个人对于快捷键的设置。同样会覆盖默认的设置。例如:
"keys": ["shift+tab"], "command": "reindent","args":{"single_line":false}
构建系统实现快捷调用浏览器
构建系统可以让您通过外部程序来运行文件,并可以在Sublime Text查看输出。
tools
:工具下的Build System
选择新建一个选项后(Build System
–>New Build System
),进行如下设置(注意后缀),保存到user目录下:
"cmd" :["C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe","$file"],
"selector":["text.html"]
之后再进入刚刚的的地方,选择第一个Automatic
,修改内容后按Ctrl+B
,可以看到自动调用chrome
并且是修改后的内容。在sublime Text
的console
中可以看到输出的信息。更多功能请查看这里
上面是一些基础功能的介绍
2016-07-03 更新:自定义sublime代码片段
我们在开发中有很多代码是需要重复编写的,每一次都去复制粘贴显然是一件效率极其低下的事情,sublime的自定义代码片段功能就很好的解决了这个问题。下面就来看一下如何在sublime中自定义代码片段
首先在菜单栏选择:Tools ->developer -> New Snippet可以看到新建一个xml
类型的描述文件,如下:
注释已经非常详细了,content
里面就是代码模版:${序号:默认值}
,序号相同的地方光标会同时停在那可以多处同时编辑。序号大小就是 tabindex
。在实际使用代码的时候,可以使用 tab
切换光标位置。
以hexo新建一篇博客头部为例:
hexoH
hexo博客头部生成
设置完毕,最后还差一步,要想代码片段生效,还必须保存到sublime的文件目录\Data\Packages\User
,文件名任意,但文件后缀必须为.sublime-snippet
。
现在输入hexoH
试试,你想要的代码片段是不是已经有了呢?
插件的安装与使用
安装package control
。
这里我使用的是sublimeText 3
,2 的话上官网查询代码。
首先打开package control
的官方网站。
复制下面这一段代码:
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)
在上面说的View
–>Show console
,快捷键: Ctrl+` 打开控制台窗口,粘贴上面的代码,回车,然后就是等待安装了,需要一定的时间。安装完成后重启 。
使用Ctrl+Shift+P
,打开控制面板,输入PC
,效果如下:说明安装成功了。
安装主题
- 按照上面的步骤,打开图片中的安装插件就行了,其实默认配色真的挺好看的
- 推荐在安装前,先去官方网站查看样式。的样式,以及设置方法,说明文档。一般安装成功后,会自动弹出。
- 以
Theme - Spacegray
为例:
先使用Ctrl+Shift+P
输入PCI,回车选择 Install Package
。需要等待一会加载时间,输入Theme-Spacegray
。其实不输入完也会模糊匹配出来的。
- 回车等待安装就好,成功后会弹出一个使用设置的页面,把其中的如下代码拷贝到
Settings-User
,保存,你会发现,默认的主题已经变成了刚刚我们查看过的主题了。
"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme",
"theme": "Spacegray Eighties.sublime-theme"
当然,你也可以通过菜单栏,进行主题的选择。会有相同的效果。它会自动在Settings-User
进行设置。
2016-04-6 更新
安利两款主题:
两款主题都有侧边栏图标显示:我在这里说不清到底谁好谁差,全凭个人的喜好吧!
安装方法还是和上面一样,最好是根据它的README
描述来进行设置。
个人常用插件及使用方法:
NO.1 AdvancedNewFile
:快速新建文件。
- 假设有文件夹
file
。我们正在输入代码,又想在新的子目录下新建html文件的话用传统方式得很多步,新建目录,新建文件,保存等等等。 - 但是有了该插件之后,事情就变得简单了许多,只需要按下
Ctrl+Shift+N
,输入文件夹以及文件名,你就会看到如下效果:(回车,你会发现已经子目录下的文件已经新建完成了!)
NO.2 Nettuts+ Fetch
:管理类库。
安装成功后输入Ctrl+Shift+P
打开命令面板,输入Fetch
,可以看到以下:
选择file
可以看到设置的文件。选择下载
配合刚刚上面的插件使用,简直完美..
必装插件,无比强大,就不过多介绍了。可以在浏览器中打开,还可以配置不同文件的打开方式。
单单下面这一个功能就必须安装了!快捷在不同浏览器打开:
配置设置:
"keys": ["f1"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"extensions": ".*"
"keys": ["f2"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "D:\\浏览器\\火狐\\firefox.exe",
"extensions": ".*"
"keys": ["f3"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
"extensions": ".*"
- 可选
SyncedSideBar
:每次打开文件,侧边栏都会同步显示该文件所在目录树中的位置
NO.4 DocBlockr
:代码块注释。
可以快速的对函数进行注释。保持代码规范。支持多种语言。(个人觉得brackets
的这个插件比Sublime Text
做得好多了。)
/*
:回车创建一个代码块注释/**
:回车在自动查找函数中的形参等等。
它会生成 JSDoc
格式的注释。如果你从没有使用过类似的工具,DocBlockr
会让你觉得以前没有它是如何写代码的。帮助你创造你的代码注释,通过解析功能,参数,变量,并且自动添加基本项目。
- 需先安装
SublimeLinter
。 - 需先安装
Node.JS
及npm
。 - 在cmd输入
npm install -g jshint
,等待安装成功就好了。
安装成功后,重启就可以测试代码的风格了。
当然还可以自定义校验规则,在该目录下使用Ctrl+Shift+N
创建文件.jshintrc
,在其中使用JSON格式配置校验风格。
例如: