##Sublime 3安装 ###下载安装 [官方下载地址](http://www.sublimetext.com/3) ###破解 >https://fatesinger.com/100237 加入到hosts文件 127.0.0.1 www.sublimetext.com 127.0.0.1 license.sublimehq.com Windows : c:/windows/system32/drivers/etc/hosts Linux : /etc/hosts Mac : /Private/etc ----- BEGIN LICENSE ----- sgbteam Single User License EA7E-1153259 8891CBB9 F1513E4F 1A3405C1 A865D53F 115F202E 7B91AB2D 0D2A40ED 352B269B 76E84F0B CD69BFC7 59F2DFEF E267328F 215652A3 E88F9D8F 4C38E3BA 5B2DAAE4 969624E7 DC9CD4D5 717FB40C 1B9738CF 20B3C4F1 E917B5B3 87C38D9C ACCE7DD8 5F7EF854 86B9743C FADC04AA FB0DA5C0 F913BE58 42FEA319 F954EFDD AE881E0B ------ END LICENSE ------ ###主题 大量[第三方主题](https://sublime.wbond.net/browse/labels/theme) - 安装方法一:使用Package Control:Install Package安装 command/ctrl+shift+p打开命令板,输入install,选择Install Package并按回车键,再输入主题名字并按回车键,即可安装该主题 - 安装方法二: 主题文件下载后放到Packages目录下,在用户配置文件中 1. tomorrow-theme [下载地址](https://github.com/theymaybecoders/ 2. -tomorrow-theme.git) 2. material-theme [下载地址](https://github.com/equinusocio/material-theme) 3. Nuxus-theme [下载地址](https://packagecontrol.io/packages/Theme%20-%20Nexus) 推荐 4. Boxy-theme ###配置 Preferences -> Settings -> User { "auto_complete_commit_on_tab": true, "bold_folder_labels": true, "default_encoding": "UTF-8", "draw_minimap_border": false, "ensure_newline_at_eof_on_save": true, "fade_fold_buttons": false, "file_exclude_patterns": [ ".DS_Store", "*.pid", "*.pyc" ], "folder_exclude_patterns": [ ".git", "__pycache__", ".idea" ], "font_size": 14, "ignored_packages": [ "Vintage" ], "line_numbers": true, "line_padding_bottom": 3, "line_padding_top": 3, "match_selection": true, "save_on_focus_lost": true, "spell_check": false, "tab_size": 4, "theme": "Adaptive.sublime-theme", "translate_tabs_to_spaces": true, "trim_trailing_white_space_on_save": false, "update_check": false } ###安装插件 >[15个插件推荐](https://www.oschina.net/translate/15-awesome-sublime-text-plugins-for-web-development?cmp) >[插件库](https://packagecontrol.io) #插件安装 Package Control 快捷键 Ctrl + Shift + P 输入 Install 选择 Install Package #中文支持 ChineseLocalizations 汉化,Help -> Language ConvertToUTF8 将文件编码从GBK转换成UTF8,File -> Set File Encoding to / Reload with Encoding codecs33 ConvertToUTF8在sublime3中无法使用时安装 #主题 Material Theme Material主题 A File Icon Material主题需要安装 ColorSublime 主题预览安装 MarkdownExtended markdown显示主题 #界面 SideBarEnhancement 侧边栏增强工具,文件定义引用跳转 BracketHighlighter 括号、引号匹配高亮显示 #格式化 Alignment 进行智能对齐,选中代码,Ctrl+Alt+A AutoPep8 格式化Python代码 CodeFormatter 自动格式化代码,支持多种编程语言,需要指定编程语言路径(html格式化不好用) HTML-CSS-JS Prettify 对于html,css,js这个好用 HTMLBeautify 格式化HTML代码 CSS Format 格式化CSS代码 JsFormat 格式化JS代码 #编程 Emmet 前端开发神器 Jedi Python智能代码补全 DocBlockr 自动补全注释插件 SublimeLinter 语法检查工具 SublimeCodeIntel 代码智能提示 HTML5 HTML snippets(可选) JQuery JQuery snippets #Markdown Markdown Editing 高亮显示Markdown语法 OmniMarkupPreviewer 预览markdown 编辑的效果,同样支持渲染代码高亮的样式 #辅助 FileDiffs 对比文件区别 SublimeTmpl 提供常用文件的模板 SublimeREPL 多种脚本语言的执行环境 SFTP FTP工具 GIT GIT工具 ####Package Control - 方法一代码安装: ctrl + ~ 打开控制台,粘贴python代码进去并按回车键执行 #Sublime Text3 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()) #Sublime Text 2: import urllib2,os; 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( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation') - 方法二手动安装: 1. 点击Preferences > Browse Packages菜单 2. 进入打开的目录的上级目录,进入Installed Packages目录 3. 下载[Package Control.sublime-package](https://sublime.wbond.net/Package%20Control.sublime-package) ,复制到Installed Packages目录中 4. 重启Sublime Text ####编程 - SublimeTmpl:提供常用文件的模板 - SublimeCodeIntel:代码智能提示 "Python": { "python":"D:/Python27/python.exe", "pythonExtraPaths": [ "D:/Python27", "D:/Python27/DLLs", "D:/Python27/Lib", "D:/Python27/Lib/lib-tk", "D:/Python27/Lib/site-packages" ] } "Python3": { "python3": "/Users/admin/venv36/bin/python", "codeintel_scan_extra_dir": [ "/Users/admin/venv36", "/Users/admin/venv36/lib", "/Users/admin/venv36/lib/site-packages", "/Users/admin/venv36/lib/python3.6", ], "codeintel_scan_files_in_project": true, "codeintel_selected_catalogs": [] }, For Mac OS X: Jump to definition = Control+Click Jump to definition = Control+Command+Alt+Up Go back = Control+Command+Alt+Left Manual Code Intelligence = Control+Shift+space For Linux: Jump to definition = Super+Click Jump to definition = Control+Super+Alt+Up Go back = Control+Super+Alt+Left Manual Code Intelligence = Control+Shift+space For Windows: Jump to definition = Alt+Click Jump to definition = Control+Windows+Alt+Up Go back = Control+Windows+Alt+Left Manual Code Intelligence = Control+Shift+space - Jedi:Python智能代码补全 - FileDiffs:对比文件区别 - SublimeLinter:语法检查工具 安装SublimeLinter-php,配置 { "paths": { "linux": [], "osx": ["/usr/bin/"], "windows": [] }, "lint_mode": "save", } Show all error ctrl+cmd+A Lint this view ctrl+cmd+L Goto next error ctrl+cmd+E Goto prev error ctrl+cmd+shift+E ####界面 - SideBarEnhancement:侧边栏增强工具 - BracketHighlighter:括号、引号高亮 配置括号高亮度显示 { "bracket_styles": { "default": { "icon": "dot", // "color": "entity.name.class", "color": "brackethighlighter.default", "style": "highlight" }, "unmatched": { "icon": "question", "color": "brackethighlighter.unmatched", "style": "highlight" }, "curly": { "icon": "curly_bracket", "color": "brackethighlighter.curly", "style": "highlight" }, "round": { "icon": "round_bracket", "color": "brackethighlighter.round", "style": "highlight" }, "square": { "icon": "square_bracket", "color": "brackethighlighter.square", "style": "highlight" }, "angle": { "icon": "angle_bracket", "color": "brackethighlighter.angle", "style": "highlight" }, "tag": { "icon": "tag", "color": "brackethighlighter.tag", "style": "highlight" }, "single_quote": { "icon": "single_quote", "color": "brackethighlighter.quote", "style": "highlight" }, "double_quote": { "icon": "double_quote", "color": "brackethighlighter.quote", "style": "highlight" }, "regex": { "icon": "regex", "color": "brackethighlighter.quote", "style": "outline" } } } - ColorSublime:主题预览安装 安装后输入colorsublime install即可安装color scheme ####格式化 - HTMLBeautify:格式化HTML - AutoPEP8:格式化Python代码 ctrl+shift+8 进行pep8格式化,ctrl+8 进行预览 - Alignment:进行智能对齐。 ctrl+command+A 缩进、对齐字符 - CodeFormatter:自动格式化代码,支持多种编程语言,需要指定编程语言路径 ctrl+command+F 格式化代码 HTML的格式化配置需要改为下面内容 "codeformatter_html_options": { "syntaxes": "html,blade,asp,xml", // Syntax names which must process HTML formatter "format_on_save": true, // Format on save "formatter_version": "regexp", // Which formatter to use. Current options are "bs4" and "regexp". If an error occurs while loading the bs4 formatter, the regexp formatter will automatically be used "indent_size": 4, // indentation size "indent_char": " ", // Indentation character "indent_with_tabs": true, // Indent with one tab (overrides indent_size and indent_char options) "exception_on_tag_mismatch": false, // If the last closing tag is not at the same indentation level as the first opening tag, there's probably a tag mismatch in the file "expand_javascript": true, // (Under construction) Expand JavaScript inside of <script> tags (also affects CSS purely by coincidence) "expand_tags": true, // Expand tag attributes onto new lines "minimum_attribute_count": 2, // Minimum number of attributes needed before tag attributes are expanded to new lines "first_attribute_on_new_line": false, // Put all attributes on separate lines from the tag (only uses 1 indentation unit as opposed to lining all attributes up with the first) "reduce_empty_tags": true, // Put closing tags on same line as opening tag if there is no content between them "custom_singletons": "" // Custom singleton tags for various template languages outside of the HTML5 spec }, ####命令行 - sublimeREPL:多种脚本语言的执行环境 ####前端开发 - Emmet:前端开发神器 >[https://www.w3cplus.com/tools/emmet-cheat-sheet.html](https://www.w3cplus.com/tools/emmet-cheat-sheet.html) 后代:> nav>ul>li 兄弟:+ div+p+bq 上级:^ div+div>p>span+em^bq div+div>p>span+em^^bq 分组:() div>(header>ul>li*2>a)+footer>p (div>dl>(dt+dd)*3)+footer>p 乘法:* ul>li*5 自增符号:$ ul>li.item$*5 h$[title=item$]{Header $}*3 ul>li.item$$$*5 ul>li.item$@-*5 ul>li.item$@3*5 属性(ID、类属性、自定义属性) #header .title form#search.wide p.class1.class2.class3 p[title="Hello world"] [a='value1' b="value2"] td[rowspan=2 colspan=3 title] 文本 a{Click me} p>{Click }+a{here}+{ to continue} 隐式标签 .class em>.class ul>.class table>.row>.col ####Markdown - OmniMarkupPreview:网页中预览markdown,支持局域网预览 下面配置中去掉"strikeout",否则会报错404 "extensions": ["tables", "strikeout", "fenced_code", "codehilite"] - MarkdownEditing:markdown语法编辑 - MarkdownExtended:markdown显示主题 ##Sublime使用技巧 >https://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html ###配置技巧 ####侧边栏打开多个目录 Project - Add Folder to Project ###编辑 ####基本编辑 ctrl + enter 下面新增一行并跳转到新行 ctrl + shift + enter 上面新增一行并跳转到新行 ctrl + ←/→ 逐词移动 ctrl + shift + ←/→ 逐词选择 ctrl + ↑/↓ 移动当前显示区域 ctrl + shift + ↑/↓ 移动当前行 ####选择(多重选择) ctrl + D 选择当前光标所在词 ctrl + D 选择该词的下一个位置 ctrl + K 跳过 ctrl + U 回退 Esc 退出多重编辑 ###窗口&标签 ####窗口 ctrl + shift + N 创建新窗口 ctrl + W 窗口内没有标签时,关闭窗口 ####标签 ctrl + N 创建新标签 ctrl + W 关闭标签 ctrl + shift + T 恢复刚关闭的标签 ####分屏 alt + shift + 1 单屏 alt + shift + 2 左右2屏 alt + shift + 3 左右3屏 alt + shift + 4 左右2屏 alt + shift + 5 上下左右分屏 alt + shift + 8 上下2屏 alt + shift + 9 上下3屏 ##编码Coding ###编码规范 // 设置tab的大小为2 "tab_size": 2, // 使用空格代替tab "translate_tabs_to_spaces": true, // 添加行宽标尺 "rulers": [80, 100], // 显示空白字符 "draw_white_space": "all", // 保存时自动去除行末空白 "trim_trailing_white_space_on_save": true, // 保存时自动增加文件末尾换行 "ensure_newline_at_eof_on_save": true,