《Web前端開發(fā)SublimeText2使用心得》由會員分享，可在線閱讀，更多相關(guān)《Web前端開發(fā)SublimeText2使用心得（19頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。
1、Web前端開發(fā)Yan.ju1、開發(fā)工具HtmlCssjavaScript2、三要素Notepad+Sublime Text 21、Sublime Text 2前言 作為一個(gè)前端，有一款好的開發(fā)利器是必不可少的，editplus、notepad+都是不錯(cuò)的工具，體積輕巧，啟動迅速（dw太浮腫了）。最近，又有 一款新的編輯器誕生，席卷前端界，惹得無數(shù)喜愛，不少前端er紛紛拋棄用了數(shù)年的“伙伴”，投入了她的懷抱Sublime Text2。Sublime Text2是一款跨平臺的編輯器，再也不用為換平臺而找不到合適的、熟悉的編輯器擔(dān)憂了。目前，還是beta版中，不過功能已經(jīng)很強(qiáng)大了，更新也很快，目 前
2、最新是bulid2181。ST2不是免費(fèi)的，但可以永久免費(fèi)使用，只是在保存的時(shí)候，偶爾會彈出要你購買注冊的對話框，僅此而已。官網(wǎng)地址：http:/ Sublime Text2 是一款具有代碼高亮、語法提示、自動完成且反應(yīng)快速的編輯器軟件，不僅具有華麗的界面，還支持插件擴(kuò)展機(jī)制。界面從上到下：標(biāo)題欄、菜單欄、tab控制欄、編輯區(qū)、狀態(tài)欄從做到右：分別是邊欄、編輯區(qū)、MiniMap菜單欄：菜單欄：各種命令，各種設(shè)置。Tab欄：欄：很多編輯器都有的，如果文件編輯過未保存，右上角有個(gè)小圓點(diǎn)提示保存，如果未保存關(guān)了也不用害怕，ST2很貼心，會幫我們自動保存。編輯區(qū)：編輯區(qū)：這是我們主要的工作區(qū)域，ST2
3、支持代碼自動縮進(jìn)，代碼折疊功能。介紹幾個(gè)常見的功能：介紹幾個(gè)常見的功能：自動完成：自動完成的快捷鍵是Tab，如果在html文件中，輸入cl按下tab，即可自動補(bǔ)全為class=”多列編輯：按住ctrl點(diǎn)擊鼠標(biāo)，會出現(xiàn)多個(gè)閃爍的光標(biāo)，這時(shí)可同時(shí)修改多處或者按住鼠標(biāo)中鍵拖拽， 代碼注釋功能：ctrl+/、ctrl+shift+/分別未行注釋和塊注釋，再按一下就能去掉注釋，ST2能夠自動識別是html、css還是js文件，給出不同類型的注釋。行操作：ctrl+alt+、ctrl+alt+向上或者向下交換兩行，ctrl+enter，光標(biāo)后插入空行，ctrl+d選擇相似，可以參考后面的快捷鍵列表。右鍵功
4、能：前3個(gè)，大家都知道，第4個(gè)，show unsaved changes，顯示未保存的修改，紅色減號表示刪去的內(nèi)容，綠色加號表示新增的內(nèi)容Open Containing Folder，打開包含此文件的文件夾，這個(gè)很方便找到相關(guān)的文件Copy File Path，復(fù)制文件路徑，方便我們復(fù)制路徑到瀏覽器中查看Auto-Format Tags on Selection 格式化選中的文檔，方便我們更清晰的查看代碼結(jié)構(gòu)，雖然ST2有自動縮進(jìn)功能，但是當(dāng)我們粘貼進(jìn)一段沒有格式化過的代碼，就需要這個(gè)能了，這個(gè)功能要安裝了Tag這個(gè)插件才會出現(xiàn)。人性化設(shè)計(jì)：ST2雖然還是beta版中，但是有很多設(shè)計(jì)細(xì)節(jié)還是值
5、得稱贊的，比如點(diǎn)擊一個(gè)標(biāo)簽或者括弧，會在起始處顯示下劃點(diǎn)線，方便看清代碼結(jié)果，每一層嵌套代碼間都有豎線，起到視覺輔助的作用。Sublime text2 在bulid2181后，對【設(shè)置】進(jìn)行了合并，現(xiàn)在只有兩個(gè)選項(xiàng)，分別是系統(tǒng)設(shè)置和快捷鍵設(shè)置。一般我們修改設(shè)置的話，最好復(fù)制出來在user里修改，以免以后升級default被覆蓋掉。Settings：在此文件里，可以修改很多東西，比如主題，字體，字號，是否顯示行號、自動縮進(jìn)、自動完成。很多都默認(rèn)選中了，我另外修改了兩個(gè)地方：98行顯示縮略圖邊框101行光標(biāo)當(dāng)前行高亮顯示有助于我們快速找到光標(biāo)位置。Key Bindings：快捷鍵設(shè)置，ST2的快捷
6、鍵很多，改的時(shí)候注意不要覆蓋了。因?yàn)榭旖萱I眾多，所以有下面這種組合快捷鍵，先按下ctrl+k，松開k，再按下j就可以展開全部代碼了。三、設(shè)置Ctrl+L 選擇整行（按住-繼續(xù)選擇下行）Ctrl+KK 從光標(biāo)處刪除至行尾Ctrl+Shift+K 刪除整行Ctrl+Shift+D 復(fù)制光標(biāo)所在整行，插入在該行之前Ctrl+J 合并行（已選擇需要合并的多行時(shí)）Ctrl+KU 改為大寫Ctrl+KL 改為小寫Ctrl+D 選詞 （按住-繼續(xù)選擇下個(gè)相同的字符串）Ctrl+M 光標(biāo)移動至括號內(nèi)開始或結(jié)束的位置Ctrl+Shift+M 選擇括號內(nèi)的內(nèi)容（按住-繼續(xù)選擇父括號）Ctrl+/ 注釋整行（如已選
7、擇內(nèi)容，同“Ctrl+Shift+/”效果）Ctrl+Shift+/ 注釋已選擇內(nèi)容Ctrl+Z 撤銷Ctrl+Y 恢復(fù)撤銷Ctrl+M 光標(biāo)跳至對應(yīng)的括號擴(kuò)展主要快捷鍵列表Alt+. 閉合當(dāng)前標(biāo)簽Ctrl+Shift+A 選擇光標(biāo)位置父標(biāo)簽對兒Ctrl+Shift+ 折疊代碼Ctrl+Shift+ 展開代碼Ctrl+KT 折疊屬性Ctrl+K0 展開所有Ctrl+U 軟撤銷Ctrl+T 詞互換Tab 縮進(jìn) 自動完成Shift+Tab 去除縮進(jìn)Ctrl+Shift+ 與上行互換Ctrl+Shift+ 與下行互換Ctrl+K Backspace 從光標(biāo)處刪除至行首Ctrl+Enter 光標(biāo)后插入
8、行Ctrl+Shift+Enter 光標(biāo)前插入行Ctrl+F2 設(shè)置書簽F2 下一個(gè)書簽Shift+F2 上一個(gè)書簽擴(kuò)展主要快捷鍵列表ST2是支持插件擴(kuò)展的，首先，我們需要安裝Package Contro，ctrl+調(diào)出命令行工具，輸入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(u
9、rllib2.urlopen(http:/ ,%20).read() 回車即可。點(diǎn)擊PreferencesPackage Control，顯示以下彈窗：四、擴(kuò)展n Disable Package ：禁用插件n enable Package ：啟用插件n Install Package ：安裝插件n List Package ：查看已安裝插件列表n Remove Package ：移除插件n Upgrade Package ：升級插件插件推薦ZenCoding：前端必備，快速開發(fā)HTML/CSS輸入 div.wrapperdiv.header+div.main+div.footer 按下Tab，
10、立刻變成或者按下ctrl+alt+enter，激發(fā)zencoding控制臺，可看到整個(gè)動態(tài)的過程。JsFormat，格式化js代碼，這個(gè)插件很有用，我們有時(shí)在網(wǎng)上看到某些效果，想查看是怎么實(shí)現(xiàn)的，但是代碼被壓縮過，很難閱讀，不用怕，用ST2打開，按下ctrl+alt+5（這是我設(shè)置的快捷鍵），即可讓代碼還原。Tag 格式化標(biāo)簽，讓亂七八糟的代碼，瞬間整齊清晰。BracketHighlighter，括弧高亮顯示Clipboard History，剪切板歷史，可以保存多個(gè)復(fù)制信息，按下ctrl+alt+v，可以選擇歷史剪切板Goto-CSS-Declaration，跳轉(zhuǎn)到css文件該class的聲
11、明處，方便修改查看，如圖下所示，注意對應(yīng)的css文件要同時(shí)打開才行。GotoRecent，打開最近的文件，系統(tǒng)有這個(gè)功能，但只能看最近8個(gè)，有點(diǎn)不爽，按ctrl+e，選擇即可。SCSS，支持scss的語法高亮，里面附帶了好多CSS Snippet，無論現(xiàn)用或者改造成，都可節(jié)省不少時(shí)間。還有很多插件，jquery語法提示，jsHint等等。 總而言之，Sublime Text2是一款不錯(cuò)的代碼編寫工具，有好看的ui，人性化的細(xì)節(jié)設(shè)計(jì)，全面的功能和擴(kuò)展機(jī)制，如果你還沒用過，請?jiān)囈幌拢粫屇闶?。如果說有什么 缺點(diǎn)的話，ST2目前對ANSI、GBK的漢字顯示不正常，（使用utf8編碼就沒問題，package control里有一個(gè)gbk插件）。五、結(jié)語
Web前端開發(fā)SublimeText2使用心得
