sublime text3配置方法、插件推荐及使用技巧

来源:互联网 发布:可以看亚丝娜本子软件 编辑:程序博客网 时间:2024/04/30 22:45

转自:http://blog.csdn.net/lijinqi1987/article/details/52387176


Sublime Text作为一个尽为人知的代码编辑器,其优点不用赘述。界面整洁美观、文本功能强大,且运行速度极快,非常适合编写代码,写文章做笔记。

下面简要说下sublime text3 的一些基本配置及插件


一、package control安装包配置

1、通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台

2、粘贴对应版本的代码后回车安装

[plain] view plain copy
 在CODE上查看代码片派生到我的代码片
  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())  


安装后弹出如下提示


3、重启sublime text3

重启后在preferences下出现PackageControl选项





4、选择Install Package 即可调出安装插件的搜索面板,可选择需要安装的插件enter后系统自动安装,安装完成后重启sublime后生效。

另外,如果通过外部下载的包(如github上),打开Preferences-BrowsePackage将下载下来的包解压后的文件夹放在该目录下重启sublime即可。


二、安装soda主题

Soda主题是sublime上一款很著名的清爽型主题,在install package中搜索


安装后打开Preferences -> Settings-User,默认:

[plain] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. {  
  2.     "ignored_packages":  
  3.     [  
  4.         "Vintage"  
  5.     ]  
  6. }  

添加"theme": "Soda Light3.sublime-theme",

[plain] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. {  
  2.         "theme": "Soda Light 3.sublime-theme",  
  3.     "ignored_packages":  
  4.     [  
  5.         "Vintage"  
  6.     ]  
  7. }  

保存后主题立马更改为soda light

另外还可以在此处配置一些其他内容,网上有人推荐如下配置(部分配置需安装对应插件才能生效):

[plain] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. {  
  2.   "theme": "Soda Light 3.sublime-theme",  
  3.   "color_scheme": "Packages/Color Scheme - Default/Mac Classic.tmTheme",  
  4.   "font_size": 11,  
  5.   "ignored_packages":  
  6.   [  
  7.   "Vintage"  
  8.   ],  
  9.   "show_encoding": true,  
  10.   "soda_classic_tabs": true,  
  11.   "soda_folder_icons": true,  
  12.   "highlight_line": true,      // 高亮显示当前行  
  13.   "fade_fold_buttons": false,   // 代码折叠按钮一直显示  
  14.   "show_encoding": true,    // 显示当前文件的编码  
  15.   "bold_folder_labels": true,   // 加粗文件夹名称  
  16.   "highlight_modified_tabs": true,      // 着重标示修改过的文件  
  17.   "trim_trailing_white_space_on_save": true, // 保存时去掉行尾无用空格  
  18.   "show_full_path": true,           // 显示全路径,默认  
  19.   // "show_line_endings": true,   
  20.   // "draw_white_space": "all",        // 显示所有空格,"none"|"selection"|"all"  
  21.   // "sublime_enhanced_keybindings": true, // 转到上一次编辑的地方  
  22.   // "word_wrap": true,            // 文字根据屏幕大小自动换行,防止水平滚动 true | false | "auto"  
  23.   // "save_on_focus_lost": true,        // 焦点丢失后自动保存  
  24. }  

三 配置高亮色彩

1. Sublime Text中用package control安装BracketHighlighter

2. 安装完成后,打开Preferences-> package settings -> Bracket Highlighter -> Bracket Settings – User,然后添加如下代码:

[plain] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. {  
  2.     "bracket_styles": {  
  3.         "default": {  
  4.             "icon": "dot",  
  5.             // "color": "entity.name.class",  
  6.             "color": "brackethighlighter.default",  
  7.             "style": "highlight"  
  8.         },  
  9.   
  10.         "unmatched": {  
  11.             "icon": "question",  
  12.             "color": "brackethighlighter.unmatched",  
  13.             "style": "highlight"  
  14.         },  
  15.         "curly": {  
  16.             "icon": "curly_bracket",  
  17.             "color": "brackethighlighter.curly",  
  18.             "style": "highlight"  
  19.         },  
  20.         "round": {  
  21.             "icon": "round_bracket",  
  22.             "color": "brackethighlighter.round",  
  23.             "style": "highlight"  
  24.         },  
  25.         "square": {  
  26.             "icon": "square_bracket",  
  27.             "color": "brackethighlighter.square",  
  28.             "style": "highlight"  
  29.         },  
  30.         "angle": {  
  31.             "icon": "angle_bracket",  
  32.             "color": "brackethighlighter.angle",  
  33.             "style": "highlight"  
  34.         },  
  35.         "tag": {  
  36.             "icon": "tag",  
  37.             "color": "brackethighlighter.tag",  
  38.             "style": "highlight"  
  39.         },  
  40.         "single_quote": {  
  41.             "icon": "single_quote",  
  42.             "color": "brackethighlighter.quote",  
  43.             "style": "highlight"  
  44.         },  
  45.         "double_quote": {  
  46.             "icon": "double_quote",  
  47.             "color": "brackethighlighter.quote",  
  48.             "style": "highlight"  
  49.         },  
  50.         "regex": {  
  51.             "icon": "regex",  
  52.             "color": "brackethighlighter.quote",  
  53.             "style": "outline"  
  54.         }  
  55.     }  
  56.   
  57. }  

3. 找到Sublime text3安装目录下的Packages中的Color Scheme – Default.sublime-package

默认路径:C:\Program Files\Sublime Text 3\Packages\Color Scheme – Default.sublime-package

添加后缀名Color Scheme – Default.sublime-package.zip,双击此zip文件(注意不要解压),在压缩包软件内找到Monokai.tmTheme(颜色主题),选择编辑器进行修改



4.  Monokai.tmTheme中添加如下代码:,和里面的dic标签t并列排即可。

[plain] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. <dict>  
  2.     <key>name</key>  
  3.     <string>Bracket Default</string>  
  4.     <key>scope</key>  
  5.     <string>brackethighlighter.default</string>  
  6.     <key>settings</key>  
  7.     <dict>  
  8.         <key>foreground</key>  
  9.         <string>#FFFFFF</string>  
  10.         <key>background</key>  
  11.         <string>#A6E22E</string>  
  12.     </dict>  
  13. </dict>  
  14.   
  15. <dict>  
  16.     <key>name</key>  
  17.     <string>Bracket Unmatched</string>  
  18.     <key>scope</key>  
  19.     <string>brackethighlighter.unmatched</string>  
  20.     <key>settings</key>  
  21.     <dict>  
  22.         <key>foreground</key>  
  23.         <string>#FFFFFF</string>  
  24.         <key>background</key>  
  25.         <string>#FF0000</string>  
  26.     </dict>  
  27. </dict>  
  28.   
  29. <dict>  
  30.     <key>name</key>  
  31.     <string>Bracket Curly</string>  
  32.     <key>scope</key>  
  33.     <string>brackethighlighter.curly</string>  
  34.     <key>settings</key>  
  35.     <dict>  
  36.         <key>foreground</key>  
  37.         <string>#FF00FF</string>  
  38.     </dict>  
  39. </dict>  
  40.   
  41. <dict>  
  42.     <key>name</key>  
  43.     <string>Bracket Round</string>  
  44.     <key>scope</key>  
  45.     <string>brackethighlighter.round</string>  
  46.     <key>settings</key>  
  47.     <dict>  
  48.         <key>foreground</key>  
  49.         <string>#E7FF04</string>  
  50.     </dict>  
  51. </dict>  
  52.   
  53. <dict>  
  54.     <key>name</key>  
  55.     <string>Bracket Square</string>  
  56.     <key>scope</key>  
  57.     <string>brackethighlighter.square</string>  
  58.     <key>settings</key>  
  59.     <dict>  
  60.         <key>foreground</key>  
  61.         <string>#FE4800</string>  
  62.     </dict>  
  63. </dict>  
  64.   
  65. <dict>  
  66.     <key>name</key>  
  67.     <string>Bracket Angle</string>  
  68.     <key>scope</key>  
  69.     <string>brackethighlighter.angle</string>  
  70.     <key>settings</key>  
  71.     <dict>  
  72.         <key>foreground</key>  
  73.         <string>#02F78E</string>  
  74.     </dict>  
  75. </dict>  
  76.   
  77. <dict>  
  78.     <key>name</key>  
  79.     <string>Bracket Tag</string>  
  80.     <key>scope</key>  
  81.     <string>brackethighlighter.tag</string>  
  82.     <key>settings</key>  
  83.     <dict>  
  84.         <key>foreground</key>  
  85.         <string>#FFFFFF</string>  
  86.         <key>background</key>  
  87.         <string>#0080FF</string>  
  88.     </dict>  
  89. </dict>  
  90.   
  91. <dict>  
  92.     <key>name</key>  
  93.     <string>Bracket Quote</string>  
  94.     <key>scope</key>  
  95.     <string>brackethighlighter.quote</string>  
  96.     <key>settings</key>  
  97.     <dict>  
  98.         <key>foreground</key>  
  99.         <string>#56FF00</string>  
  100.     </dict>  
  101. </dict>  

5. 然后再降修改完成的文件放到压缩包Color Scheme – Default.sublime-package.zip里边,最后改名Color Scheme – Default.sublime-package放回C:\Program Files\Sublime Text 3\Packages中;

效果图 :




四、sublime插件推荐

1.Soda Theme

Sublime Text 3中较为常用的一款自定义编辑器主题,用过的人都说好。Soda Theme包含代码着色、标签、图标,拥有light和dark两种颜色主题便于用户在不同时间段使用。

Github:https://github.com/buymeasoda/soda-theme/


1.   2.Sublime APICloud Plugins

Sublime APICloud Plugins是APICloud为开发者提供的一套开源的Sublime Text扩展插件,包括:应用管理、应用框架、页面模板、代码提示、代码管理、Widget打包、真机同步、日志输出、管理自定义AppLoader等功能,其他的功能插件也在不断增加,这些插件已被Package Control成功收录,开发者可以直接在Sublime Text3中下载安装;所有插件都已开源,开发者也可以在此基础上按需求扩展自己的插件。

插件下载:http://www.apicloud.com/devtools


3.ColorPicker

编辑CSS样式的时候, ColorPicker调色盘不仅可以查看颜色值,更可以轻松调好颜色。ColorPicker同时还是一个双向选择颜色的功能,既可以在调色板中选好颜色将其使用至文档中,也可以迅速定位文档中的某一种颜色值到调色板中。

插件下载:https://github.com/weslly/ColorPicker


4.Emmet

Emmet (前身是 Zen Coding)是一个前端开发不可缺少的插件,它让编写 HTML和CSS代码变得简单,节省大量时间。Emmet可使开发者用缩写形式书写代码,再用“扩展”功能自动将代码扩展至完整样式。

早在2009年,Zen Coding作为具有革命性的HTML和CSS代码编辑插件一经问世,直到现在帮助了无数的开发者,减少他们的时间,使得编写代码变得简便有趣。现在,Emmet已经超越了Zen Coding到达了更高层次,普适性的功能将给更多的开发者带来便利。

插件下载:https://github.com/sergeche/emmet-sublime


5.SublimeCodeIntel

SublimeCodeIntel 作为一个代码提示和补全插件,支持 JavaScript、Mason、XBL、XUL、RHTML、SCSS、Python、HTML、Ruby、Python3、XML、Sass、XSLT、Django、HTML5、Perl、CSS、Twig、Less、Smarty、Node.js、Tcl、TemplateToolkit 和 PHP 等所有语言,是 Sublime Text 自带代码提示功能基础上一个更好的扩展,自带代码提示功能只可提示系统代码,而SublimeCodeIntel则可以提示用户自定义代码。SublimeCodeIntel支持跳转到变量、函数定义的功能,另外还有自动补全的功能,十分方便。

插件下载:https://github.com/SublimeCodeIntel/SublimeCodeIntel


1.   6.FileDiffs

FileDiffs插件可以让开发者比较两个不同文件的差异,比较的对象包括当前文件、另一文件、剪切板中的代码甚至未保存文件等。

插件下载:https://github.com/colinta/SublimeFileDiffs


1.   7.SublimeLinter

SublimeLinter是少数几个能在sublime text 3工作的代码检查插件,SublimeLinter支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多种开发语言,但前提是需要配置相应语言的环境,要检查JavaScript代码需要安装node.js,检查PHP代码需要安装PHP并配置环境等。SublimeLinter可以及时提示编写代码中存在的不规范和错误的写法,并培养我们良好的编码习惯和风格。

插件下载:https://github.com/SublimeLinter/SublimeLinter/tree/sublime-text-3


1.   8.Alignment

Aligment插件让开发者自动对齐代码,包括PHP、CSS、JavaScript语言。使得代码看起来更整齐美观,更具可读性。

插件下载:https://github.com/wbond/sublime_alignment


Sublime Text 3中的插件种类繁复,功能强大,以上是开发者最常用的8大插件,希望给各位开发者节省插件选择的时间,提供编写代码的效率。


五、sublime快捷键

Sublime Text 3非常实用,但是想要用好,一些快捷键不可或缺,所以转了这个快捷键汇总。

用惯了vim,有些快捷键也懒得用了,尤其是在win下面,还有图形界面,所以个人觉得最有用的还是搜索类,对于阅读和修改代码来说,非常实用。


选择类

  • 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+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 3 取消自动检查更新的解决办法以及注册的方法
  • 在使用sublime text 3的时候,有自动更新的话再打开的时候总是提醒更新,这让我这个强迫症重度患者非常难受,要取消自动检查更新,点击菜单栏“Preferences”=> "Settings-User"将里面修改为如下:
    {
        "color_scheme": "Packages/Colorcoder/Monokai (Colorcoded).tmTheme",
        "font_size": 17,
        "ignored_packages":
        [
        ],
        "update_check": false,
    }
    红色部分为修改的部分,看网上都是这样写的,就这样试了试,很不幸,没有成功。。。
    为什么呢?后来猜想是因为我的ST没有注册的缘故吧,然后就注册一下试试,点击菜单-help-Enter License,输入:
    —– BEGIN LICENSE —–
    Andrew Weber
    Single User License
    EA7E-855605
    813A03DD 5E4AD9E6 6C0EEB94 BC99798F
    942194A6 02396E98 E62C9979 4BB979FE
    91424C9D A45400BF F6747D88 2FB88078
    90F5CC94 1CDC92DC 8457107A F151657B
    1D22E383 A997F016 42397640 33F41CFC
    E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
    5CDB7036 E56DE1C0 EFCC0840 650CD3A6
    B98FC99C 8FAC73EE D2B95564 DF450523
    —— END LICENSE ——

1 0