ST3--Mac篇 · 程序員的自我修養

# Sublime Text 3--Mac版 Mac篇其實應該和Windows差不多，主要區別是一些按鍵的設置和插件的配置。 ### 特色功能 - super+p，搜索。這個搜索可以左側的Folders里所以文件，而且是模糊搜索，不需要完整的文件名。配合#, @, :可以搜索變量，函數，行數。 - 多行編輯。按住super加左擊，可以出現多個光標位置。 - 多重選擇， super+d可以多重選擇，結合光標鍵，可以批量修改。 - 多屏編輯，super+alt+數字鍵。 - Projects，通過View->Side Bar->show Side Bar左側文件結構管理。 - snippet, 不同格式的文件，可以設置不同的snippet,就是簡寫，通過tab擴展成相應的內容。 - 各種插件支持 - 正則表達式搜索,比如我要刪除所有的空行，可以使用`^[\s]*\n`來選擇所有空行。可以使用`(?<=<h2>).+(?=</h2>)`來匹配h2標簽內的內容。 - super+shift+p，功能菜單。只有你想不到，沒有做不到的事情。 ### 下載安裝 ST3雖然沒有提供穩定版本，但是相比ST2，速度提升還是很明顯的。缺點就是插件不夠完善，以及插件的編寫全部采用Python3.x版本。這里給出ST3[下載地址](http://www.sublimetext.com/3)。個人最喜歡的一點新特性是：新增了跳轉到函數定義處功能，在大菜單Goto中可以查看到。首次使用，建議先打開側欄，方便管理文件結構。打開方式:`View->Side Bar->Show Side Bar`。 ### 插件安裝插件通過[Package Control](https://sublime.wbond.net/installation#Simple)來管理。 ### 安裝Package Control 進入Package Control頁面，選擇對應版本的代碼進行復制，比如ST3如下： ~~~ import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; 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://sublime.wbond.net/' + 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) ~~~ 使用`View->Show Console`打開控制臺，粘貼復制的代碼，敲擊回車運行。待程序右下角提示`success`后，重啟ST。再次進入ST后，可以通過菜單`Preferences->Package Control`或者按鍵`ctrl+shift+p`查找`install package`。輸入對應的插件名稱，即可安裝插件。更多插件，可以通過Package Control中的[search](https://sublime.wbond.net/search)查找。 ### 配置修改配置包括Preferences->Settings-Default和Key Bindings-Default。修改配置文件時，以上兩個默認文件最好不要修改，自行講需要設置的參數寫入到Settings-User和Key Bindings-User里，它們會自動覆蓋Default相同屬性。 ### 備份配置配置文件的路徑，點擊Preferences->Browse Packages打開目錄，找到User目錄，這里的文件就是自己的配置文件，最好備份，方便下次替換。 ### 插件推薦 ### 已安裝的插件 ~~~ { "in_process_packages": [ ], "installed_dependencies": [ "0_package_control_loader", "bz2" ], "installed_packages": [ "AlignTab", "All Autocomplete", "AutoFileName", "BracketHighlighter", "CSScomb", "DocBlockr", "EditorConfig", "Emmet", "Git", "HTML-CSS-JS Prettify", "JSHint Gutter", "LiveStyle", "Markdown Preview", "Modific", "Package Control", "SideBarEnhancements", "Sublimerge Pro", "Terminal", "Theme - Phoenix" ] } ~~~ ### 主題配色和代碼配色配色其實分為主題配色和代碼配色。主題配色就是程序的外形設置，代碼配色則是打開文件高亮顯示的配置。代碼配色我是選擇的自己備份的主題`Peacock (SL).tmTheme`,放置在了`Packages/User/theme/`目錄下，主要是我針對`markdown`語法進行了設置，其他可選擇的推薦`Dayle Rees Color Schemes`插件。主題配色我使用的是`Theme-Phoenix`插件，插播一句，編程的字體應該選擇等寬類型的，所以Mac下選擇的是`Monaco`字體。安裝完了插件，可以在`Perferences->Color Scheme`中查看修改。也可以通過配置文件修改： ~~~ { "caret_style": "phase", "color_scheme": "Packages/User/theme/Peacock (SL).tmTheme", "default_line_ending": "unix", "font_face": "Monaco", "font_size": 18.0, "highlight_line": true, "hot_exit": false, "highlight_modified_tabs": true, "show_encoding": true, "ignored_packages": [ "Vintage" ], "original_color_scheme": "Packages/User/theme/Peacock (SL).tmTheme", "phoenix_color_green": true, "phoenix_dirty_bottom_bar_red": true, "phoenix_eighties": true, "phoenix_highlight_current_tab": true, "phoenix_sidebar_tree_large": true, "phoenix_solid_current_tab": true, "phoenix_tabs_medium": true, "rulers": [ 80, 100, 120 ], "soda_folder_icons": false, "tab_size": 4, "theme": "Phoenix Dark.sublime-theme", "translate_tabs_to_spaces": true, "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?", "word_wrap": true, "wrap_width": 0 } ~~~ 這里我列出的是我的全部配置文件，可以看到相關的主題配色、代碼配色和字體設置。 ### ST輔助類 - **SideBarEnhancements**提升右側導航欄功能 - **Sublimerge Pro**文件對比功能 - **Markdown Preview**書寫markdown格式文本，預覽等功能。 - **Terminal**直接在對應文件所在目錄打開terminal功能。 ### 代碼顯示輔助類 - **BracketHighlighter**高亮顯示匹配括號，會在左側的行號標識處顯示對應的括號位置和范圍。 - **HTML-CSS-JS Prettify**格式化代碼工具，默認快捷鍵`ctrl+shift+h`。 - **CSScomb**按照一定規律格式化CSS的屬性順序。 ### 代碼書寫輔助類 - **Emmet**必裝插件，輔助書寫HTML, CSS。 - **AutoFileName**書寫代碼時，自動提示補充文件路徑。 - **DocBlockr**輔助書寫注釋。 - **JSHint Gutter**利用`jslint`檢測js代碼是否規范的插件。 - **LiveStyle**配合對應的chrome插件，可以達到修改文件后，自動刷新頁面的效果。但目前對`less`,`sass`之類預編譯語言支持不夠好。 - **AlignTab**變量豎向對齊工具。 - **All Autocomplete**代碼補全插件。 - **EditorConfig**代碼編碼規范。 - **MultiEditUtils**增強了SublimeText內置的“multi-cursor”和“multi-selection”功能 ### 使用技巧 ### 快捷鍵操作默認的快捷操作，可以查看`Preferences->Key Binding`，或者文檔:[Keyboard Shortcuts-Windows/Linux](http://docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_win.html)和[Keyboard Shortcuts-OSX](http://docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_osx.html)。個人常用的快捷鍵設置如下： ~~~ [ /*============= Emacs Style =============*/ { "keys": ["ctrl+b"], "command": "move", "args": {"by": "characters", "forward": false} }, { "keys": ["ctrl+f"], "command": "move", "args": {"by": "characters", "forward": true} }, { "keys": ["ctrl+p"], "command": "move", "args": {"by": "lines", "forward": false} }, { "keys": ["ctrl+n"], "command": "move", "args": {"by": "lines", "forward": true} }, { "keys": ["ctrl+a"], "command": "move_to", "args": {"to": "bol", "extend": false} }, { "keys": ["ctrl+e"], "command": "move_to", "args": {"to": "eol", "extend": false} }, { "keys": ["ctrl+l"], "command": "show_at_center" }, /*============= End Emacs Style =============*/ /*============= switch tabs =============*/ { "keys": ["ctrl+1"], "command": "select_by_index", "args": { "index": 0 } }, { "keys": ["ctrl+2"], "command": "select_by_index", "args": { "index": 1 } }, { "keys": ["ctrl+3"], "command": "select_by_index", "args": { "index": 2 } }, { "keys": ["ctrl+4"], "command": "select_by_index", "args": { "index": 3 } }, { "keys": ["ctrl+5"], "command": "select_by_index", "args": { "index": 4 } }, { "keys": ["ctrl+6"], "command": "select_by_index", "args": { "index": 5 } }, { "keys": ["ctrl+7"], "command": "select_by_index", "args": { "index": 6 } }, { "keys": ["ctrl+8"], "command": "select_by_index", "args": { "index": 7 } }, { "keys": ["ctrl+9"], "command": "select_by_index", "args": { "index": 8 } }, { "keys": ["super+shift+t"], "command": "reopen_last_file" }, /*============= End switch tabs =============*/ /*============= Modify Default key-mapping =============*/ { "keys": ["super+a"], "command": "select_all" }, { "keys": ["super+t"], "command": "new_file" }, { "keys": ["f5"], "command": "open_in_browser" }, // autocomplate { "keys": ["ctrl+/"], "command": "auto_complete" }, // paste { "keys": ["super+v"], "command": "paste_and_indent" }, { "keys": ["super+shift+v"], "command": "paste" }, // reindex { "keys": ["ctrl+i"], "command": "reindent" }, // find and goto { "keys": ["super+f"], "command": "show_panel", "args": {"panel": "find"} }, { "keys": ["super+p"], "command": "show_overlay", "args": {"overlay": "goto", "show_files": true} }, { "keys": ["super+r"], "command": "show_overlay", "args": {"overlay": "goto", "text": "@"} }, { "keys": ["super+l"], "command": "show_overlay", "args": {"overlay": "goto", "text": ":"} }, { "keys": ["super+;"], "command": "show_overlay", "args": {"overlay": "goto", "text": "#"} }, { "keys": ["super+d"], "command": "goto_definition" }, { "keys": ["super+-"], "command": "jump_back" }, { "keys": ["super+="], "command": "jump_forward" }, // keep the shortcut as Windows { "keys": ["ctrl+d"], "command": "find_under_expand" }, { "keys": ["ctrl+g"], "command": "find_all_under" }, { "keys": ["ctrl+j"], "command": "join_lines" }, { "keys": ["ctrl+shift+j"], "command": "expand_selection", "args": {"to": "indentation"} }, { "keys": ["ctrl+shift+k"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Line.sublime-macro"} }, /*============= End Modify Default key-mapping =============*/ /*============= Plugin =============*/ // Emmet expand {"keys": ["super+e"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"} ] }, // js Hint Grunt {"keys": ["super+j"], "command": "jshint"}, // markdown preview { "keys": ["super+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }, // terminal { "keys": ["ctrl+super+t"], "command": "open_terminal" }, { "keys": ["ctrl+shift+super+t"], "command": "open_terminal_project_folder" } /*============= End Plugin =============*/ ] ~~~ 其中涉及到了emacs移動光標，多標簽切換，以及快速查找等方式。 ### snippet snippet是代碼片段，可以方便的自動補全。創建方式通過`Tools->New Snippet`完成。默認的文件如下: ~~~ <snippet> <content><![CDATA[ Hello, ${1:this} is a ${2:snippet}. ]]></content>     </snippet> ~~~ 代碼段寫在`CDATA[]`中，`${}`為占位字符。 `tabTrigger`為自動補全需要的字符，`scope`設置的是文件格式。創建完成之后，個人建議保存在`User->snippet`目錄下，`snippet`需要自行創建，方便管理。 ### build命令和Macro命令這些命令的使用請參考文檔->[Reference](http://docs.sublimetext.info/en/latest/reference/reference.html)。 ### 參考文檔 - [sublimeText官網](http://www.sublimetext.com/) - [非官方手冊](http://docs.sublimetext.info/en/latest) - [Package Control](https://sublime.wbond.net/installation#Simple) - [推薦！Sublime Text 最佳插件列表](http://blog.jobbole.com/79326/) - [Gif多圖：我常用的 16 個 Sublime Text 快捷鍵](http://blog.jobbole.com/82527/)