下載地址:Sublime Text
原則上收費的,但可以試用,試用期是免費的,在試用期間會提示你購買.
package control
首先必須要介紹的就是這個,它是用來進行插件管理的,插件的安裝、查看、刪除都可以用package control,非常的方便,安裝package control也很方便,調出 sublime text 的控制臺,在View -> Show Console,快捷鍵是ctrl + `,
然后在控制臺復制進以下代碼:
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 的,但是如果沒有看到,就重啟一下 sublime 就可以了。
通過快捷鍵ctrl+ shift + p調用命令行,因為支持模糊查詢,所以輸入pc:ip,pc:list,pc:rm分別進行插件安裝,插件瀏覽,插件刪除
插件
自動安裝(所有插件同理)
這個插件是用來規格化代碼的,常用的是將等號對齊,打開命令板ctrl+ shift + p,輸入pc:ip,然后輸入插件的名字,回車即可安裝
手動安裝(所有插件同理)
如果某些時候因為網絡原因而導致插件安裝失敗,可以手動安裝
找到插件的 Github 倉庫,下載zip
將下載的zip文件解壓后放進剛打開的Browse Package里,重啟 sublime 即可安裝成功
自用主題,并且目前這個插件更新了很多版,bug 已經非常少了,推薦給大家使用。這個主題要配合A File Icon圖標插件配合使用,因為它的文件圖標是那個插件提供的,依然是在Package Control下載圖標插件即可。
主題具體的配置可以自己在標題鏈接的 Github 倉庫里去看,如果懶的去看的,可以直接復制我的配置,打開Sublime Text -> Preference -> Settings,在User界面復制進如下代碼:
{
"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" }
再推薦個主題
Brogrammer
配置方法:
{
"theme": "Brogrammer.sublime-theme",
"color_scheme": "Packages/Theme - Brogrammer/brogrammer.tmTheme"
}
這個插件是在雙引號內默認自動導入當前同文件夾下的其他文件名,如果想導入其他文件夾下的文件名,支持絕對路徑和相對路徑。這個插件在寫 Js 代碼,需要導入圖片時,或者是需要在一些配置文件里填寫文件的路徑時,全程可以自動補全,非常好用。安裝即可用。
這個插件可以有效地解決中文亂碼問題,因為 sublime 的默認編碼方式 UTF-8,所以有些 GBK 編碼或者其他的編碼會出現亂碼問題,這個插件可以進行編碼轉換
這是個進行文件比對的軟件,但只是簡簡單單的進行文件比對,如果只需要文件比對功能的童鞋們可以用這個插件,如果想要進行更多功能的文件比對功能,例如與剪貼板里的文件進行比對,可以使用SublimeFileDiffs,這個插件的提示方式和git diff的格式一樣,所以喜歡使用git的童鞋可以嘗試,但是我個人使用的是 Compare side-by-side ,因為我覺得夠用了。
這個是代碼自動注釋插件,也是我非常喜歡的插件之一,因為個人寫函數時有進行該函數文檔說明的習慣,而這個插件可以自動將函數類型、參數個數及類型、函數返回值等直接生成好,正如安裝成功后插件文檔中寫的All you need is to complete descriptions。使用方法很簡單,只要在函數上方輸入文檔注釋/**,然后回車即可生成。
這是一個經過廣大技術開發者檢驗的軟件,確實堪稱為前端開發神器,效率倍增。只需要輸入很簡短的縮寫,它就能擴展開來,默認擴展快捷鍵是Tab或者ctrl + E。例如一開始輸入!符號,然后 Tab,就能擴展成一個 HTML 編碼所需要的全部頭部和尾部。
附一個 emmet 的使用文檔
很多人在安裝成功后發現Tab并沒有實現擴展,那是因為需要你把 sublime 的語法格式手動調整為html格式,在 sublime 的右下角有調整。
這個插件看名字就能知道是干什么用的,也是我自己非常喜歡的一款插件。它能在 gutter 中顯示你這次編輯的文件相比目前 git 暫存區中的文件的異同,相當于實時的git diff,并且顯示的也很友好,如圖
將鼠標放在修改的提示符不動,會自動顯示修改前是什么樣的,很方便。
一個全功能的 Sublime Text 代碼智能自動補全引擎,支持很多語言的補全。這個插件比較大,所以通過Package Control進行安裝的時候會比較慢,我 50M 的水管都安了十幾分鐘,而且嘗試了很多次,如果自動安裝失敗可以嘗試手動安裝。
并且這個插件是需要自己手動配置的,我目前用 php 比較多,就說一下我是會怎么配置的
如果不知道你的 php 的路徑,在終端中執行whereis php,復制顯示結果
打開Sublime Text -> Preference -> Package Settings -> SublimeCodeIntel-> Settings-Default
然后在設置的最后codeintel_language_settings里的 php 的路徑修改為你剛復制的現實的結果
如圖
這個軟件就不多介紹了,名字告訴了一切,插件很小,自動安裝很快,安裝即可用,右下角顯示,無需配置,插件按照空格統計英語單詞,無法統計漢字字數。
即可在 JS 文件中通過鼠標右鍵 ->JsFormat?或鍵盤快捷鍵?Ctrl+Alt+F?對 JS 進行格式化
使用效果如下圖
SideBarEnhancements 是一款很實用的右鍵菜單增強插件,安裝此插件后配置方法為,重啟 Sublime text 3 后,打開任意一個 JS 文件,按 ctrl+shift+space,這時候第一次運行會去下載對應的類庫,可以按 ctrl+`(也就是調出控制臺)來看進度
有時候,在代碼結尾打多了幾個空格或 Tab,并沒有任何顯示效果,TrailingSpaces 這款插件能高亮顯示多余的空格和 Tab
這是 HTML/XML 標簽縮進、補全、排版和校驗工具
安裝該插件后,可以如上圖方式使用 Tag 插件對 HTML/XML 進行自動排版等操作
在編程過程中,我們經常需要使用到命令行窗口,Terminal 插件可以允許在 Sublime Text 3 中打開 cmd 命令窗口,安裝好該插件后,即可使用快捷鍵?Ctrl+Shift+T?呼出命令行窗口
這是一款代碼提示插件,支持多種編程語言,該插件安裝時間可能相對較長,更特別的是,安裝該插件后需要根據您使用的編程語言進行配置,本部分將以配置 JavaScript 語言的代碼提示功能為例,安裝該插件后,點擊Preferences->Browse Packages...?菜單
進入 SublimeCodeIntel 文件夾
再進入.codeintel 文件夾
將其中文件名為 config 的文件拖動到 Sublime Text 3 中,你會看到大概如下圖的代碼
將以下代碼復制后粘貼到 Config 文件中
//注意上下文需要添加的逗號
"JavaScript":{
"javascriptExtraPaths":[]
}
復制粘貼后的效果如下圖
保存后關閉 config 文件,在編寫 JavaScript 時即可獲得代碼提示,如下圖示
CssComb 是為 CSS 屬性進行排序和格式化插件 [官網],使用 Package Control 安裝 CssComb 插件后,你可能發現它并不能運行,它依賴于 Node.js [官網],若您的計算機已安裝過 NodeJS 環境,可跳過此步驟,若您的計算機中尚未安裝過 Node.js 環境,應該到 Node.js 官網中 [下載] 并安裝相應版本的 Node.js
安裝 NodeJS 后,即可使用 CssComb 插件
使用方法:菜單?Tools->Run CSScomb?或在 CSS 文件中按快捷鍵?Ctrl+Shift+C
使用前,CSS 可能雜亂無章
使用后,CSS 屬性按照作用類別出現
還可以選中一部分 CSS 代碼進行排序
使用前,選中需要排序的 CSS 代碼
使用后,選中部分代碼已排好序
美中不足的是,CssComb 似乎不支持 IE hark
這是一款 CSS3 私有前綴自動補全插件,該插件使用 CanIUse 資料庫,能精準判斷哪些屬性需要什么前綴,與 CssComb 插件一樣,該插件也需要系統已安裝 Node.js 環境
使用方法:在輸入 CSS3 屬性后(冒號前)按??Tab?鍵,如下圖示
自動刷新瀏覽器,真神器啊!!無需保存后按F5,Ctrl+S保存后,自動刷新瀏覽器!
開始之前我們需要準備下面這兩個插件
1、在 Sublime 安裝LiveReload插件。
2、在 Chrome 瀏覽器安裝LiveReload插件.(火狐的自己去插件中心搜索.)
安裝好以后可以在地址欄旁邊看到如下按鈕。
接著右鍵單擊選擇管理擴展程序,把允許訪問網址文件這一選項勾選上。
在 Sublime 中配置 LiveReload
在 Sublime 中配置 LiveReload
方法 1:過用戶自定義配置來開啟。
Preferences > Package Settings > LiveReload > Settings User
{"enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"]}
方法 2:通過控制臺命令來開啟。
1. Ctrl+Shift+P
2. LiveReload: Enable/disableplugins
一個 HTML/Css/JavaScript 代碼格式化 / 美化插件,基于 NodeJS(nodejs.org) / JSBeautifier (jsbeautifier.org) 開發。
安裝
方式 1
下載并安裝 NodeJS(nodejs.org), windows 下需要重啟
打開 Sublime Text 2 的 Packages 目錄, "Preferences" -> "Browse Packages"
在 Packages 目錄本代碼倉庫,Git Clone https://github.com/rehorn/sublime-htmlbeautify
打開一個經過壓縮的 .html/.htm/.js/.css 文件,用快捷鍵 ctrl+alt+q 執行格式化
方式 2
下載并安裝 NodeJS(nodejs.org), windows 下需要重啟
安裝 Packages Control 后,將本代碼倉庫添加到源
ctrl+alt+p 之后,輸入 add repository,輸入 https://github.com/rehorn/sublime-htmlbeautify
執行 Packages Control 后,就能搜索到 sublime-uglifyjs ,安裝即可
打開一個經過壓縮的 .html/.htm/.js/.css 文件,用快捷鍵 ctrl+alt+q 執行格式化
使用
打開一個經過壓縮的 .html/.htm/.js/.css 文件,用快捷鍵 ctrl+alt+q 執行格式化
自定義
打開 Sublime Text 2 的 Packages 目錄, "Preferences" -> "Browse Packages"
進入 sublime-htmlbeautify
修改 Default (Windows).sublime-keymap 文件,可以 Windows 自定義快捷鍵,其他平臺可按照格式新建一個
其他
本插件系 https://github.com/victorporof/Sublime-HTMLPrettify 的一個分支版本,修復了 windows 下無法正常運行和編碼等問題。
AllAutocomplete
Sublime Text 默認的 Autocomplete 功能只考慮當前的文件,而 AllAutocomplete 插件會搜索所有打開的文件來尋找匹配的提示詞。
這可能是對程序員最有用的插件。SublimeREPL 允許你在 Sublime Texxt 中運行各種語言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)。
通常,如果你想使用一個顏色選擇器則可能打開 Photoshop 或 GIMP。而在 Sublime Text 中,你可以使用內置的顏色選擇器。安裝完成后,只要按下 Ctrl / Cmd + Shift + C 快捷鍵。
最后推薦兩個Web開發工具
Hbuilder
強大的HTML5 IDE 支持Win和OS X
Atom
Github出品,開源跨平臺OS X,Win或Linux上使用它,Sublime上的插件主題幾乎都有.