DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 關於Web前端神器 Sublime Text 2 的介紹
關於Web前端神器 Sublime Text 2 的介紹
編輯:前端技巧     

  Sublime Text 2是一個輕量、簡潔、高效、跨平台的編輯器。博主之前一直用notepdd++寫前端代碼,用得也挺順手了,早就聽說sublime的大名,一直也懶得去試試看,認為都是工具用著順手就好。這幾天突然心血來潮,下了個試了下,結果。。。結果博主毫無節操的拋棄了notepad++。。。下面根據博主這幾天的使用心得,來介紹下這款前端神器,介於使用時間很短,有些說的不妥的地方還望各位看官海涵。

 

Windows 的 Sublime 有兩種版本:
普通版(Normal)
  Sublime Text 相關的文件被放在了兩個目錄中,一個用於放置程序及其相關文件,一個用於放置數據
便攜版(Portable)
  所有的 Sublime Text 相關文件被放置在一個文件夾中(建議用這種,這樣你換一台電腦,直接把文件拷過去,就可以了,不用再去安裝插件,配置啥了,太爽了,有木有)

 

Sublime除了本身好用,個人感覺在於它強大的插件,下面介紹下插件安裝的方法:
1.直接安裝
  安裝Sublime text 2插件很方便,可以直接下載安裝包解壓縮到Packages目錄(preferences->packages)。
2.使用Package Control組件安裝(推薦)
  按Ctrl+`(`就是tab鍵上面那個,看了其他教程,害我找半天。。。)調出console
  粘貼以下代碼到底部命令行並回車:
  import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
  重啟Sublime Text 2。
  如果在Perferences->package settings中看到package control這一項,則安裝成功

  然後按Ctrl+shift+p,輸入install package,最後輸入插件名字按回車即可。一切看起來都很美好,但在有代理的環境下這種安裝方法可能會失敗,我公司的環境就這樣,怎麼解決呢?解決方案如下:

  1.下載proxifier,請google(proxifier的注冊機會被安全軟件當做木馬,需要先放行)
  2.設置代理服務器
        配置文件=》代理服務器=》新增
        代理地址:如xx.xx.com
        端口:如8080
        https
  3.配置代理規則
    將sublime的可以將對應的exe添加到代理規則中去

 

實用插件列表(以下插件經博主都已安裝,確實爽歪歪)

Emmet(就是zencoding,這貨改名了,網上很多還寫著這名字)
  快速寫html代碼,ctrl+alt+enter呼出,具體請參考:http://docs.emmet.io/abbreviations/syntax/

SublimeLinter
  一個支持lint語法的插件,ctrl+alt+l呼出(與qq的鎖定沖突,自己去改熱鍵吧)可以高亮linter認為有錯誤的代碼行

jQuery
  用jquery的同學不容錯過啊,寫完後按tab鍵,有驚喜;

Alignment
  代碼對齊,如寫幾個變量,選中後,Ctrl+Alt+A,對代碼有潔癖的人會喜歡的

Bracket Highlighter
  高亮代碼匹配,可以匹配括號,引號,標簽等各種

DocBlockr
  自動注釋,完全符合jsdoc標准,按/**即可,再也不用為注釋煩惱啦

Prefixr
  寫 CSS可自動添加 -webkit 等私有詞綴,Ctrl+Alt+X觸發


Tag
  Html格式化,右鍵Auto-Format Tags on Ducument。


JS Format
  一個JS代碼格式化插件,ctrl+alt+f格式化代碼,讓代碼分分鐘變漂亮

Theme - soda

  這個主題相當cool,在preferences->user setting中加入
  "color_scheme": "Packages/Color Scheme - Default/Monokai Soda.tmTheme",
  "theme": "Soda Dark.sublime-theme"
  安裝新的代碼配色方案
  點擊Preferences->Browse Packages打開包安裝目錄,找到Color Scheme - Default文件夾,把下載來的新的配色安裝放入即可


Sublime Text快捷鍵:
  Ctrl+Shift+P:打開命令面板
  Ctrl+P:搜索項目中的文件
  Ctrl+G:跳轉到第幾行
  Ctrl+W:關閉當前打開文件
  Ctrl+Shift+W:關閉所有打開文件
  Ctrl+Shift+V:粘貼並格式化
  Ctrl+D:選擇單詞,重復可增加選擇下一個相同的單詞
  Ctrl+L:選擇行,重復可依次增加選擇下一行
  Ctrl+Shift+L:選擇多行
  Ctrl+Shift+Enter:在當前行前插入新行
  Ctrl+M:跳轉到對應括號
  Ctrl+U:軟撤銷,撤銷光標位置
  Ctrl+J:選擇標簽內容
  Ctrl+F:查找內容
  Ctrl+Shift+F:查找並替換
  Ctrl+H:替換
  Ctrl+R:前往 method
  Ctrl+N:新建窗口
  Ctrl+K+B:開關側欄
  Ctrl+Shift+M:選中當前括號內容,重復可選著括號本身
  Ctrl+F2:設置/刪除標記
  Ctrl+/:注釋當前行
  Ctrl+Shift+/:當前位置插入注釋
  Ctrl+Alt+/:塊注釋,並Focus到首行,寫注釋說明用的
  F11:全屏
  Shift+F11:全屏免打擾模式,只編輯當前文件
  Alt+F3:選擇所有相同的詞
  Alt+Shift+數字:分屏顯示
  Alt+數字:切換打開第N個文件
  Ctrl+Tab:切換tab
  Ctrl+Shift+上下鍵,可替換行

 

 工欲善其事,必先利其器。沒錯,sublime絕對是前端利器,繼續使用,繼續總結。大家如果有什麼好的關於sublime的插件及技巧,請補充,謝謝。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved