search

ONE-SUNDAY / Blog

6 stars 0 forks source link

Sublime Text 不完全指南 #4

Open ONE-SUNDAY opened 8 years ago

ONE-SUNDAY commented 8 years ago

工欲善其事，必先利其器。

Sublime Text 是一款轻量级的代码编辑器，代码界面配色有爱，搭配快捷键和插件口味更佳。

常用快捷键

ST 有许多有效提升开发效率的快捷键，下面主要讲一些常用的：

粘贴代码自动缩进： Ctrl + Shift + V Cmd + Shift + V

选中匹配项： Ctrl + D（Alt + F3选中所有匹配项） Cmd + D（Ctrl + Cmd + G选中所有匹配项）

选中括号间的内容： Ctrl + Shift + A（JS：Ctrl + Shift + M） Cmd + Shift + A（JS：Ctrl + Shift + M）

复制行或选中项： Ctrl + Shift + D Cmd + Shift + D

当前行任意位置插入下一行： Ctrl + Enter Cmd + Enter

当前行任意位置插入上一行： Ctrl + Shift + Enter Cmd + Shift + Enter

当前行或选中项上下位置移动： Ctrl + Shift + Up / Down Ctrl + Cmd + Up / Down

计算数学表达式： Ctrl + Shift + Y Cmd + Shift + Y

以1为步长递增递减数值： Ctrl + Up / Down（以0.1为步长：Alt + Up / Down，以10为步长：Shift + Alt + Up / Down） Ctrl + Up / Down（以0.1为步长：Alt + Up / Down，以10为步长：Cmd + Alt + Up / Down）

常用插件

安装插件前需安装 Package Control，这是一个插件包管理器，能方便的安装、卸载和升级插件，通过 Ctrl + ` 或者 View -> Show Console，根据 ST 的版本输入以下代码：

ST2：

import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

ST3：

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)

完成安装后重启 ST，按 Ctrl / Cmd + Shift + p 输入 Install Package 回车，再输入插件名即可。

插件名 功能介绍
Emmet 快速编写HTML代码（官方教程http://docs.emmet.io/）
SublimeCodeIntel 多语言代码补全提示（可在Preferences -> Package Settings -> SublimeCodeIntel -> Settings — Default禁用不需要的语言补全）
BracketHighlighter 高亮显示匹配的括号、引号和标签
SideBarEnhancements 左侧栏菜单增强（只支持ST3版本）
Terminal 打开当前文件所在目录的终端（快捷键：Ctrl / Cmd + Shift + T与打开上一次Tag快捷键冲突，可在Preferences -> Package Settings -> Terminal -> Key Bindings — Default修改）
Sass 支持Sass语法高亮
All Autocomplete 搜索所有打开的文件，提供匹配补全提示
Markdown Preview 浏览器预览Markdown格式文档，快捷键：Ctrl + Shift + P 输入mppib
ConvertToUTF8 转GBK编码
Tag HTML代码格式化（快捷键：Ctrl + Shift + F，只支持ST3版本）
CSS Format CSS代码格式化
JsFormat JS代码格式化
HTML-CSS-JS Prettify 集成HTML、CSS、JS三种代码格式化（依赖Node.js）

推荐皮肤

Material Theme

{
    // 皮肤
    "theme": "Material-Theme.sublime-theme",
    // 代码配色
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
    // 配置优化（具体功能介绍在下面有讲）
    "overlay_scroll_bars": "enabled",
    "line_padding_top": 3,
    "line_padding_bottom": 3,
    "always_show_minimap_viewport": true,
    "bold_folder_labels": true,
    "indent_guide_options": [ "draw_normal", "draw_active" ],
    "font_options": [ "gray_antialias" ]
}

自定义补全代码 Snippets

比方我频繁使用图片占位图 <img src="http://fpoimg.com/280x280">，但每次都复制粘贴显然效率不高，我们在 Sublime 中选择 Tools -> New Snippet... 创建一个新的代码片段来解决此问题。

<snippet>
    <content><![CDATA[<img src="http://fpoimg.com/${1:280}x${2:280}">]]></content>
    <tabTrigger>imgp</tabTrigger>
</snippet>

编辑好后保存在 Package -> User 目录下为 .sublime-snippet 后缀，这时在页面中输入 imgp 后 Tab键 或 Enter键 就能补全自定义的代码了。

默认配置优化

虽然 ST 中的默认配置已经满足大部分的编程需求，但这不妨碍我们让它更好用。ST2 可直接在 Preferences -> Settings — Default 中修改配置文件，ST3 通过 Preferences -> Settings — User 中 {} 里增加配置信息来修改，下面列举出一些较为实用的一些配置。

{
    "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?", // 定义分隔符。写类名时用中划线来分隔（class="tool-bar"）会发现，中划线在双击时不能全选 `tool-bar` 的，通过删除默认配置定义的 "-" 分隔符实现。

    "trim_trailing_white_space_on_save": true, // 保存时，清除末尾的空格

    "ensure_newline_at_eof_on_save": true, // 保存时，在结尾插入一个换行符

    "default_line_ending": "unix", // 默认使用unix换行符，避免跨平台协作带来的问题

    "save_on_focus_lost": false, // 当前窗口失去焦点时自动保存，根据个人情况使用

    "bold_folder_labels": true, // 加粗左侧栏列表中的文件夹名，方便区分文件夹与文件

    "highlight_line": true, // 高亮光标所在的行

    "indent_guide_options": [ "draw_normal", "draw_active" ],  // 显示光标所在的代码控制域

    "font_options": [ "gray_antialias" ], // 用于 Retina 屏，字变细

    "line_padding_top": 3, // 设置行的上边距

    "line_padding_bottom": 3, // 设置行的下边距

    "always_show_minimap_viewport": true,// 始终高亮右侧迷你地图

    "draw_minimap_border": true, // 开启右侧迷你地图边框

    "highlight_modified_tabs": true, // 高亮修改后未保存的 Tag

    "overlay_scroll_bars": "enabled", // 停止滚动时隐藏滚动条

    "scroll_past_end": true,    // 设置为 false 时，滚动到文本的最下方时，没有缓冲区

    "folder_exclude_patterns": [".svn", ".git", ".hg", "CVS"], // 左侧栏列表隐藏指定后缀文件夹

    "file_exclude_patterns": ["*.pyc", "*.pyo", "*.exe", "*.dll", "*.obj","*.o", "*.a", "*.lib", "*.so", "*.dylib", "*.ncb", "*.sdf", "*.suo", "*.pdb", "*.idb", ".DS_Store", "*.class", "*.psd", "*.db", "*.sublime-workspace"] // 左侧栏列表隐藏指定后缀文件
}