Sublime Text3使用详解

Sublime Text简介

Sublime Text - 性感的代码编辑器、程序员之必备神器

Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器。Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。SublimeText的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。SublimeText是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

安装Sublime Text 3插件的方法:

直接安装

安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages)。

使用package control安装

网址(https://packagecontrol.io/installation#Simple)

package control 是用来安装其它插件的插件,为了方便管理插件的插件,可以安装删除其他插件

这个特殊的“插件包”,可以很容易地安装、升级、删除,甚至非常方便地查看您已经安装在SublimeText中的包或插件的列表。它通过菜单和对应的行为使这些过程变得非常容易和有组织。

1. 按Ctrl+`或View>Show Console调出console

2. 粘贴以下代码到底部命令行并回车:

 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)

3. 重启Sublime Text 3。

4. 如果在Perferences->package settings中看到package control这一项,则安装成功。在Perferences下面会多出package settings和package control两个选项。

如果由于某种原因,控制台安装不成功(如在您的网络上有一个代理),请执行以下步骤来手动安装Package Control:

1. 点击Preferences>Browse Packages…

2. 浏览文件夹,进入Installed Packages/

3. 下载Package Control.sublime-package复制到Installed Packages/

4. 重启 Sublime Text

用Package Control安装插件方法:

首先进入package control 的官网(https://packagecontrol.io/),找到自己想要的插件,将插件的名字复制下来,然后去sublime里面去安装

1. 按下Ctrl+Shift+P调出命令面板

2. 输入install 或package调出 Install Package 选项并回车,输入刚才找好的插件名称,然后在列表中选中要安装的插件。

常用Sublime Text 3插件:

1.Emmet

编辑器中最流行的插件之一。Emmet,前身Zen Coding也是web开发者提高生产力最有效的方法之一。按下Tab键,Emmet就能把一个缩写展开成一个HTML和CSS代码块,Emmet的使用方法(http://docs.emmet.io/cheat-sheet/),Emmet官网,Emmet package control.

解决Sublime提示 Sublime Text Error while loading PyV8 binary:exit code 1 Try to manually install Pyv8 form https://github.com/emetio/pyv8-binaries

1. 去gihub下载 PyV8,连接地址:https://github.com/emmetio/pyv8-binaries

2. 解压文件至Packages\PyV8文件夹内(Preferences – Browser Packages),重启解决。

2.Synced​Sidebar​Bg

侧边栏颜色与主题一致

3.SideBarEnhancements

这个插件可以给SublimeText的边栏菜单带来扩充的功能,包括:在当前工程文件夹中新建文件,移动文件或文件夹,产生文件或文件夹的副本,在新窗口或浏览器中打开,刷新等。

4.Auto​File​Name

自动补全文件路径-非常方便。

5.ColorPicker

如果你经常要查看或设置颜色值,这个插件可以很方便地调用你本机的调色板应用。

Sublime text3 插件ColorPicker(调色板)不能使用快捷键的解决方法

convertToUTF8和ColorPicker快捷键会产生冲突,convertoUTF8的默认转换GBK的快捷键 和 ColorPicker打开调色板的快捷键都是ctrl+shift+c 。如果你两个插件都安装了的话,就需要进行自定义了。

解决方法:打开Sublime Text --> Preferences --> Browse Packages,找到ConvertToUTF8文件夹并进入,找到对应操作系统的Default.sublime-keymap文件,直接修改成 

[

{ "keys": ["ctrl+shift++alt+c"], "command": "convert_to_utf8", "args": {"encoding": "GBK", "stamp": "0" } }

]

6.Theme - Soda

现在我正在使用的主题与配色

使用方法

Open your User Settings Preferences fileSublime Text -> Preferences -> Settings - User

Add (or update) your theme entry to be"theme": "Soda Light 3.sublime-theme"or"theme": "Soda Dark 3.sublime-theme"

7.Piatto

piatto light配色方案很好看

8.Spacegray

9.Theme - Nil

10.Convert​To​UTF8

通过本插件,您可以编辑并保存目前编码不被 Sublime Text 支持的文件,特别是中日韩用户使用的 GB2312,GBK,BIG5,EUC-KR,EUC-JP 等。ConvertToUTF8 同时支持 Sublime Text 2 和 3。

11. IMESupport

还在纠结 Sublime Text 中文输入法不能跟随光标吗?试试「IMESupport 」这个插件吧!目前只支持 Windows,在搜索等界面不能很好的跟随光标。

12. jQuery

提供jquery的一些snippets片段 ,方便直接调用

13.Material Theme

配色方案很好看,但是有一点暗了

14. html5

该插件提供许多 html5相关的标签等snippets,也非常实用。

crtl+shift+p 输入相关内容,可以看到有代码片段,后面是其快捷键

15.Js​Format

在你写javascript代码时,按下 Ctrl+Alt+f 快捷键后,js代码自动格式化对齐,赶快试一试吧!

16. JavaScript Completions

17.Bracket​Highlighter

括号以及标签层级显示,不用担心选中的代码属于哪个代码块,一目了然。

19.All Autocomplete

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

20.Color Highlighter

21. PHPCS 

22.Sublime​Linter-php

23.Doc​Blockr

可以生成优美的注释,高效的注释

24.AngularJS

AngularJs 补全

25.SVG-Snippets

SVG-Snippets - 设置自定义的SVG片段。

26.CSS Format

有多种css格式化风格

使用方法,安装完成后,在Edit中找到CSS Format,选择相应格式

27.A File Icon

文件图标

28.Sublime​Linter-jshint

可以让sublime有javascript语法检查。

安装方法:

1. 安装SublimeLinter插件( 通过Package Control 来安装)

2. 安装Node.js

  node -v   输出版本信息,验证安装是否成功。

3. 安装jshint

  SublimeLinter-jshint 是基于 nodeJS 下的 jshint 的插件,实际上 SublimeLinter-jshint 调用了 nodeJS 中 jshint 的接口来进行语法检查的。

在命令行下输入如下代码:npm install -g jshint完成安装

4. 安装好了上面的依赖后,在Package Control中搜索SublimeLinter-jshint插件,然后确认安装。

29. Sublime​Linter-csslint

Sublime​Linter-csslint是用来检查css错误的,安装方法类似于SublimeLinter-jshint

安装方法:

 1. 安装SublimeLinter插件( 通过Package Control 来安装)

 2. 安装Node.js

 3. 安装csslint

  在命令行下输入如下代码:npm install -g csslint完成安装

4. 安装好了上面的依赖后,在Package Control中搜索SublimeLinter-csslint插件,然后确认安装。

30.Emmet Css Snippets

Emmet Css Snippets是可以自动提示CSS、LESS和SASS语法的sublime text插件。

它的特点有:

可以自动提示CSS、LESS和SASS语法。

有两个版本:has-Prefix 或 no-Prefix。

智能自动完成。

可以提示伪元素。

可以提示扩展属性。

语法参考:http://p233.github.io/Emmet-Css-Snippets-for-Sublime-Text-2/

31.Terminal

在当前文件打开终端

32. Vue Syntax Highlight

使vue后缀的代码文件高亮

33.Markdown​Editing

markdown编辑支持高亮

34.scss

支持scss高亮


Sublime Text 如何关闭自动更新?

点击菜单栏“Preferences”=> "Settings-User" 进入个人参数设置页面;在大括号"{}"里面插入下面代码:"update_check": false, 保存就行了

Sublime主题

在设置一个新的主题时,需要设置color_scheme和theme两个方面,前者决定了打开不同类型文件的配色,后者决定了Tab栏,SideBar大小和图标,以及相应字体的大小设置。

 sublime 主题(theme)与配色方案(color_scheme),激活主题,不激活主题,使用的只是配色文字,Sublime Text -> Preferences -> Settings - User

Add (or update) your theme entry to be"theme": "XXX.sublime-theme"

查看已安装插件

快捷键 Ctrl+Shift+P,在对话框中输入“list”,选择“Package Control:List Packages”。

Sublime会列出所有已安装的插件。这样可以很方便地了解自己已经安装了哪些插件。

Disable Package:禁用插件

enable Package:启用插件

Install Package:安装插件

List Package:查看已安装插件列表

Remove Package:移除插件

Upgrade Package:升级插件

移除插件

有时候我们需要移除自己不想要的插件,具体操作如下:快捷键 Ctrl+Shift+P,在对话框中输入“remove”,选择“Package Control: Remove Packages”。 然后在出现的插件列表中点选你要移除的插件。

自定义Sublime

Perferences - Settings-Default中是sublime的默认设置,Settings-user是用户用来自定义设置的,自定义只需复制Settings-Default中的值,粘贴在Settings-User中改变其值就行了,

如复制"line_numbers": true,粘贴在Setttings-User将true改为false保存则行号消失。

侧边栏的显示与隐藏

刚安装好的sublime侧边栏是不显示的,显示的方法是:View > Side Bar > Show Open Files.

Sublime改变默认字体

sublime text的默认字体是Consolas

改变默认字体: Preferences-Settings-User

如改变字体为微软雅黑添加:"font_face": "Microsoft YaHei",

Sublime中增加格式化代码的快捷键

其实在sublime中已经自建了格式化按钮:

Edit -> Line -> Reindent

只是sublime并没有给他赋予快捷键,所以只需加上快捷键即可

Preference -> Key Bindings -user 

中括号内添加(比如添加:ctrl + alt + f)

{ "keys": ["ctrl+alt+f"], "command": "reindent" }

创建可复用的代码片段

我们在编写代码的时候,总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴,大大影响效率。我们利用Sublime Text的snippet功能,就能很好的解决这一问题。通俗的讲,就是把我们常用的代码分别保存起啦,然后通过插件的形式来反复调用。

在菜单上点击Tools -> New Snippet,会新建一个xml文件页签:

这时你会看到如下示例代码:

<snippet>

     <content><![CDATA[

Hello, ${1:this} is a ${2:snippet}.

]]></content>

     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->


     <!-- Optional: Set a scope to limit where the snippet will trigger -->

     <!-- <scope>source.python</scope> -->

</snippet>

content 里面就是代码模版:${序号:默认值} ,序号相同的地方光标会同时停在那可以多处同时编辑。序号大小就是tabindex。在实际使用代码的时候,可以使用tab切换光标位置。

tabTrigger是指输入该字符串后tab就是在光标插入content中的内容。

scope是指在何种文件类型中使用,如<scope>text.html</scope>则定义了仅在html文件中使用,所以此时如果我们打开的是css或其他格式的文件,那将无法插入代码段。

现在,你应该有了个大致的了解。那我们就开始自己动手编写一个实例:

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="author" content="loveyunk" />

<meta name="keywords" content="" />

<meta name="description" content="" />

<title>${1}</title>

</head>

<body>

Hello, ${2:this} is a ${3:snippet}.

</body>

</html>

]]>


html5



创建完毕以后,保存在\Packages\User目录下(例 X:\Sublime Text\Data\Packages\User),后缀名.sublime-snippet。

此时我们打开一个html文件,输入html5,再按Tab键,刚才我们所编写的代码段,就插入了进来。并且此时的光标停留在我们所标记的${1}位置处,如果我们再按下Tab,那么光标就跳转到${2}的位置。this会被选中。

Sublime Text 小技巧

1. 一般推荐下载便携版本(Portable version),这样拿来拿去很方便,也不用安装,而且插件和主体在一个目录下,便携。

2. 查找打开过的文件:Ctrl+P,然后输入最近的文件名通过上下箭头键就可以即时预览到文件内容。

3. 快速切换语法模式:CTRL+SHIFT+P,输入JS,回车切换语法模式为JS模式,css回车,则切换为css模式,主要是找到set Syntax: 选项

4. 文件嵌套较多时用GoTo Anything(快捷键 ctrl + p)来查找,符号功能:css文件中输入@搜出所有的css,在css中添加属性可以采用模糊匹配的方法(其中的几个字母),js中@可以查找函数

5. Ctrl+D :选择游标所在单词,连续Ctrl+D 实现多行选择(选择与第一次选择相同的单词)Ctrl+K Ctrl+D 跳过当前选择,选择下一个,ctrl+D-->Atl+F3全选匹配内容

6. Soda 主题+ Piatto Light 配色方案

7. 按住鼠标中键往下拉,可同时进行多行编辑

sublime代码折叠展开

Ctrl+Shift+[ 折叠代码

Ctrl+Shift+] 展开代码

Sublime Text 3快捷键

选择类

Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本。

Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑。举个栗子:快速选中并更改所有相同的变量名、函数名等。

Ctrl+L 选中整行,继续操作则继续选择下一行,效果和 Shift+↓ 效果一样。

Ctrl+Shift+L 先选中多行,再按下快捷键,会在每行行尾插入光标,即可同时编辑这些行。

Ctrl+Shift+M 选择括号内的内容(继续选择父括号)。举个栗子:快速选中删除函数中的代码,重写函数体代码或重写括号内里的内容。

Ctrl+M 光标移动至括号内结束或开始的位置。

Ctrl+Enter 在下一行插入新行。举个栗子:即使光标不在行尾,也能快速向下插入一行。

Ctrl+Shift+Enter 在上一行插入新行。举个栗子:即使光标不在行首,也能快速向上插入一行。

Ctrl+Shift+[ 选中代码,按下快捷键,折叠代码。

Ctrl+Shift+] 选中代码,按下快捷键,展开代码。

Ctrl+K+0 展开所有折叠代码。

Ctrl+← 向左单位性地移动光标,快速移动光标。

Ctrl+→ 向右单位性地移动光标,快速移动光标。

shift+↑ 向上选中多行。

shift+↓ 向下选中多行。

Shift+← 向左选中文本。

Shift+→ 向右选中文本。

Ctrl+Shift+← 向左单位性地选中文本。

Ctrl+Shift+→ 向右单位性地选中文本。

Ctrl+Shift+↑ 将光标所在行和上一行代码互换(将光标所在行插入到上一行之前)。

Ctrl+Shift+↓ 将光标所在行和下一行代码互换(将光标所在行插入到下一行之后)。

Ctrl+Alt+↑ 向上添加多行光标,可同时编辑多行。

Ctrl+Alt+↓ 向下添加多行光标,可同时编辑多行。

编辑类

Ctrl+J 合并选中的多行代码为一行。举个栗子:将多行格式的CSS属性合并为一行。

Ctrl+Shift+D  复制光标所在整行,插入到下一行。

Tab 向右缩进。

Shift+Tab 向左缩进。

Ctrl+K+K 从光标处开始删除代码至行尾。

Ctrl+Shift+K 删除整行。

Ctrl+/ 注释单行。

Ctrl+Shift+/ 注释多行。

Ctrl+K+U 转换大写。

Ctrl+K+L 转换小写。

Ctrl+Z 撤销。

Ctrl+Y 恢复撤销。

Ctrl+U 软撤销,感觉和 Gtrl+Z 一样。

Ctrl+F2 设置书签

Ctrl+T 左右字母互换。

F6 单词检测拼写

搜索类

Ctrl+F 打开底部搜索框,查找关键字。

Ctrl+H 查找与替换。

Ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找,略高端,未研究。

Ctrl+P 打开搜索框。举个栗子:1、输入当前项目中的文件名,快速搜索文件,2、输入@和关键字,查找文件中函数名,3、输入:和数字,跳转到文件中该行代码,4、输入#和关键字,查找变量名。

Ctrl+G 打开搜索框,自动带:,输入数字跳转到该行代码。举个栗子:在页面代码比较长的文件中快速定位。

Ctrl+R 打开搜索框,自动带@,输入关键字,查找文件中的函数名。举个栗子:在函数较多的页面快速查找某个函数。

Ctrl+: 打开搜索框,自动带#,输入关键字,查找文件中的变量名、属性名等。

Ctrl+Shift+P 打开命令框。场景栗子:打开命名框,输入关键字,调用sublime text或插件的功能,例如使用package安装插件。

Esc 退出光标多行选择,退出搜索框,命令框等。

显示类

Ctrl+Tab 按文件浏览过的顺序,切换当前窗口的标签页。

Ctrl+PageDown 向左切换当前窗口的标签页。

Ctrl+PageUp 向右切换当前窗口的标签页。

Alt+Shift+1 窗口分屏,恢复默认1屏(非小键盘的数字)

Alt+Shift+2 左右分屏-2列

Alt+Shift+3 左右分屏-3列

Alt+Shift+4 左右分屏-4列

Alt+Shift+5 等分4屏

Alt+Shift+8 垂直分屏-2屏

Alt+Shift+9 垂直分屏-3屏

Ctrl+K+B 开启/关闭侧边栏。

F11 全屏模式

Shift+F11 免打扰模式

Sublime Text 中英文对照

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容