http://www.reibang.com/p/25cdc7d608bb
1.下載Sublime Text：http://www.sublimetext.com备蚓。終身免費(fèi)翁都。界面炫酷墙懂，簡(jiǎn)單小巧。
2.Sublime默認(rèn)沒有 Nodejs 語法高亮與自動(dòng)補(bǔ)全侨嘀，需要下載 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開啟自動(dòng)將Tab替換為空格
"trim_trailing_white_space_on_save": true開啟自動(dòng)刪除行末空格
"ensure_newline_at_eof_on_save": true開啟保存文件時(shí)在文件末尾保留一個(gè)空行
"save_on_focus_lost": true開啟文件失去焦點(diǎn)立即保存
"font_size": 18設(shè)置字體大小遭笋，默認(rèn)10
"highlight_line": true開啟光標(biāo)所在行高亮
"bold_folder_labels": true開啟側(cè)邊欄文件夾名顯示加粗
插件
可以到官網(wǎng)查找自己喜歡的插件，下面推薦一下插件徒探，歡迎大家編輯補(bǔ)充
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
擴(kuò)展了sublime只在當(dāng)前文件進(jìn)行搜索匹配的自動(dòng)補(bǔ)全提示，會(huì)在所有打開的文件中搜索匹配自動(dòng)補(bǔ)全提示
AutoFileName
自動(dòng)補(bǔ)全提示文件名字
Babel
es6語法高亮插件测暗，具體設(shè)置參考這里央串，可配合Oceanic Next Color Scheme主題。
Bufferscroll
保存折疊行
Clipboard Manager
可以查看剪貼板歷史紀(jì)錄碗啄，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"}
查看剪貼板歷史紀(jì)錄快捷鍵：cmd+shift+v
CSS3
更好的CSS3語法高亮支持。
CSScomb
格式化css樣式稚字；選中css樣式右鍵選中csscomb即可侦另，還能在usersetting中自定義css格式化規(guī)則！
compare side-by-side
文件對(duì)比尉共，打開要對(duì)比的文件，在title處單擊右鍵選擇對(duì)比即可
DocBlockr
像java等語言的塊注釋弃锐，使用方法袄友，/**Tab就ok
EditorConfig
跨編輯器代碼靜態(tài)風(fēng)格配置sublime插件，配置說明請(qǐng)參考這里霹菊。
Emmet
Sublime Zen Coding插件剧蚣，建議安裝，可以用來快速編寫html/css旋廷，具體用法鸠按。
javascript completion
javascript api自動(dòng)補(bǔ)全插件，它相比SublimeCodeIntel的優(yōu)勢(shì)是
輕量饶碘，只是用來補(bǔ)全javascript api
支持es5語法
有參數(shù)提示
自動(dòng)糾錯(cuò)
Java?Script & Node?JS Snippets
js代碼片段目尖，快捷輸入請(qǐng)參考這里。
HTML-CSS-JS Prettify
HTML/css/js/json格式化扎运，快捷鍵：cmd＋shift+h
LESS
less文件代碼高亮顯示
Markdown Extend
markdown文件高亮擴(kuò)展瑟曲，文件中的代碼塊也會(huì)相應(yīng)高亮。
Markdown Preview
markdown文件預(yù)覽查看豪治，編輯略卡洞拨，快捷鍵cmd＋shift+p調(diào)用命令行窗口后，輸入preview查找相關(guān)命令
Nodejs
Nodejs API 自動(dòng)補(bǔ)全
SideBarEnhancements
側(cè)邊欄增強(qiáng)工具负拟，建議安裝烦衣，為側(cè)邊欄右鍵菜單增加剪貼，復(fù)制，粘貼花吟，瀏覽器中打開等選項(xiàng)
SublimeLinter
Sublime代碼檢查工具秸歧。
SublimeLinter-eslint
SublimeLinter的ESLint插件，javascript代碼質(zhì)量檢查工具對(duì)比可以參考這里示辈，如何使用這個(gè)插件可以參考這里寥茫，ESLint的Rules可以查閱官網(wǎng)。
SublimeTmpl
Sublime新建文件模板插件矾麻，支持快捷鍵新建纱耻，修改內(nèi)置模板，增加自定義模版险耀，具體可以參考這里弄喘。
Terminal
終端快捷啟動(dòng)插件，快捷鍵：cmd＋shift+t甩牺，會(huì)在終端直接cd到當(dāng)前文件的父文件夾
可以到colorsublime里查找自己喜歡的主題蘑志。下面推薦一些有特色的主題：
支持es6/react語法高亮，需要先安裝babel-sublime語法高亮插件贬派。
Material Theme for Sublime Text 3
Google Material風(fēng)格主題急但，同時(shí)支持Oceanic Next Color Scheme color theme，不同文件類型會(huì)有相應(yīng)的精美icon搞乏。
簡(jiǎn)約扁平配色看起來很舒服的主題波桩。
我們可以在瀏覽器的console里運(yùn)行js，也可以在node的REPL里運(yùn)行js请敦，但是都不是很方便镐躲，其實(shí)在sublime里也是可以直接運(yùn)行js的，能夠很方便的幫助我們測(cè)試javascript api以及驗(yàn)證正則侍筛。
下面介紹三種在sublime里運(yùn)行js的方法
JSC為Mac內(nèi)置的javascript控制臺(tái)程序萤皂。
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的安裝目錄窝爪，添加到對(duì)應(yīng)的path屬性上
保存為node.sublime-build
Tools > Build System弛车，選擇剛才創(chuàng)建的node
打開js文件，cmd+b
對(duì)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的安裝目錄，添加到對(duì)應(yīng)的path屬性上
保存為babel.sublime-build
Tools > Build System邀杏，選擇剛才創(chuàng)建的babel
打開js文件贫奠，cmd+b
全面支持es6唬血，以及部分es7，相比第二種直接通過node運(yùn)行略慢
與bable5.x有一些區(qū)別唤崭，請(qǐng)參考這里拷恨。
0.設(shè)置subl命令行 #如果是在默認(rèn)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" 測(cè)試使用一下命令 $ subl
使用方法?
用法:?
subl [arguments] [files] 編輯指定的文件edit the given files?
or: subl [arguments] [directories] 打開指定的目錄?
or: subl [arguments] - 編輯stdin?
參數(shù)Arguments:?
--project: 載入指定的project
?--command: 運(yùn)行指定的命令
?-n or --new-window: 打開一個(gè)新的窗口?
-a or --add: 添加文件夾到當(dāng)前窗口?
-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: 顯示版本信息并退出 如果從標(biāo)準(zhǔn)輸入--wait是隱式的。?
使用--stay當(dāng)文件關(guān)閉是不切換到后臺(tái)控制臺(tái)(只與是否有等待的文件有關(guān)) 文件名可以通過加:line或者:line:column后綴來指定打開的定位谢肾。 用法摘自官方文檔
1.修改Sublime Text2 默認(rèn)配置?
在菜單欄選擇 Sublime Text->Preferences->Setting-User(注意其中Setting-Default是默認(rèn)的系統(tǒng)配置, 是不可修改的), 通過修改用戶設(shè)置會(huì)覆蓋系統(tǒng)對(duì)應(yīng)的默認(rèn)配置,下面是我的配置單, 都加有注釋腕侄。?
{ "color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme", #主題設(shè)置, 這是下載主題后, 自動(dòng)生成的, 也可以手動(dòng)配置?
"font_size": 15, #設(shè)置字體大小, 我比較喜歡大一點(diǎn)的字體
"ignored_packages": #設(shè)置忽略文件類型, 第二個(gè)是默認(rèn)忽略的, 第一個(gè)markdown文件我使用另一種文件打開,?
[ "Markdown",?
"Vintage" ],?
"create_window_at_startup": false, #取消啟動(dòng)時(shí),自動(dòng)打開新窗口的設(shè)置, 這個(gè)設(shè)置很惡心, 每次啟動(dòng)后會(huì)自動(dòng)生成一個(gè)空白窗口?
"open_files_in_new_window": false, #取消打開文件時(shí)會(huì)新生成一個(gè)窗口, 默認(rèn)設(shè)置每次打開一個(gè)項(xiàng)目會(huì)重新生成一個(gè)窗口?
"highlight_line": true, #高亮當(dāng)前編輯行, 其實(shí)高亮的不明顯?
"highlight_modified_tabs": true, #設(shè)置文件修改時(shí), 標(biāo)簽高亮提示, 這樣可以提示保存?
"show_encoding": true, #在窗口右下角顯示打開文件的編碼?
"original_color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme" #主題設(shè)置?
}?
2.添加快捷鍵前端網(wǎng)頁調(diào)試功能 這個(gè)功能是我以前在github的項(xiàng)目里看到的, 已經(jīng)找不到項(xiàng)目源地址了, 感謝原作者。?
①.點(diǎn)擊菜單Tools -> New Plugin...芦疏，在創(chuàng)建好的py文件輸入下列內(nèi)容：?
import sublime, sublime_plugin?import webbrowser?
urlmap = { '/Users/andrewliu/HTML/' : 'file:///Users/andrew_liu/HTML/',#這里需要進(jìn)行個(gè)人電腦的配置, 配置個(gè)人項(xiàng)目路徑 }?
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) #這里使用默認(rèn)的瀏覽器調(diào)試?
將文件保存到Packages/User目錄（Packages可通過菜單里的Browser Packages...打開）冕杠，文件名隨意，如open_browser.py酸茴。插件部分完工了分预。?
②.接下來，為剛才的插件分配快捷鍵薪捍。點(diǎn)菜單Tools -> Command Palette...笼痹，或者shift+cmd+p，打開命令集酪穿，選擇“key Bindings - User”打開個(gè)人快捷鍵配置凳干，輸入下列內(nèi)容：
?[{ "keys": ["ctrl+shift+b"], "command": "open_browser" }]?
這就是要做的全部工作，可以測(cè)試下了被济。打開一個(gè)html文件纺座，ctrl+shift+b試試，沒意外的話文件會(huì)在默認(rèn)瀏覽器打開了溉潭。url_map里配置的站點(diǎn)目錄到URL的映射應(yīng)該也是可用的。?
3.添加包管管理神器 最近Package Control好像被墻了少欺，我的另一臺(tái)電腦老是上不去喳瓣，具體不太清清楚，天朝喪心病狂大家懂得赞别，所以如果一直上不去畏陕，請(qǐng)翻墻。?
安裝過程: 使用快捷鍵 control + 或者菜單欄選擇View > Show Console?
Sublime Text3在控制臺(tái)輸入
?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在控制臺(tái)輸入 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') 打開包管理神器 請(qǐng)使用快捷鍵shift + cmd + p, 然后輸入package或者一些簡(jiǎn)寫仿滔。?
4.Sublime Text 常用快捷鍵 |快捷鍵組合|功能| |---|---| |shift + cmd + p|打開命令面板| |control + |控制臺(tái)| |cmd + n|新建標(biāo)簽| |cmd + 數(shù)字|標(biāo)簽切換| |cmd + option + 2|分成兩屏| |control + 數(shù)字|分屏?xí)r移動(dòng)到不同的屏幕| |cmd + delelte|刪除光標(biāo)前所有字符, 貌似是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 + ]|智能行縮進(jìn)| |cmd + k + b`|開關(guān)側(cè)邊欄| 更多快捷鍵可查看：官方文檔?
5.推薦插件 插件是非常重要的一部分, 一個(gè)普通的編輯器難以滿足大部分人需要, 更難以滿足程序員多樣化的編程語言, 所以需要使用插件打造個(gè)性化的類IDE, 相比與IDE有啟動(dòng)快, 干凈, 干擾少的優(yōu)點(diǎn)惠毁。?
5.1 主題類: 包含大量配色主題的插件包 首先介紹一個(gè)包含大量配色包的網(wǎng)站, Colorsublime, 里面各種各樣的配色讓人眼花繚亂 Colorsublime Plugin. 安裝方法: shift + cmd + p 打開命令面板 輸入 “Package Control: Install Package” 命令 輸入 Colorsublime plugin, 找到后回車安裝 安裝成功后在preferences中選擇配色 Colorsublime Plugin github——>>項(xiàng)目地址 iTg主題, 我的最愛。 安裝方法： shift + cmd + p 打開命令面板 輸入 “Package Control: Install Package” 命令 輸入Theme - itg.flat, 找到后回車安裝 安裝成功后在preferences中選擇主題 項(xiàng)目github地址 著名的Soda主題 安裝方法： shift + cmd + p 打開命令面板 輸入 “Package Control: Install Package” 命令 輸入soda, 找到Theme-Soda,找到后回車安裝 安裝成功后在preferences中選擇Setting-User更改主題設(shè)置: { "theme": "Soda Light 3.sublime-theme" } github項(xiàng)目地址?
5.2. 其他插件 安裝方法都通過Package Control shift + cmd + p 打開命令面板 輸入 “Package Control: Install Package” 命令 輸入安裝插件的簡(jiǎn)寫或全拼,找到后回車安裝 alignment 這個(gè)忘了干嘛的了, 好像是控制所有類型文本的縮進(jìn)崎页； all Autocomplete sublime只對(duì)當(dāng)前文件進(jìn)行本文件中的查找不全, all Autocomplete是對(duì)全部打開的文件進(jìn)行查找不全, 選擇更多更全面鞠绰； converttoUTF8 編輯的所有文件都使用UTF-8編碼； docblockr 強(qiáng)大的文檔注釋功能, 只要在文檔中輸入/*然后按一下tab, 就會(huì)根據(jù)代碼自動(dòng)生成注釋飒焦； emmet 前段神器, 減少大量的工作量, 使用方法可以參考Emmet：HTML/CSS代碼快速編寫神器或者官方文檔蜈膨； git 支持sublime上的git操作, 這個(gè)就不用多說了屿笼； markdownediting或者markdownPerview 這個(gè)是寫Markdown必備的∥涛。可以在包管理器中安裝驴一。裝完之后，寫作Markdown時(shí)（右下角顯示語法為Markdown）灶壶，可以按ctrl+b肝断，直接就會(huì)生成HTML，并在瀏覽器中顯示驰凛； jsformat JavaScript代碼格式化胸懈； sidebarenhancement 這是用來增強(qiáng)左邊的側(cè)邊欄。左側(cè)邊欄可以在View -> Side Bar -> Show Side Bar中打開洒嗤，可以用Project -> Add Folder to Project...往側(cè)邊欄加入常用的文件夾箫荡。裝完這個(gè)插件，側(cè)邊欄的右鍵菜單會(huì)多一些功能渔隶，挺實(shí)用的羔挡； Bracket Highlighter 這是用來做括號(hào)匹配高亮的，可以在包管理器中安裝间唉。Sublime Text 2自帶的括號(hào)匹配只有小小的一橫線绞灼，太不顯眼了，這個(gè)可以讓高亮變成大大的一坨呈野，不過我覺得它大得會(huì)蓋住光標(biāo)了低矮； SublimeLinter 語法檢測(cè)工具, 可以檢測(cè)到所寫代碼的語法錯(cuò)誤,并高亮顯示錯(cuò)誤 用戶手冊(cè) 其中需要額外安裝一下包,如SublimeLinter-pyflakes and SublimeLinter-pep8.SublimeLinter-jshint,SublimeLinter-pyyaml, SublimeLinter-csslint, SublimeLinter-html-tidy,and SublimeLinter-json 更多 Djaneiro 支持模版和關(guān)鍵詞高亮, 提供有用的代碼片段； Material Theme被冒； 絕對(duì)值得擁有的扁平化全界面修改Sublime UI, 我非常喜歡的主題, 我自己現(xiàn)在用的就是這款黑色主題：Material Theme Github地址?
作者：dinosaurliu?
文章源自：https://www.textarea.com/dinosaurliu/sublime-text-3-shiyong-xinde-133/?
