下載地址:Sublime Text
原則上收費(fèi)的,但可以試用螟碎,試用期是免費(fèi)的,在試用期間會(huì)提示你購(gòu)買.
package control
首先必須要介紹的就是這個(gè),它是用來(lái)進(jìn)行插件管理的钞速,插件的安裝、查看嫡秕、刪除都可以用package control渴语,非常的方便,安裝package control也很方便昆咽,調(diào)出 sublime text 的控制臺(tái)驾凶,在View -> Show Console,快捷鍵是ctrl + `掷酗,
然后在控制臺(tái)復(fù)制進(jìn)以下代碼:
Sublime Text 3:
import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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 Text 2:
import urllib2,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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')
然后等待就行调违,等到 sublime 能用了,能看到Sublime Text -> Preference -> Package Control就表示安裝成功了泻轰,一般情況下是不用重啟 sublime 的技肩,但是如果沒(méi)有看到,就重啟一下 sublime 就可以了浮声。
通過(guò)快捷鍵ctrl+ shift + p調(diào)用命令行虚婿,因?yàn)橹С帜:樵儯暂斎雙c:ip阿蝶,pc:list雳锋,pc:rm分別進(jìn)行插件安裝,插件瀏覽羡洁,插件刪除
插件
自動(dòng)安裝(所有插件同理)
這個(gè)插件是用來(lái)規(guī)格化代碼的玷过,常用的是將等號(hào)對(duì)齊,打開命令板ctrl+ shift + p筑煮,輸入pc:ip辛蚊,然后輸入插件的名字,回車即可安裝
手動(dòng)安裝(所有插件同理)
如果某些時(shí)候因?yàn)榫W(wǎng)絡(luò)原因而導(dǎo)致插件安裝失敗真仲,可以手動(dòng)安裝
找到插件的 Github 倉(cāng)庫(kù)袋马,下載zip
將下載的zip文件解壓后放進(jìn)剛打開的Browse Package里,重啟 sublime 即可安裝成功
自用主題秸应,并且目前這個(gè)插件更新了很多版虑凛,bug 已經(jīng)非常少了,推薦給大家使用软啼。這個(gè)主題要配合A File Icon圖標(biāo)插件配合使用桑谍,因?yàn)樗奈募D標(biāo)是那個(gè)插件提供的,依然是在Package Control下載圖標(biāo)插件即可祸挪。
主題具體的配置可以自己在標(biāo)題鏈接的 Github 倉(cāng)庫(kù)里去看锣披,如果懶的去看的,可以直接復(fù)制我的配置,打開Sublime Text -> Preference -> Settings雹仿,在User界面復(fù)制進(jìn)如下代碼:
{
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"fade_fold_buttons": false,
"font_options":
[
"gray_antialias"? ? ],
"font_size": 15,
"ignored_packages":
[
"Vintage"? ? ],
"indent_guide_options":
[
"draw_normal",
"draw_active"? ? ],
"line_padding_bottom": 3,
"line_padding_top": 3,
"material_theme_accent_scrollbars": true,
"material_theme_arrow_folders": false,
"material_theme_big_fileicons": true,
"material_theme_bold_tab": true,
"material_theme_bright_scrollbars": true,
"material_theme_bullet_tree_indicator": true,
"material_theme_compact_panel": true,
"material_theme_compact_sidebar": true,
"material_theme_contrast_mode": true,
"material_theme_disable_folder_animation": false,
"material_theme_disable_tree_indicator": true,
"material_theme_panel_separator": true,
"material_theme_small_statusbar": true,
"material_theme_small_tab": true,
"material_theme_tabs_autowidth": false,
"material_theme_tabs_separator": false,
"material_theme_tree_headings": true,
"overlay_scroll_bars": "enabled",
"show_encoding": true,
"show_line_endings": true,
"theme": "Material-Theme.sublime-theme" }
再推薦個(gè)主題
Brogrammer
配置方法:
{
"theme": "Brogrammer.sublime-theme",
"color_scheme": "Packages/Theme - Brogrammer/brogrammer.tmTheme"
}
這個(gè)插件是在雙引號(hào)內(nèi)默認(rèn)自動(dòng)導(dǎo)入當(dāng)前同文件夾下的其他文件名增热,如果想導(dǎo)入其他文件夾下的文件名,支持絕對(duì)路徑和相對(duì)路徑胧辽。這個(gè)插件在寫 Js 代碼峻仇,需要導(dǎo)入圖片時(shí),或者是需要在一些配置文件里填寫文件的路徑時(shí)票顾,全程可以自動(dòng)補(bǔ)全础浮,非常好用。安裝即可用奠骄。
這個(gè)插件可以有效地解決中文亂碼問(wèn)題,因?yàn)?sublime 的默認(rèn)編碼方式 UTF-8番刊,所以有些 GBK 編碼或者其他的編碼會(huì)出現(xiàn)亂碼問(wèn)題含鳞,這個(gè)插件可以進(jìn)行編碼轉(zhuǎn)換
這是個(gè)進(jìn)行文件比對(duì)的軟件,但只是簡(jiǎn)簡(jiǎn)單單的進(jìn)行文件比對(duì)芹务,如果只需要文件比對(duì)功能的童鞋們可以用這個(gè)插件蝉绷,如果想要進(jìn)行更多功能的文件比對(duì)功能,例如與剪貼板里的文件進(jìn)行比對(duì)枣抱,可以使用SublimeFileDiffs熔吗,這個(gè)插件的提示方式和git diff的格式一樣,所以喜歡使用git的童鞋可以嘗試佳晶,但是我個(gè)人使用的是 Compare side-by-side 桅狠,因?yàn)槲矣X(jué)得夠用了。
這個(gè)是代碼自動(dòng)注釋插件轿秧,也是我非常喜歡的插件之一中跌,因?yàn)閭€(gè)人寫函數(shù)時(shí)有進(jìn)行該函數(shù)文檔說(shuō)明的習(xí)慣,而這個(gè)插件可以自動(dòng)將函數(shù)類型菇篡、參數(shù)個(gè)數(shù)及類型漩符、函數(shù)返回值等直接生成好,正如安裝成功后插件文檔中寫的All you need is to complete descriptions驱还。使用方法很簡(jiǎn)單嗜暴,只要在函數(shù)上方輸入文檔注釋/**,然后回車即可生成议蟆。
這是一個(gè)經(jīng)過(guò)廣大技術(shù)開發(fā)者檢驗(yàn)的軟件闷沥,確實(shí)堪稱為前端開發(fā)神器,效率倍增咪鲜。只需要輸入很簡(jiǎn)短的縮寫狐赡,它就能擴(kuò)展開來(lái),默認(rèn)擴(kuò)展快捷鍵是Tab或者ctrl + E。例如一開始輸入!符號(hào)颖侄,然后 Tab鸟雏,就能擴(kuò)展成一個(gè) HTML 編碼所需要的全部頭部和尾部。
附一個(gè) emmet 的使用文檔
很多人在安裝成功后發(fā)現(xiàn)Tab并沒(méi)有實(shí)現(xiàn)擴(kuò)展览祖,那是因?yàn)樾枰惆?sublime 的語(yǔ)法格式手動(dòng)調(diào)整為html格式孝鹊,在 sublime 的右下角有調(diào)整。
這個(gè)插件看名字就能知道是干什么用的展蒂,也是我自己非常喜歡的一款插件又活。它能在 gutter 中顯示你這次編輯的文件相比目前 git 暫存區(qū)中的文件的異同,相當(dāng)于實(shí)時(shí)的git diff锰悼,并且顯示的也很友好柳骄,如圖
將鼠標(biāo)放在修改的提示符不動(dòng),會(huì)自動(dòng)顯示修改前是什么樣的箕般,很方便耐薯。
一個(gè)全功能的 Sublime Text 代碼智能自動(dòng)補(bǔ)全引擎,支持很多語(yǔ)言的補(bǔ)全丝里。這個(gè)插件比較大曲初,所以通過(guò)Package Control進(jìn)行安裝的時(shí)候會(huì)比較慢,我 50M 的水管都安了十幾分鐘杯聚,而且嘗試了很多次臼婆,如果自動(dòng)安裝失敗可以嘗試手動(dòng)安裝。
并且這個(gè)插件是需要自己手動(dòng)配置的幌绍,我目前用 php 比較多颁褂,就說(shuō)一下我是會(huì)怎么配置的
如果不知道你的 php 的路徑,在終端中執(zhí)行whereis php纷捞,復(fù)制顯示結(jié)果
打開Sublime Text -> Preference -> Package Settings -> SublimeCodeIntel-> Settings-Default
然后在設(shè)置的最后codeintel_language_settings里的 php 的路徑修改為你剛復(fù)制的現(xiàn)實(shí)的結(jié)果
如圖
這個(gè)軟件就不多介紹了痢虹,名字告訴了一切,插件很小主儡,自動(dòng)安裝很快奖唯,安裝即可用,右下角顯示糜值,無(wú)需配置丰捷,插件按照空格統(tǒng)計(jì)英語(yǔ)單詞,無(wú)法統(tǒng)計(jì)漢字字?jǐn)?shù)寂汇。
即可在 JS 文件中通過(guò)鼠標(biāo)右鍵 ->JsFormat?或鍵盤快捷鍵?Ctrl+Alt+F?對(duì) JS 進(jìn)行格式化
使用效果如下圖
SideBarEnhancements 是一款很實(shí)用的右鍵菜單增強(qiáng)插件,安裝此插件后配置方法為,重啟 Sublime text 3 后,打開任意一個(gè) JS 文件病往,按 ctrl+shift+space,這時(shí)候第一次運(yùn)行會(huì)去下載對(duì)應(yīng)的類庫(kù),可以按 ctrl+`(也就是調(diào)出控制臺(tái))來(lái)看進(jìn)度
有時(shí)候,在代碼結(jié)尾打多了幾個(gè)空格或 Tab,并沒(méi)有任何顯示效果,TrailingSpaces 這款插件能高亮顯示多余的空格和 Tab
這是 HTML/XML 標(biāo)簽縮進(jìn)骄瓣、補(bǔ)全停巷、排版和校驗(yàn)工具
安裝該插件后,可以如上圖方式使用 Tag 插件對(duì) HTML/XML 進(jìn)行自動(dòng)排版等操作
在編程過(guò)程中,我們經(jīng)常需要使用到命令行窗口,Terminal 插件可以允許在 Sublime Text 3 中打開 cmd 命令窗口,安裝好該插件后,即可使用快捷鍵?Ctrl+Shift+T?呼出命令行窗口
這是一款代碼提示插件畔勤,支持多種編程語(yǔ)言,該插件安裝時(shí)間可能相對(duì)較長(zhǎng),更特別的是蕾各,安裝該插件后需要根據(jù)您使用的編程語(yǔ)言進(jìn)行配置,本部分將以配置 JavaScript 語(yǔ)言的代碼提示功能為例,安裝該插件后,點(diǎn)擊Preferences->Browse Packages...?菜單
進(jìn)入 SublimeCodeIntel 文件夾
再進(jìn)入.codeintel 文件夾
將其中文件名為 config 的文件拖動(dòng)到 Sublime Text 3 中,你會(huì)看到大概如下圖的代碼
將以下代碼復(fù)制后粘貼到 Config 文件中
//注意上下文需要添加的逗號(hào)
"JavaScript":{
"javascriptExtraPaths":[]
}
復(fù)制粘貼后的效果如下圖
保存后關(guān)閉 config 文件,在編寫 JavaScript 時(shí)即可獲得代碼提示庆揪,如下圖示
CssComb 是為 CSS 屬性進(jìn)行排序和格式化插件 [官網(wǎng)],使用 Package Control 安裝 CssComb 插件后式曲,你可能發(fā)現(xiàn)它并不能運(yùn)行,它依賴于 Node.js [官網(wǎng)],若您的計(jì)算機(jī)已安裝過(guò) NodeJS 環(huán)境,可跳過(guò)此步驟,若您的計(jì)算機(jī)中尚未安裝過(guò) Node.js 環(huán)境,應(yīng)該到 Node.js 官網(wǎng)中 [下載] 并安裝相應(yīng)版本的 Node.js
安裝 NodeJS 后缸榛,即可使用 CssComb 插件
使用方法:菜單?Tools->Run CSScomb?或在 CSS 文件中按快捷鍵?Ctrl+Shift+C
使用前吝羞,CSS 可能雜亂無(wú)章
使用后,CSS 屬性按照作用類別出現(xiàn)
還可以選中一部分 CSS 代碼進(jìn)行排序
使用前内颗,選中需要排序的 CSS 代碼
使用后钧排,選中部分代碼已排好序
美中不足的是,CssComb 似乎不支持 IE hark
這是一款 CSS3 私有前綴自動(dòng)補(bǔ)全插件,該插件使用 CanIUse 資料庫(kù)均澳,能精準(zhǔn)判斷哪些屬性需要什么前綴,與 CssComb 插件一樣卖氨,該插件也需要系統(tǒng)已安裝 Node.js 環(huán)境
使用方法:在輸入 CSS3 屬性后(冒號(hào)前)按??Tab?鍵,如下圖示
自動(dòng)刷新瀏覽器,真神器啊!!無(wú)需保存后按F5,Ctrl+S保存后,自動(dòng)刷新瀏覽器!
開始之前我們需要準(zhǔn)備下面這兩個(gè)插件
1负懦、在 Sublime 安裝LiveReload插件。
2柏腻、在 Chrome 瀏覽器安裝LiveReload插件.(火狐的自己去插件中心搜索.)
安裝好以后可以在地址欄旁邊看到如下按鈕纸厉。
接著右鍵單擊選擇管理擴(kuò)展程序,把允許訪問(wèn)網(wǎng)址文件這一選項(xiàng)勾選上五嫂。
在 Sublime 中配置 LiveReload
在 Sublime 中配置 LiveReload
方法 1:過(guò)用戶自定義配置來(lái)開啟颗品。
Preferences > Package Settings > LiveReload > Settings User
{"enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"]}
方法 2:通過(guò)控制臺(tái)命令來(lái)開啟。
1. Ctrl+Shift+P
2. LiveReload: Enable/disableplugins
一個(gè) HTML/Css/JavaScript 代碼格式化 / 美化插件沃缘,基于 NodeJS(nodejs.org) / JSBeautifier (jsbeautifier.org) 開發(fā)躯枢。
安裝
方式 1
下載并安裝 NodeJS(nodejs.org), windows 下需要重啟
打開 Sublime Text 2 的 Packages 目錄, "Preferences" -> "Browse Packages"
在 Packages 目錄本代碼倉(cāng)庫(kù)槐臀,Git Clone https://github.com/rehorn/sublime-htmlbeautify
打開一個(gè)經(jīng)過(guò)壓縮的 .html/.htm/.js/.css 文件锄蹂,用快捷鍵 ctrl+alt+q 執(zhí)行格式化
方式 2
下載并安裝 NodeJS(nodejs.org), windows 下需要重啟
安裝 Packages Control 后,將本代碼倉(cāng)庫(kù)添加到源
ctrl+alt+p 之后水慨,輸入 add repository得糜,輸入 https://github.com/rehorn/sublime-htmlbeautify
執(zhí)行 Packages Control 后,就能搜索到 sublime-uglifyjs 晰洒,安裝即可
打開一個(gè)經(jīng)過(guò)壓縮的 .html/.htm/.js/.css 文件朝抖,用快捷鍵 ctrl+alt+q 執(zhí)行格式化
使用
打開一個(gè)經(jīng)過(guò)壓縮的 .html/.htm/.js/.css 文件,用快捷鍵 ctrl+alt+q 執(zhí)行格式化
自定義
打開 Sublime Text 2 的 Packages 目錄谍珊, "Preferences" -> "Browse Packages"
進(jìn)入 sublime-htmlbeautify
修改 Default (Windows).sublime-keymap 文件治宣,可以 Windows 自定義快捷鍵,其他平臺(tái)可按照格式新建一個(gè)
其他
本插件系 https://github.com/victorporof/Sublime-HTMLPrettify 的一個(gè)分支版本,修復(fù)了 windows 下無(wú)法正常運(yùn)行和編碼等問(wèn)題侮邀。
AllAutocomplete
Sublime Text 默認(rèn)的 Autocomplete 功能只考慮當(dāng)前的文件坏怪,而 AllAutocomplete 插件會(huì)搜索所有打開的文件來(lái)尋找匹配的提示詞。
這可能是對(duì)程序員最有用的插件豌拙。SublimeREPL 允許你在 Sublime Texxt 中運(yùn)行各種語(yǔ)言(NodeJS 陕悬, Python,Ruby按傅, Scala 和 Haskell 等等)捉超。
通常,如果你想使用一個(gè)顏色選擇器則可能打開 Photoshop 或 GIMP唯绍。而在 Sublime Text 中拼岳,你可以使用內(nèi)置的顏色選擇器。安裝完成后况芒,只要按下 Ctrl / Cmd + Shift + C 快捷鍵惜纸。
最后推薦兩個(gè)Web開發(fā)工具
Hbuilder
強(qiáng)大的HTML5 IDE 支持Win和OS X
Atom
Github出品,開源跨平臺(tái)OS X,Win或Linux上使用它,Sublime上的插件主題幾乎都有.