http://www.itdecent.cn/p/25cdc7d608bb
1.下載Sublime Text：http://www.sublimetext.com。終身免費。界面炫酷，簡單小巧。
2.Sublime默認沒有 Nodejs 語法高亮與自動補全，需要下載 Nodejs 插件：https://github.com/tanepiper/SublimeText-Nodejs。
執(zhí)行命令：
gitclonegit://github.com/tanepiper/SublimeText-Nodejs.git~/Library/Application\Support/Sublime\Text\2/Packages/Nodejs
配置
Sublime Text->Preferences->Settings - User，推薦一些配置：
"translate_tabs_to_spaces": true開啟自動將Tab替換為空格
"trim_trailing_white_space_on_save": true開啟自動刪除行末空格
"ensure_newline_at_eof_on_save": true開啟保存文件時在文件末尾保留一個空行
"save_on_focus_lost": true開啟文件失去焦點立即保存
"font_size": 18設(shè)置字體大小，默認10
"highlight_line": true開啟光標所在行高亮
"bold_folder_labels": true開啟側(cè)邊欄文件夾名顯示加粗
插件
可以到官網(wǎng)查找自己喜歡的插件，下面推薦一下插件，歡迎大家編輯補充
Package Control
sublime包安裝工具，安裝方式：
view->show console
輸入下方命令:
import urllib.request,os; pf = 'PackageControl.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())
等待安裝完成即可
All Autocomplete
擴展了sublime只在當前文件進行搜索匹配的自動補全提示，會在所有打開的文件中搜索匹配自動補全提示
AutoFileName
自動補全提示文件名字
Babel
es6語法高亮插件，具體設(shè)置參考這里，可配合Oceanic Next Color Scheme主題。
Bufferscroll
保存折疊行
Clipboard Manager
可以查看剪貼板歷史紀錄，Sublime Text->Preferences->Key Bindings - User，添加以下配置
{"keys": ["super+c"],"command":"clipboard_manager_copy"},{"keys": ["super+x"],"command":"clipboard_manager_cut"},{"keys": ["super+v"],"command":"paste_and_indent"},{"keys": ["super+shift+v"],"command":"clipboard_manager_choose_and_paste"}
查看剪貼板歷史紀錄快捷鍵：cmd+shift+v
CSS3
更好的CSS3語法高亮支持。
CSScomb
格式化css樣式；選中css樣式右鍵選中csscomb即可，還能在usersetting中自定義css格式化規(guī)則！
compare side-by-side
文件對比，打開要對比的文件，在title處單擊右鍵選擇對比即可
DocBlockr
像java等語言的塊注釋，使用方法，/**Tab就ok
EditorConfig
跨編輯器代碼靜態(tài)風格配置sublime插件，配置說明請參考這里。
Emmet
Sublime Zen Coding插件，建議安裝，可以用來快速編寫html/css，具體用法。
javascript completion
javascript api自動補全插件，它相比SublimeCodeIntel的優(yōu)勢是
輕量，只是用來補全javascript api
支持es5語法
有參數(shù)提示
自動糾錯
Java?Script & Node?JS Snippets
js代碼片段，快捷輸入請參考這里。
HTML-CSS-JS Prettify
HTML/css/js/json格式化，快捷鍵：cmd＋shift+h
LESS
less文件代碼高亮顯示
Markdown Extend
markdown文件高亮擴展，文件中的代碼塊也會相應(yīng)高亮。
Markdown Preview
markdown文件預覽查看，編輯略卡，快捷鍵cmd＋shift+p調(diào)用命令行窗口后，輸入preview查找相關(guān)命令
Nodejs
Nodejs API 自動補全
SideBarEnhancements
側(cè)邊欄增強工具，建議安裝，為側(cè)邊欄右鍵菜單增加剪貼，復制，粘貼，瀏覽器中打開等選項
SublimeLinter
Sublime代碼檢查工具。
SublimeLinter-eslint
SublimeLinter的ESLint插件，javascript代碼質(zhì)量檢查工具對比可以參考這里，如何使用這個插件可以參考這里，ESLint的Rules可以查閱官網(wǎng)。
SublimeTmpl
Sublime新建文件模板插件，支持快捷鍵新建，修改內(nèi)置模板，增加自定義模版，具體可以參考這里。
Terminal
終端快捷啟動插件，快捷鍵：cmd＋shift+t，會在終端直接cd到當前文件的父文件夾
可以到colorsublime里查找自己喜歡的主題。下面推薦一些有特色的主題：
支持es6/react語法高亮，需要先安裝babel-sublime語法高亮插件。
Material Theme for Sublime Text 3
Google Material風格主題，同時支持Oceanic Next Color Scheme color theme，不同文件類型會有相應(yīng)的精美icon。
簡約扁平配色看起來很舒服的主題。
我們可以在瀏覽器的console里運行js，也可以在node的REPL里運行js，但是都不是很方便，其實在sublime里也是可以直接運行js的，能夠很方便的幫助我們測試javascript api以及驗證正則。
下面介紹三種在sublime里運行js的方法
JSC為Mac內(nèi)置的javascript控制臺程序。
Tools > Build System > New Build System
在打開的文件中添加如下代碼
{"cmd":["/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc","$file"],"selector":"source.js"}
保存為JSC.sublime-build
Tools > Build System，選擇剛才創(chuàng)建的JSC
打開js文件，cmd+b
注意用debug()替換console.log()，可支持到es5。
首先確保已安裝node
Tools > Build System > New Build System
在打開的文件中添加如下代碼
{"path":"/Users/wangjinliang/.nvm/versions/node/v4.2.3/bin","working_dir":"${project_path:${folder}}","selector":"source.js","encoding":"utf-8","shell":true,"windows":{"cmd":["taskkill /f /im node.exe >nul 2>nul & node $file"]? ? },"osx":{"cmd":["killall node >/dev/null 2>&1; node $file"]? ? },"linux":{"cmd":["killall node >/dev/null 2>&1; node $file"]? ? }}
通過which node獲取node的安裝目錄，添加到對應(yīng)的path屬性上
保存為node.sublime-build
Tools > Build System，選擇剛才創(chuàng)建的node
打開js文件，cmd+b
對es6的支持情況視node版本而定。
首先確保已安裝node，
npm install babel@5.x -g全局安裝babel命令行模塊
Tools > Build System > New Build System
在打開的文件中添加如下代碼
{"path":"/Users/wangjinliang/.nvm/versions/node/v4.2.3/bin","working_dir":"${project_path:${folder}}","selector":"source.js","encoding":"utf-8","shell":true,"windows":{"cmd":["taskkill /f /im node.exe >nul 2>nul & babel-node $file"]? ? },"osx":{"cmd":["killall node >/dev/null 2>&1; babel-node $file"]? ? },"linux":{"cmd":["killall node >/dev/null 2>&1; babel-node $file"]? ? }}
通過which node獲取node的安裝目錄，添加到對應(yīng)的path屬性上
保存為babel.sublime-build
Tools > Build System，選擇剛才創(chuàng)建的babel
打開js文件，cmd+b
全面支持es6，以及部分es7，相比第二種直接通過node運行略慢
與bable5.x有一些區(qū)別，請參考這里。
0.設(shè)置subl命令行 #如果是在默認shell下,?
sudo ln -s "/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl" /usr/bin/subl
alias subl="'/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl'"?
export EDITOR="subl" 測試使用一下命令 $ subl
使用方法?
用法:?
subl [arguments] [files] 編輯指定的文件edit the given files?
or: subl [arguments] [directories] 打開指定的目錄?
or: subl [arguments] - 編輯stdin?
參數(shù)Arguments:?
--project: 載入指定的project
?--command: 運行指定的命令
?-n or --new-window: 打開一個新的窗口?
-a or --add: 添加文件夾到當前窗口?
-w or --wait: 返回前等待文件關(guān)閉?
-b or --background: 不激活該應(yīng)用程序?
-s or --stay: 文件關(guān)閉后保持應(yīng)用程序激活狀態(tài)?
-h or --help: 顯示幫助并退出?
-v or --version: 顯示版本信息并退出 如果從標準輸入--wait是隱式的。?
使用--stay當文件關(guān)閉是不切換到后臺控制臺(只與是否有等待的文件有關(guān)) 文件名可以通過加:line或者:line:column后綴來指定打開的定位。 用法摘自官方文檔
1.修改Sublime Text2 默認配置?
在菜單欄選擇 Sublime Text->Preferences->Setting-User(注意其中Setting-Default是默認的系統(tǒng)配置, 是不可修改的), 通過修改用戶設(shè)置會覆蓋系統(tǒng)對應(yīng)的默認配置,下面是我的配置單, 都加有注釋。?
{ "color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme", #主題設(shè)置, 這是下載主題后, 自動生成的, 也可以手動配置?
"font_size": 15, #設(shè)置字體大小, 我比較喜歡大一點的字體
"ignored_packages": #設(shè)置忽略文件類型, 第二個是默認忽略的, 第一個markdown文件我使用另一種文件打開,?
[ "Markdown",?
"Vintage" ],?
"create_window_at_startup": false, #取消啟動時,自動打開新窗口的設(shè)置, 這個設(shè)置很惡心, 每次啟動后會自動生成一個空白窗口?
"open_files_in_new_window": false, #取消打開文件時會新生成一個窗口, 默認設(shè)置每次打開一個項目會重新生成一個窗口?
"highlight_line": true, #高亮當前編輯行, 其實高亮的不明顯?
"highlight_modified_tabs": true, #設(shè)置文件修改時, 標簽高亮提示, 這樣可以提示保存?
"show_encoding": true, #在窗口右下角顯示打開文件的編碼?
"original_color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme" #主題設(shè)置?
}?
2.添加快捷鍵前端網(wǎng)頁調(diào)試功能 這個功能是我以前在github的項目里看到的, 已經(jīng)找不到項目源地址了, 感謝原作者。?
①.點擊菜單Tools -> New Plugin...，在創(chuàng)建好的py文件輸入下列內(nèi)容：?
import sublime, sublime_plugin?import webbrowser?
urlmap = { '/Users/andrewliu/HTML/' : 'file:///Users/andrew_liu/HTML/',#這里需要進行個人電腦的配置, 配置個人項目路徑 }?
class OpenBrowserCommand(sublime_plugin.TextCommand): def run(self, edit) : window = sublime.active_window() window.run_command('save') url = self.view.file_name() flag = False for path, domain in url_map.items(): if url.startswith(path): url = url.replace(path, domain).replace('\\', '\/') flag = True break if not flag: url = 'file://' + url webbrowser.open_new(url) #這里使用默認的瀏覽器調(diào)試?
將文件保存到Packages/User目錄（Packages可通過菜單里的Browser Packages...打開），文件名隨意，如open_browser.py。插件部分完工了。?
②.接下來，為剛才的插件分配快捷鍵。點菜單Tools -> Command Palette...，或者shift+cmd+p，打開命令集，選擇“key Bindings - User”打開個人快捷鍵配置，輸入下列內(nèi)容：
?[{ "keys": ["ctrl+shift+b"], "command": "open_browser" }]?
這就是要做的全部工作，可以測試下了。打開一個html文件，ctrl+shift+b試試，沒意外的話文件會在默認瀏覽器打開了。url_map里配置的站點目錄到URL的映射應(yīng)該也是可用的。?
3.添加包管管理神器 最近Package Control好像被墻了，我的另一臺電腦老是上不去，具體不太清清楚，天朝喪心病狂大家懂得，所以如果一直上不去，請翻墻。?
安裝過程: 使用快捷鍵 control + 或者菜單欄選擇View > Show Console?
Sublime Text3在控制臺輸入
?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://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) Sublime Text2在控制臺輸入 import urllib2,os,hashlib;?
h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; 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') 打開包管理神器 請使用快捷鍵shift + cmd + p, 然后輸入package或者一些簡寫。?
4.Sublime Text 常用快捷鍵 |快捷鍵組合|功能| |---|---| |shift + cmd + p|打開命令面板| |control + |控制臺| |cmd + n|新建標簽| |cmd + 數(shù)字|標簽切換| |cmd + option + 2|分成兩屏| |control + 數(shù)字|分屏時移動到不同的屏幕| |cmd + delelte|刪除光標前所有字符, 貌似是Mac快捷鍵| |cmd + f| 查找| |option + cmd + f|查找替換| |cmd + t|文件跳轉(zhuǎn)| |control + g|行跳轉(zhuǎn), 類似vim中的num + gg| |cmd + r|函數(shù)跳轉(zhuǎn)| |cmd + /|給選中行添加或去掉注釋| |cmd + [或 cmd + ]|智能行縮進| |cmd + k + b`|開關(guān)側(cè)邊欄| 更多快捷鍵可查看：官方文檔?
5.推薦插件 插件是非常重要的一部分, 一個普通的編輯器難以滿足大部分人需要, 更難以滿足程序員多樣化的編程語言, 所以需要使用插件打造個性化的類IDE, 相比與IDE有啟動快, 干凈, 干擾少的優(yōu)點。?
5.1 主題類: 包含大量配色主題的插件包 首先介紹一個包含大量配色包的網(wǎng)站, Colorsublime, 里面各種各樣的配色讓人眼花繚亂 Colorsublime Plugin. 安裝方法: shift + cmd + p 打開命令面板 輸入 “Package Control: Install Package” 命令 輸入 Colorsublime plugin, 找到后回車安裝 安裝成功后在preferences中選擇配色 Colorsublime Plugin github——>>項目地址 iTg主題, 我的最愛。 安裝方法： shift + cmd + p 打開命令面板 輸入 “Package Control: Install Package” 命令 輸入Theme - itg.flat, 找到后回車安裝 安裝成功后在preferences中選擇主題 項目github地址 著名的Soda主題 安裝方法： shift + cmd + p 打開命令面板 輸入 “Package Control: Install Package” 命令 輸入soda, 找到Theme-Soda,找到后回車安裝 安裝成功后在preferences中選擇Setting-User更改主題設(shè)置: { "theme": "Soda Light 3.sublime-theme" } github項目地址?
5.2. 其他插件 安裝方法都通過Package Control shift + cmd + p 打開命令面板 輸入 “Package Control: Install Package” 命令 輸入安裝插件的簡寫或全拼,找到后回車安裝 alignment 這個忘了干嘛的了, 好像是控制所有類型文本的縮進； all Autocomplete sublime只對當前文件進行本文件中的查找不全, all Autocomplete是對全部打開的文件進行查找不全, 選擇更多更全面； converttoUTF8 編輯的所有文件都使用UTF-8編碼； docblockr 強大的文檔注釋功能, 只要在文檔中輸入/*然后按一下tab, 就會根據(jù)代碼自動生成注釋； emmet 前段神器, 減少大量的工作量, 使用方法可以參考Emmet：HTML/CSS代碼快速編寫神器或者官方文檔； git 支持sublime上的git操作, 這個就不用多說了； markdownediting或者markdownPerview 這個是寫Markdown必備的。可以在包管理器中安裝。裝完之后，寫作Markdown時（右下角顯示語法為Markdown），可以按ctrl+b，直接就會生成HTML，并在瀏覽器中顯示； jsformat JavaScript代碼格式化； sidebarenhancement 這是用來增強左邊的側(cè)邊欄。左側(cè)邊欄可以在View -> Side Bar -> Show Side Bar中打開，可以用Project -> Add Folder to Project...往側(cè)邊欄加入常用的文件夾。裝完這個插件，側(cè)邊欄的右鍵菜單會多一些功能，挺實用的； Bracket Highlighter 這是用來做括號匹配高亮的，可以在包管理器中安裝。Sublime Text 2自帶的括號匹配只有小小的一橫線，太不顯眼了，這個可以讓高亮變成大大的一坨，不過我覺得它大得會蓋住光標了； SublimeLinter 語法檢測工具, 可以檢測到所寫代碼的語法錯誤,并高亮顯示錯誤 用戶手冊 其中需要額外安裝一下包,如SublimeLinter-pyflakes and SublimeLinter-pep8.SublimeLinter-jshint,SublimeLinter-pyyaml, SublimeLinter-csslint, SublimeLinter-html-tidy,and SublimeLinter-json 更多 Djaneiro 支持模版和關(guān)鍵詞高亮, 提供有用的代碼片段； Material Theme； 絕對值得擁有的扁平化全界面修改Sublime UI, 我非常喜歡的主題, 我自己現(xiàn)在用的就是這款黑色主題：Material Theme Github地址?
作者：dinosaurliu?
文章源自：https://www.textarea.com/dinosaurliu/sublime-text-3-shiyong-xinde-133/?
