sublime text 想必很多人在用吧,谈谈我个人的使用情况。也为了总结一下,万一哪天从新安装它时,也知道自己都在用哪些技巧和插件以及配置方法。
- 滚轮中键按住滚动
- 按住shift + 右键 +滚动滚轮
- ctrl + alt +down/up (与win10 冲突,禁止win10的快捷键即可,桌面右击——图形选项——快捷键)
上面三个都是垂直选择,适用同时编辑。如果想回复到单选情况,按Esc
- Ctrl-Shift-v:自适应缩进粘贴,自动缩进,相当不错。
ctrl + d和ctrl + k:ctrl + d选择,ctrl + k掠过选择(在js中针对变量特别好用)
ctrl + d选择了变量i但是没有选择list里的i,按一次选一次,在第二个我时按了CTRL + K(没有变化提示,必须选择下一个后才能看出来按CTRL + K的那个变量没有被选择)掠过了它。
- alt + f3:同类全选。选择一个,按alt + f3,下图感受同类
- Ctrl + Shift + up/down: 上下两行切换位置。
ctrl + p: 预览文件,输入想要的文件名即可查找。
ctrl + g :跳行查找
- ctrl + m : 选择相匹配的括号。(函数大括号的结尾)
- ctrl + shift + m: 选择括号开始和结束之间的内容
当你在修改以上线的兼容性问题时,在浏览器上发现线上的多少行css样式需要修改,那这时候你就可以用跳行了。
二、用户设置
Preferences > setting 右侧是用户的设置,左侧是默认的设置,用户设置覆盖默认设置。
{
"color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
"disable_tab_abbreviations": true, //禁用 Emmet的tab键功能(请使用 ctrl+e)
"draw_minimap_border": true, // 用于右侧代码预览时给所在区域加上边框,方便识别
"highlight_line": true, // 当前行高亮,很好的提示效果。
"font_size": 14, // 字体大小。
"settings": {"expand_tabs_on_save": true}, // 这个貌似可以忽略,
"expand_tabs_on_save": true, // 保存自动tab缩进转换为空格,需要额外的配置
"highlight_modified_tabs": true, // 高亮未保存文件,很好的提示效果。
"auto_find_in_selection": true,
"draw_white_space": "all" , // 显示空白字符,有利于去掉多余的空白
"ignored_packages":
[
"Vintage"
], // 设置忽略内容,的文件检索功能找到特定的文件,比如你不想检索node_modules里的内容。添加进去即可
"tab_size": 4, // 四个空格缩进
"preview_on_click": false, // 点击左侧的文件自动打开。我不太喜欢这个
"drag_text": false, // 选中的文本可以拖动,偶尔误操作。关掉。
"font_face": "Microsoft YaHei Mono", // 换个字体换个心情
"translate_tabs_to_spaces": true, //tab缩进转换为空格缩进
"trim_trailing_white_space_on_save": true, //自动移除行尾多余空格,献给处女座
"word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?" // 双击选择,遇到如下符号停止,我去掉了中线
}
关于上边的保存自动把tab缩进转化为空格缩进的配置和问题。
请戳这里原网址
设置步骤:
1.打开sublime的Preference - > Browser Packages
2.新建一个目录(文件夹)ExpandTabsOnSave
3.在上边新建的文件夹内新建文件ExpandTabsOnSave.py4.把下面内容复制进去,保存
import sublime, sublime_plugin, os
class ExpandTabsOnSave(sublime_plugin.EventListener):
def on_pre_save(self, view):
if view.settings().get('expand_tabs_on_save') == 1:
view.window().run_command('expand_tabs')
5.全局改变,打开Preferences -> Settings - User添加(下面的写法应该是是ST2的,ST3应该是我上边的写法,不用写settings,因为下面在ST3貌似不生效。):
"settings": {
"expand_tabs_on_save": true
}
三、插件设置
1、安装Package Control
操作:package Control官网—Install Now —复制ST3的代码 — 打开ST3的console (ctrl + ` 或 view —show console)
— 粘贴回车 —完成后重启 — Ctrl+Shift+P — 输入PC(即:package control)打开检索框—搜索插件
2、各类插件
emmet:
- 支持cheat sheet,tab键html自动补全,css兼容性写法,缩写等等,安上即用。
- 上面用户设置里禁用了它的tab键,默认变为ctrl + e触发。
color hightlighter :
- 颜色高亮提示,css很好用。安上即用
ConvertToUTF8:
- 编码设置,采用utf-8,解决中文乱码问题,安上即用
sublime Linter & SublimeLinter-contrib-eslint & eslint:
- eslint套装插件,编写高质量的js代码。需要配置
standard:
- 同上的eslint,一个比较规范的标准配置。需要配置
AutoPrefixer:
- 自动补全浏览器私有属性前缀,兼容性数据从著名的 can I use 读取。需要配置。
sass:
- sass预处理必备,高亮提示。安上即用
sublimecodeintel:
- js自动补全功能,需要配置。
expand_region :
- 向外扩展,范围选择,需要配置
goto definition :
- 跳转,当你声明一个函数,并且在下面调用了它,当你用该插件时就会直接跳转。
其实上面这些插件,有些重复的功能,很类似,但是也有不同。看自己需求了。其实emmet提供了很多功能,详细了解[emmet](http://docs.emmet.io/ )
四,插件配置和使用
1,AutoPrefixer配置,
a、Preferences>Packages Settings> AutoPrefixer>设置用户设置兼容性写法。
{
"browsers": ["last 2 version", "> 0.1%", "> 5% in US", "ie 6-8","Firefox < 20"]
}
b、Preferences>Key Binding > user 绑定。
[
{ "keys":[ "Ctrl + Alt + Shift + p"], "command": "autoprefixer"}
]
2,sublimecodeintel配置
Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut
"codeintel_selected_catalogs": ["jQuery"] 修改为 "codeintel_selected_catalogs": ["JavaScript"]
3、expand_region 配置
[
{ "keys": ["ctrl+shift+space"], "command": "expand_region" },
{
"keys": ["ctrl+space"],
"command": "expand_region",
"args": {"undo": true},
"context": [{ "key": "expand_region_soft_undo" }]
}
]
扩散性选择,首先光标放到用户名的位置,按一下快捷键选择用户名,再一下选择整个span,再一下选择li的内部所有。(emmet貌似有类似的功能)
注意:
1、插件安装都是采用ctrl + shift + p — Package Control;
2、 如果你绑定了多个自己的快捷键,请都在同一个[]内。不要每个都写一个[]。
补充:
hexo用了ejs的模版引擎,对其设置高亮提示,
browse Packages — user — 新建HTML.sublime-settings—输入如下代码。
{
"extensions":
[
"ejs"
]
}
4、View in Browser
- 直接在编辑器通过快捷键用默认浏览器打开静态页。
{ "keys":["ctrl+shift+alt+g"], "command": "open_in_browser"} //绑定自己的快捷键
5、code formatter
- 格式化插件。默认相关配置package setting —— code formatter ——setting default里。需要改什么自己设置即可。默认快捷键 ctrl + alt + f
{
"codeformatter_html_options": {
"syntaxes": "html,asp,xml", // Syntax names which must process HTML formatter
"format_on_save": false, // Format on save
"indent_size": 4, // indentation size
"indent_char": " ", // Indentation character
"indent_with_tabs": true, // Indent with one tab (overrides indent_size and indent_char options)
"reduce_whole_word_tags": true,
"exception_on_tag_mismatch": true,
"expand_javascript": false,
"reduce_empty_tags": true,
"preserve_newlines": true, // Preserve existing line-breaks
"max_preserve_newlines": 10, // Maximum number of line-breaks to be preserved in one chunk
"indent_tags": "html|head|body|div|nav|ul|ol|dl|li|table|thead|tbody|tr|th|blockquote|select|form|optgroup|fieldset|legend|label|header|section|aside|footer|figure|video|datalist|keygen|audio|embed|source|track|output|article|bdi|details|dialog|figcaption|main|mark|menuitem|meter|nav|progress|rp|rt|ruby|summary|time|wbr" // List of tags (defaults to indent) that should be reformatted. Example "div|p|li|table"
},
"codeformatter_css_options":
{
"syntaxes": "css,less", // Syntax names which must process CSS formatter
"format_on_save": false, // Format on save. Either a boolean (true/false) or a string regexp tested on filename. Example : "^((?!.min.|vendor).)*$"
"indent_size": 4, // Indentation size
"indent_char": " ", // Indentation character
"indent_with_tabs": false, // Indent with one tab (overrides indent_size and indent_char options)
"selector_separator_newline": true, // Add new lines after selector separators
"end_with_newline": true, // Add new line of end in file
"newline_between_rules": false, // Add new line between rules
"eol": "\n" // EOL symbol
},
"codeformatter_js_options":
{
"syntaxes": "javascript,json", // Syntax names which must process JS formatter
"format_on_save": false, // Format on save. Either a boolean (true/false) or a string regexp tested on filename. Example : "^((?!.min.|vendor).)*$"
"indent_size": 2, // indentation size
"indent_char": " ", // Indent character
"indent_with_tabs": false, // Indent with one tab (overrides indent_size and indent_char options)
"eol": "\n", // EOL symbol
"preserve_newlines": true, // whether existing line breaks should be preserved,
"max_preserve_newlines": 10, // maximum number of line breaks to be preserved in one chunk
“space_in_paren”:false,//在paren中添加填充空格,即。f(a,b)
“space_in_empty_paren”:false,//如果父项为空,则在paren内添加填充空格。f()
“e4x”:false,//通过未触及的
“jslint_happy” 传递E4X xml文字:false,//如果为true,则jslint-stricter模式被强制执行。示例function()vs function()
“brace_style”:“collapse”,//“collapse”| “展开”| “最终展开”。将大括号放在与控制语句(默认值)相同的行上,或者将大括号放在自己的行上(Allman / ANSI样式),或者只将末尾大括号放在自己的行上。
“keep_array_indentation”:true,//保持数组缩进。
“
"eval_code": false, // eval code
"unescape_strings": false, // Decode printable characters encoded in xNN notation
"wrap_line_length": 0, // Wrap lines at next opportunity after N characters
"break_chained_methods": true, // Break chained method calls across subsequent lines
"end_with_newline": true, // Add new line at end of file
"comma_first": false // Add comma first
}
}
6、goto definition (这里可能不是很对了,由于某次编辑保存时被谷歌自动翻译给翻译了)
1、
Windows新建: Default(Windows).sublime-mousemap\Sublime Text 3\Packages\User。
2,在Default(Windows).sublime-mousemap内输入如下:
// button1左键,button2右键。//
修饰符绑定ctrl和alt。
[
{
“button”:“button1”,
“count”: 1,
“modifiers”:[“ctrl”,“alt”],
“press_command”:“drag_select”,
“command”:“goto_definition”
}
]
alt + d
会打开对应文件。
1、去open-include的github下载包
2、解压——重命名文件夹Open-Include——放到ST3的Package里
3、复制一份Open-Include.sublime-settings到Package-user文件夹下。
8. ClickableUrls
光标放在网址处。按ctrl + alt + enter
打开网址。
1,去ClickableUrls的github上下载包2,解压-重命名文件夹ClickableUrls–放到ST3的包装里
9 autofilename自动找到文件,这个不用说,必备方便的不行。
1,去autofilename的github下载包
2,解压 - 重命名文件夹AutoFileName–放到ST3的Package里
10.侧栏增强增强对左侧栏目操作的功能
2018-1-13日更新:
snipaste + sublime 的 SublimeHighlight插件,
- snipaste有贴图功能,且对于html格式的内容可以带格式贴图,复制后按F3即可生成剪切板的贴图。
- sublime 的 SublimeHighlight插件,可以复制html格式的内容,看一下下图即明白了。
当然,这个只是为了展示snipaste的强大功能,毕竟编辑器都有分栏的功能,不过有些时候snipaste也是蛮有用的。