sublime text 心得

安装

1、官网下载Sublime Text 3 http://www.sublimetext.com/3

2、示例Win7 64位 

3、下载完成后(傻瓜式安装)、安装时,注意勾选

这样Sublime Text可以被添加到右键中,在右键单击文件时,可以直接使用Sublime Text打开。

Package Control安装

安装插件之前、需要安装Package Control(管理ST中的插件)

使用Ctrl + ~快捷键或者通过View->Show Console菜单打开命令行

将以下 Python 代码粘贴进去并 enter 执行,不出意外即完成安装。

Sublime Text 3

1 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())

PackageControl

可能由于各种原因,无法使用代码安装 请跳转链接http://www.imjeff.cn/blog/62/

若Preferences中多出 Package Control恭喜你安装成功

使用Package Control安装插件

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

2、输入"pcip" 调出 Package Control: Install Package 选项并回车。

3. 在列表中选中要安装的插件,或者输入插件名(比如要安装Emmet插件,则输入Emmet),根据命令面板中的过滤结果,选择要安装的插件。

使用Package Control查看、删除已安装的插件

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

2、输入"pcil",在下拉列表找到"Package Control: List Packages",选中后回车,全部的插件就会显示出来了。

3、输入"pcrp",在下拉列表找到"Package Control: Remove Packages",删除需要删除的插件即可

插件

插件地址:https://packagecontrol.io/browse

1、Package Control( 管理Sublime Text插件 )

2、Emmet( 前端开发神器 ) 具体使用请跳转 → http://www.iteye.com/news/27580

3、SublimeCodeIntel( 代码提示插件 )

4、Bracket?Highlighter( 引号、括号、标签高亮插件 ) 具体使用请跳转 → http://www.dbpoo.com/sublime-text3-brackethighlighter/ Pregerence > Package Settings > BracketHighlighter > Bracket Settings – User

5、SideBarEnhancements( slide增强快捷键浏览器\并可自定义浏览器预览的快捷键 )

6、Theme( 界面主题 )

7、Convert?To?UTF8( 解决Sublime中中文不能正常显示的问题 )

8、DocBlockr( 代码生成注释 )

9、Autoprefixer( 处理Browse前缀 )

10、AutoFileName( 自动补全文件路径 )

11、HTML5、jQuery、Sass、Git、JS Format、ConvertToUTF8

12、SublimeREPL( 可以直接在编辑器中运行一个解释器 )

13、ColorPicker( 内置调色板 )

常用快捷键

选择类

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

Alt+F3 选择一个选中项的所有匹配项

Ctrl+Enter  在下一行插入新行

Ctrl+Shift+Enter  在上一行插入新行

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

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

Ctrl+shift+M 选择括号之间的一切,使用CSS

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

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

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

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

Ctrl+shift+‘ 选择与光标关联的开始和结束标签

Ctrl+shift+a 再次按下它,将选择父容器,再按,将选择父容器的父容器。

Ctrl+F2  设置书签

F2  查找书签(有的话)

移动行和文本

Ctrl+shift+↑ 于上一行互换位置

Ctrl+shift+D 如果你已经选中了文本,它会复制你的选中项。否则,把光标放在行上,会复制整行。

Ctrl+[或] 增加和减少缩进

剪切、删除、复制、粘贴

Ctrl+shift+; 移除选中项的标签元素

Ctrl+shift+v 粘贴并保持缩进

Alt+shift+w 使用标签包裹一行; 开始输入你想使用的标签

Ctrl+K+U  大写

Ctrl+K+L  小写

文本和数字的操作

Ctrl+shift+y 计算数学表达式

Alt+shift+↑ 增长1

Ctr+↑    增长10

Ctrl+/    注释

Ctrl+shift+/  注释选中的

显示类

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  免打扰模式

view → Hide Menu 隐藏工具栏

按住Alt工具栏显示

Sublime Text3 实用设置

"caret_style":"phase",// 设置贯标闪动方式(smooth\phase\blink\wide\solid)
"color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme",// 主题文件路径
"draw_minimap_border": true,//  代码地图(右侧缩略图)是否加上边框
"ensure_newline_at_eof_on_save": true,// 保存文件时光标会在文件的最后向下换一行
"font_face": "YaHei Consolas Hybrid",// 字体
"font_size": 14,// 字体大小
"highlight_line": true,// 高亮光标所在的一行
"highlight_modified_tabs": true,      // 高亮有修改的标签
"ignored_packages":// 删除你想要忽略的插件
[
    "Vintage"
],
"overlay_scroll_bars": "enabled",// 鼠标滚轮不滑动时 默认隐藏滚动条
"rulers":// 宽度指导线 你的代码宽度超出这条线的时候,说明你要重新组织一下了
[
   80
],
"save_on_focus_lost": true,// 焦点丢失后自动保存
"show_encoding": true,// 显示当前文件的编码(右下角)
"theme": "Soda Light.sublime-theme",
"trim_trailing_white_space_on_save": true,// 保存的时候把无用的空格去掉
"word_wrap": true    // 自动换行

插件配置

1、SideBarEnhancements( 右键增强 )

点击菜单栏的preferences->package setting->side bar->Key Building-User

Ctrl+shift+C 复制当前文件路径

 1 [
 2     { "keys": ["ctrl+shift+c"], "command": "copy_path" },
 3     //chrome
 4     { "keys": ["f1"], "command": "side_bar_files_open_with",
 5         "args": {
 6             "paths": [],
 7             "application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
 8             "extensions":".*" //匹配任何文件类型
 9         }
10     },
11     //firefox
12     { "keys": ["f2"], "command": "side_bar_files_open_with",
13         "args": {
14             "paths": [],
15             "application": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
16             "extensions":".*"
17         }
18      },
19     //ie
20     { "keys": ["f4"], "command": "side_bar_files_open_with",
21         "args": {
22             "paths": [],
23             "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
24             "extensions":".*"
25         }
26     },
27     //safari
28     // { "keys": ["f5"], "command": "side_bar_files_open_with",
29     //     "args": {
30     //         "paths": [],
31     //         "application": "D:\\Program Files\\Safari\\safari.exe",
32     //         "extensions":".*"
33     //     }
34     // }
35 ]

SideBarEnhancements

2、Bracket?Highlighter( 高亮插件 )

点击菜单栏的preferences->setting - User

 1 {
 2  2     // Define region highlight styles
 3  3     "bracket_styles": {
 4  4         // "default" and "unmatched" styles are special
 5  5         // styles. If they are not defined here,
 6  6         // they will be generated internally with
 7  7         // internal defaults.
 8  8
 9  9         // "default" style defines attributes that
10 10         // will be used for any style that does not
11 11         // explicitly define that attribute.  So if
12 12         // a style does not define a color, it will
13 13         // use the color from the "default" style.
14 14         "default": {
15 15             "icon": "dot",
16 16             // BH1‘s original default color for reference
17 17             "color": "entity.name.class",
18 18             "color": "brackethighlighter.default",
19 19             "style": "highlight"
20 20         },
21 21
22 22         // This particular style is used to highlight
23 23         // unmatched bracekt pairs.  It is a special
24 24         // style.
25 25         "unmatched": {
26 26             "icon": "question",
27 27             "color": "brackethighlighter.unmatched",
28 28             "style": "highlight"
29 29         },
30 30         // User defined region styles
31 31         "curly": {
32 32             "icon": "curly_bracket",
33 33             "color": "brackethighlighter.curly",
34 34             "style": "highlight"
35 35         },
36 36         "round": {
37 37             "icon": "round_bracket",
38 38             "color": "brackethighlighter.round",
39 39             "style": "underline"
40 40         },
41 41         "square": {
42 42             "icon": "square_bracket",
43 43             "color": "brackethighlighter.square",
44 44             "style": "underline"
45 45         },
46 46         "angle": {
47 47             "icon": "angle_bracket",
48 48             "color": "brackethighlighter.angle",
49 49             "style": "underline"
50 50         },
51 51         "tag": {
52 52             "icon": "tag",
53 53             "color": "brackethighlighter.tag",
54 54             "style": "highlight"
55 55         },
56 56         "single_quote": {
57 57             "icon": "single_quote",
58 58             "color": "brackethighlighter.quote",
59 59             "style": "outline"
60 60         },
61 61         "double_quote": {
62 62             "icon": "double_quote",
63 63             "color": "brackethighlighter.quote",
64 64             "style": "outline"
65 65         },
66 66         "regex": {
67 67             "icon": "regex",
68 68             "color": "brackethighlighter.quote",
69 69             "style": "outline"
70 70         }
71 71     },
72 72
73 73 }

BracketHighlighter

3、Theme( 主题 )

点击菜单栏的preferences->package setting->Bracket highlighter–>Bracket settings-User

Theme - Spacegray  https://packagecontrol.io/packages/Theme%20-%20Spacegray

1 黑暗
2 "theme": "Spacegray Eighties.sublime-theme",
3 "color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme",
4 海洋
5 "theme": "Spacegray Light.sublime-theme",
6 "color_scheme": "Packages/Theme - Spacegray/base16-ocean.light.tmTheme",
7 暗黑海
8 "theme": "Spacegray.sublime-theme",
9 "color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme"

Theme - Spacegray 链接 https://packagecontrol.io/packages/Theme%20-%20Spacegray

Theme - Soda 链接 http://buymeasoda.github.io/soda-theme/

Theme - Flatland 链接 https://packagecontrol.io/packages/Theme%20-%20Flatland

4、Autoprefixer与SublimeCodeIntel( 依赖NODE环境 )

5、ColorPicker( 内置调色板 )

点击菜单栏的preferences->Browser Packages…… >ColorPicker文件夹–>Default (Windows).sublime-keymap 修改

1 [
2     { "keys": ["ctrl+shift+z+x"], "command": "color_pick" }
3 ]

ColorPicker

时间: 2024-10-06 20:12:57

sublime text 心得的相关文章

前端-【学习心得】-使用工具提升你的工作效率(sublime text)

从今天起我来把自己开发前端的工具分享给大家. 首先,是文本编辑器.我的选择是sublime text ,sublime 强大在于它的插件支持. 通常,前端需要打交道的地方有js,css,html. sublime temp 模板插件,因为我们平时需要重复创建许多css,js,html文件,这个插件无疑是为我们减少了这么多的重复操作.比如我想创建一个js文件只需要ctrl+shift+j 然后命名点回车就好了,当然快捷键你可以自己设置 (在sublime 安装插件也很简单,preferences-

在Mac下用Sublime Text 2 架设C开发环境

Mac上的Xcode是个相当大的IDE,可以进行相当多的开发.但作为程序员,有时候我们更期望的是大道至简——一个gcc编译器,一个文本编辑器.这就是我们在学习C语言时期望的所有工具.(至于mac的vi的确很好用,后续有机会也会写一些vi的心得).下面来说说Sublime Text 2. (1)首先我们需要在mac上安装gcc,方法自行百度——当然我们的mac一般应该装了xcode,xcode自带gcc,所有有了xcode,gcc安装这一步就省略了. (2)安装好了Sublime Text 2后,

Sublime Text插件之Emmet

转载:http://www.w3cplus.com/tools/using-emmet-speed-front-end-web-development.html Emmet插件以前被称作为Zen Coding,是一个文本编辑器的插件,它可以帮助您快速编写HTML和CSS代码,从而加速Web前端开发.早在2009年,Sergey Chikuyonok写过一篇文章,提出编写HTML和CSS的新方法.这一革命性的插件指的就是Zen Coding,经过很多开发者多年来的努力与帮助,现在已达到了一个新的水

Sublime Text 2激活、插件包安装、以及快捷键

http://jingyan.baidu.com/article/ff4116259b057c12e48237b8.html Sublime Text作为一款轻量.简洁.高效.跨平台的编辑器.支持N多种语言,受工程师所爱!这里教大家如何激活Sublime Text 2.0.2,并教大家如何安装包控制器(package control)和安装插件(Emmet.SublimeLinter.jQuery等插件)  1.激活注册sublime text2 接下来教大家如何注册破解Sublime Text

Sublime Text:学习资源篇

官网 http://www.sublimetext.com/ 插件 https://packagecontrol.io 教程 Sublime Text 全程指南 Sublime Text 2 入门及技巧 Sublime Text 使用介绍.全套快捷键及插件推荐 Sublime Text 3 学习及使用 Sublime Text 3 使用心得 Sublime Text 3 新手上路:必要的安裝.設定與基本使用教學 Perfect Workflow in Sublime 2 6 Ways to Tu

Sublime text 神器小记

以前一直使用的都是Editplus,一直感觉都是很不错的. 但是最近接触到sublime text,我就fall in love with it. Sublime 的意思是"顶峰,高尚,非凡的"意思.多么霸气的名字啊..好吧,不瞎扯了. 其实我觉的不需要到网上乱找一通,什么中文破解版的,乱七八糟的.就直接到官方网网站进行下载. 虽然是没有注册的,偶尔会弹出一个让你去获取License的 框框外,没有其他任何影响. 下砸网址:http://www.sublimetext.com/ 不过我

Sublime Text 2 入门与总结

Sublime Text 2 入门与总结 首语 :    考完试,但又没什么兴趣做课程设计,蛋疼的弄点软件入门的介绍,希望给各位还在吃香蕉的程序猿带来一点启示... 代码编辑器,就像武侠中的武器,谁都希望能有一把神兵,而每个程序猿都希望能有一个方便的编辑器.用过几个编辑器,免费的notepad和VIM.而最近在用的这款SublimeText2价格也不低.但它可以无限期免费试用,如果你不介意偶尔频率极低弹出的购买通知. 从notepad+转投sublime Text2也有一段时间了,使用起来的确是

Sublime Text 2 VS Vim

说说我的开发工具Sublime Text 2和对Vim的研究 设置Sublime为VIM模式 Sublime Text 2 入门及技巧 sublime text2 使用技巧心得总结

Sublime Text 常用的16 个 Sublime Text 快捷键

在我做了一次包含一些现场编码的演示后,一些观众问我是如何操作这么快.当然这里没有唯一的答案,答案是一堆简单的快捷键和大量的实践的组合.为了回应那些询问,我觉得有必要看看我每天想都不用想且使用的快捷键. 这里有一个15 16 个快捷键的精选列表(1个自定义快捷键),以gif动画展示,我每天使用.享受吧! (译者注:原文所列快捷键均为OS X环境,为了方便Windows和Linux环境童鞋的学习,译者将备注Windows和Linux下对应的快捷键) 选择 选择一个选中项的下一个匹配项 选择一个选中项