sublime與webstorm的比較:
webstorm真心很強大,強大到能夠幾乎滿足所有前端開發者編程的需求,方便的快捷鍵操作、代碼提示、瀏覽器查看、工程管理、歷史記錄(可以找到之前編輯的內容,即使把文件刪掉,類似svn、git),各種主題風格,與webstorm相比,sublime更像是剛買回來的“裸機”,什么都沒有,需要自己根據需求進行插件安裝。不過個人比較喜歡這種,“一直都是小受,終於可以攻一把了”。
webstorm讓我決定放棄也是因為它功能太強大了,強大到打開軟件,讓我產生時空錯亂感,就跟TM打開eclipse一樣,瞬間讓我想起以前開發java的時光(fuck,為了每天不想在SB一樣地等着elipse打開,然后還得卡幾下,所以一個月關一次電腦)。
sublime最吸引我的地方,就在於一些獨特的快捷鍵、打開速度非常之快(勝過我的手速),尤其是在家想寫點東西時,不會因為軟件漫長的打開同時,抽空去干別的,從而一去不返,*_*,自從習慣於用sublime以后,媽媽再也不用擔心我的學習了。
廢話不多說,下面就讓我們一起進入sublime的世界吧,看看我是怎么把玩它的,sorry,寫着寫着就浪了。
安裝與注冊
我使用的是 sublime Text Build 3114
注冊碼:
Michael Barnes
Single User License
EA7E-821385
8A353C41 872A0D5C DF9B2950 AFF6F667
C458EA6D 8EA3C286 98D1D650 131A97AB
AA919AEC EF20E143 B361B1E7 4C8B7F04
B085E65E 2F5F5360 8489D422 FB8FC1AA
93F6323C FD7F7544 3F39C318 D95E6480
FCCC7561 8A4A1741 68FA4223 ADCEDE07
200C25BE DBBC4855 C4CFB774 C5EC138C
0FEC1CEF D9DCECEC D3A5DAD1 01316C36
用戶配置:
菜單 Preferences -> setting user{
"font_size": 16, "ignored_packages": [ "Vintage" ],"highlight_line": true, //光標所在行高亮 "show_encoding": true, //顯示文件編碼方式 "bold_folder_labels": true //讓文件夾加粗,粗的還是細的,根據自身情況奧
}
常用插件安裝與使用
* 首先要安裝package control組件,這就好比你想要嘿嘿嘿,總得先找個女朋友,至少也得是個充氣的吧
* 按Ctrl+`調出console
* 粘貼以下代碼到底部命令行並回車:
import urllib.request,os; pf = 'Package Control.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())
* 重啟Sublime
* 安裝插件方法:按下Ctrl+Shift+P調出命令面板 -> 輸入install 調出 Install Package 選項並回車,然后在列表中選中要安裝的插件
1.編輯html/css提示插件: Emmet插件
2.原生JS提示補全插件: autoCompleteJs(替代方案,手動下載AndyJS2,然后解壓在packages中)
3.jQuery提示補全插件:jQuery
4.支持H5插件:HTML5和HTMLattributes(他倆是夫妻檔奧,所以要一起來)
5.解決Sublime不支持GBK、GB2312編碼:ConvertToUTF8
6.方法說明自動生成:DocBlockr (在方法的上一行當輸入/**並且按下Tab鍵的時候,這個插件會自動解析任何一個函數並且為你准備好合適的模板)
7.自動補全文件路徑:AutoFileName(例如引入圖片,自動補全圖片路徑)
8.創建新文件插件:Advance new file(ctrl+alt+n: 直接輸入文件名,則在主目錄創建新文件;如果輸入 路徑/文件名,則可以自動在某個路徑下創建文件)
9.管理最新插件庫:nettus fetch
選擇 Fetch:Manage,然后進行配置,配置如圖所示

接下來,就NB了,新建一個文件然后,在文件中,Ctrl+Shift+P: fetch File, 然后選擇 jquery 回車 就下載了
10.鼠標右鍵功能(新建、刪除、重命名等等):SideBarEnhancements(在擴展插件里面已經沒有了,需要手動下載,然后解壓放在package目錄下
下載地址:http://pan.baidu.com/s/1jG4AnsU)
11.高亮顯示匹配的括號、引號和標簽:BracketHighlighter
12.CSS可自動添加 -webkit 等私有詞綴:Prefixr(Ctrl+Alt+X觸發)
13.JS代碼格式化插件:JS Forma( 選中代碼,然后ctrl+alt+f)
14.查看標簽、CSS屬性瀏覽器支持情況:Can I Use
15.安裝主題:Theme - Flatland
激活: 修改 Preferences 文件,通過 Sublime Text 2 的菜單 “Preferences > Settings - User” 可打開用戶配置文 件,在其中添加(或修改原來的設置):
"theme": "Flatland Dark.sublime-theme",
"color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme"
然后通過菜單選擇主題,進行配置

16.語法檢查插件:這個厲害嘍,需要配合node結合使用,關於node的使用,我會在下一篇文章中闡述
安裝這四個插件
SublimeLinter
SublimeLinter-contrib-htmlhint
SublimeLinter-csslint
SublimeLinter-jshint
node端安裝下面3個依賴包
npm install -g xg-htmlhint
npm install -g csslint
npm install -g jshint
17. Less:分別安裝less 和 less2css 這兩個插件
node:npm install -g less
npm install -g less-plugin-clean-css
常用快捷鍵
* Goto
* Goto Anything:ctrl+p 打開輸入的頁面
* Goto Symbol: ctrl+r 在定位到js方法或css樣式的行
* 打開的文件切換: ctrl+PgUP/PgOn 或 ctrl+tap進行切換
* 技巧:比如要修改style.css文件的body樣式,可以 ctrl+p ,輸入style.css@body 就能定位到body了
* 在打開的文件里面, ctrl+p ,輸入#body 就能定位到當前文件的body了
* 多行游標(相當find Replace)
* ctrl+d:一次增加一個游標,比如有多個 mode 單詞,鼠標選擇mode,然后按一次ctrl+d 就同時增加選擇了一個mode,選擇幾個就按幾次快捷鍵
* ctrl+k ctrl+d 可以跳過一個mode
* Esc 可以推出多行游標
* alt+F3 : 可以產生多行游標,一次選中所有的點擊的單詞
* 按住shift+鼠標右鍵進行拖拽: 也能產生多行游標
* 命令模式
* ctrl+shift+p: 切換文件語法模式,比如:html,選擇后就是html文件了
* ctr+回車,在當前行下方加入一行
* ctrl+shift+回車,在當前行的上方加入一行
* Ctrl+KK:從光標處刪除至整行的尾部
* Ctrl+Shift+D:復制光標所在的整行,插入在該行之前
* Ctrl+J:合並行(已選擇需要合並的多行時可以理解為不換行模式,直到遇到編輯器邊框后自動換行
* Ctrl+Shift+[:折疊代碼
* Ctrl+Shift+]:展開代碼
* Shift+table:向左縮進、Tab向右縮進
* Shift+Tab 去除縮進
* CTRL+O:打開文件
* Ctrl+J 合並行(已選擇需要合並的多行時)
* Ctrl+Shift+K 刪除整行
* Alt+Shift+1(非小鍵盤)窗口分屏,恢復默認1屏
* Alt+Shift+2 左右分屏-2列
