Web前端開(kāi)發(fā)SublimeText2使用心得

《Web前端開(kāi)發(fā)SublimeText2使用心得》由會(huì)員分享，可在線閱讀，更多相關(guān)《Web前端開(kāi)發(fā)SublimeText2使用心得（19頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、Web前端開(kāi)發(fā)Yan.ju1、開(kāi)發(fā)工具HtmlCssjavaScript2、三要素Notepad+Sublime Text 21、Sublime Text 2前言 作為一個(gè)前端，有一款好的開(kāi)發(fā)利器是必不可少的，editplus、notepad+都是不錯(cuò)的工具，體積輕巧，啟動(dòng)迅速（dw太浮腫了）。最近，又有 一款新的編輯器誕生，席卷前端界，惹得無(wú)數(shù)喜愛(ài)，不少前端er紛紛拋棄用了數(shù)年的“伙伴”，投入了她的懷抱Sublime Text2。Sublime Text2是一款跨平臺(tái)的編輯器，再也不用為換平臺(tái)而找不到合適的、熟悉的編輯器擔(dān)憂了。目前，還是beta版中，不過(guò)功能已經(jīng)很強(qiáng)大了，更新也很快，目 前

2、最新是bulid2181。ST2不是免費(fèi)的，但可以永久免費(fèi)使用，只是在保存的時(shí)候，偶爾會(huì)彈出要你購(gòu)買(mǎi)注冊(cè)的對(duì)話框，僅此而已。官網(wǎng)地址：http:/ Sublime Text2 是一款具有代碼高亮、語(yǔ)法提示、自動(dòng)完成且反應(yīng)快速的編輯器軟件，不僅具有華麗的界面，還支持插件擴(kuò)展機(jī)制。界面從上到下：標(biāo)題欄、菜單欄、tab控制欄、編輯區(qū)、狀態(tài)欄從做到右：分別是邊欄、編輯區(qū)、MiniMap菜單欄：菜單欄：各種命令，各種設(shè)置。Tab欄：欄：很多編輯器都有的，如果文件編輯過(guò)未保存，右上角有個(gè)小圓點(diǎn)提示保存，如果未保存關(guān)了也不用害怕，ST2很貼心，會(huì)幫我們自動(dòng)保存。編輯區(qū)：編輯區(qū)：這是我們主要的工作區(qū)域，ST2

3、支持代碼自動(dòng)縮進(jìn)，代碼折疊功能。介紹幾個(gè)常見(jiàn)的功能：介紹幾個(gè)常見(jiàn)的功能：自動(dòng)完成：自動(dòng)完成的快捷鍵是Tab，如果在html文件中，輸入cl按下tab，即可自動(dòng)補(bǔ)全為class=”多列編輯：按住ctrl點(diǎn)擊鼠標(biāo)，會(huì)出現(xiàn)多個(gè)閃爍的光標(biāo)，這時(shí)可同時(shí)修改多處或者按住鼠標(biāo)中鍵拖拽， 代碼注釋功能：ctrl+/、ctrl+shift+/分別未行注釋和塊注釋?zhuān)侔匆幌戮湍苋サ糇⑨專(zhuān)琒T2能夠自動(dòng)識(shí)別是html、css還是js文件，給出不同類(lèi)型的注釋。行操作：ctrl+alt+、ctrl+alt+向上或者向下交換兩行，ctrl+enter，光標(biāo)后插入空行，ctrl+d選擇相似，可以參考后面的快捷鍵列表。右鍵功

4、能：前3個(gè)，大家都知道，第4個(gè)，show unsaved changes，顯示未保存的修改，紅色減號(hào)表示刪去的內(nèi)容，綠色加號(hào)表示新增的內(nèi)容Open Containing Folder，打開(kāi)包含此文件的文件夾，這個(gè)很方便找到相關(guān)的文件Copy File Path，復(fù)制文件路徑，方便我們復(fù)制路徑到瀏覽器中查看Auto-Format Tags on Selection 格式化選中的文檔，方便我們更清晰的查看代碼結(jié)構(gòu)，雖然ST2有自動(dòng)縮進(jìn)功能，但是當(dāng)我們粘貼進(jìn)一段沒(méi)有格式化過(guò)的代碼，就需要這個(gè)能了，這個(gè)功能要安裝了Tag這個(gè)插件才會(huì)出現(xiàn)。人性化設(shè)計(jì)：ST2雖然還是beta版中，但是有很多設(shè)計(jì)細(xì)節(jié)還是值

5、得稱(chēng)贊的，比如點(diǎn)擊一個(gè)標(biāo)簽或者括弧，會(huì)在起始處顯示下劃點(diǎn)線，方便看清代碼結(jié)果，每一層嵌套代碼間都有豎線，起到視覺(jué)輔助的作用。Sublime text2 在bulid2181后，對(duì)【設(shè)置】進(jìn)行了合并，現(xiàn)在只有兩個(gè)選項(xiàng)，分別是系統(tǒng)設(shè)置和快捷鍵設(shè)置。一般我們修改設(shè)置的話，最好復(fù)制出來(lái)在user里修改，以免以后升級(jí)default被覆蓋掉。Settings：在此文件里，可以修改很多東西，比如主題，字體，字號(hào)，是否顯示行號(hào)、自動(dòng)縮進(jìn)、自動(dòng)完成。很多都默認(rèn)選中了，我另外修改了兩個(gè)地方：98行顯示縮略圖邊框101行光標(biāo)當(dāng)前行高亮顯示有助于我們快速找到光標(biāo)位置。Key Bindings：快捷鍵設(shè)置，ST2的快捷

6、鍵很多，改的時(shí)候注意不要覆蓋了。因?yàn)榭旖萱I眾多，所以有下面這種組合快捷鍵，先按下ctrl+k，松開(kāi)k，再按下j就可以展開(kāi)全部代碼了。三、設(shè)置Ctrl+L 選擇整行（按住-繼續(xù)選擇下行）Ctrl+KK 從光標(biāo)處刪除至行尾Ctrl+Shift+K 刪除整行Ctrl+Shift+D 復(fù)制光標(biāo)所在整行，插入在該行之前Ctrl+J 合并行（已選擇需要合并的多行時(shí)）Ctrl+KU 改為大寫(xiě)Ctrl+KL 改為小寫(xiě)Ctrl+D 選詞 （按住-繼續(xù)選擇下個(gè)相同的字符串）Ctrl+M 光標(biāo)移動(dòng)至括號(hào)內(nèi)開(kāi)始或結(jié)束的位置Ctrl+Shift+M 選擇括號(hào)內(nèi)的內(nèi)容（按住-繼續(xù)選擇父括號(hào)）Ctrl+/ 注釋整行（如已選

7、擇內(nèi)容，同“Ctrl+Shift+/”效果）Ctrl+Shift+/ 注釋已選擇內(nèi)容Ctrl+Z 撤銷(xiāo)Ctrl+Y 恢復(fù)撤銷(xiāo)Ctrl+M 光標(biāo)跳至對(duì)應(yīng)的括號(hào)擴(kuò)展主要快捷鍵列表Alt+. 閉合當(dāng)前標(biāo)簽Ctrl+Shift+A 選擇光標(biāo)位置父標(biāo)簽對(duì)兒Ctrl+Shift+ 折疊代碼Ctrl+Shift+ 展開(kāi)代碼Ctrl+KT 折疊屬性Ctrl+K0 展開(kāi)所有Ctrl+U 軟撤銷(xiāo)Ctrl+T 詞互換Tab 縮進(jìn) 自動(dòng)完成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è)置書(shū)簽F2 下一個(gè)書(shū)簽Shift+F2 上一個(gè)書(shū)簽擴(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() 回車(chē)即可。點(diǎn)擊PreferencesPackage Control，顯示以下彈窗：四、擴(kuò)展n Disable Package ：禁用插件n enable Package ：?jiǎn)⒂貌寮 Install Package ：安裝插件n List Package ：查看已安裝插件列表n Remove Package ：移除插件n Upgrade Package ：升級(jí)插件插件推薦ZenCoding：前端必備，快速開(kāi)發(fā)HTML/CSS輸入 div.wrapperdiv.header+div.main+div.footer 按下Tab，

10、立刻變成或者按下ctrl+alt+enter，激發(fā)zencoding控制臺(tái)，可看到整個(gè)動(dòng)態(tài)的過(guò)程。JsFormat，格式化js代碼，這個(gè)插件很有用，我們有時(shí)在網(wǎng)上看到某些效果，想查看是怎么實(shí)現(xiàn)的，但是代碼被壓縮過(guò)，很難閱讀，不用怕，用ST2打開(kāi)，按下ctrl+alt+5（這是我設(shè)置的快捷鍵），即可讓代碼還原。Tag 格式化標(biāo)簽，讓亂七八糟的代碼，瞬間整齊清晰。BracketHighlighter，括弧高亮顯示Clipboard History，剪切板歷史，可以保存多個(gè)復(fù)制信息，按下ctrl+alt+v，可以選擇歷史剪切板Goto-CSS-Declaration，跳轉(zhuǎn)到css文件該class的聲

11、明處，方便修改查看，如圖下所示，注意對(duì)應(yīng)的css文件要同時(shí)打開(kāi)才行。GotoRecent，打開(kāi)最近的文件，系統(tǒng)有這個(gè)功能，但只能看最近8個(gè)，有點(diǎn)不爽，按ctrl+e，選擇即可。SCSS，支持scss的語(yǔ)法高亮，里面附帶了好多CSS Snippet，無(wú)論現(xiàn)用或者改造成，都可節(jié)省不少時(shí)間。還有很多插件，jquery語(yǔ)法提示，jsHint等等。 總而言之，Sublime Text2是一款不錯(cuò)的代碼編寫(xiě)工具，有好看的ui，人性化的細(xì)節(jié)設(shè)計(jì)，全面的功能和擴(kuò)展機(jī)制，如果你還沒(méi)用過(guò)，請(qǐng)?jiān)囈幌拢粫?huì)讓你失望的。如果說(shuō)有什么 缺點(diǎn)的話，ST2目前對(duì)ANSI、GBK的漢字顯示不正常，（使用utf8編碼就沒(méi)問(wèn)題，package control里有一個(gè)gbk插件）。五、結(jié)語(yǔ)