學(xué)習(xí)web前端之神器sublimetext3-碼農(nóng)何時(shí)

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 16:44:25

學(xué)習(xí)web前端之神器sublimetext3-碼農(nóng)何時(shí)

學(xué)習(xí)web前端之神器sublimetext3-碼農(nóng)何時(shí): 第一次在博客園寫博客，以前都是看別人寫的技術(shù)在自己慢慢的學(xué)習(xí)?，F(xiàn)在想自己把每天學(xué)習(xí)的東西理解并記錄下來，加深下印象以后可以做個(gè)回顧。不知道自己能否堅(jiān)持每周至少寫2篇博文。古話說的好：工欲善其事,必先利其器。所以我們要找到一個(gè)神器來幫助我

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀學(xué)習(xí)web前端之神器sublimetext3-碼農(nóng)何時(shí): 第一次在博客園寫博客，以前都是看別人寫的技術(shù)在自己慢慢的學(xué)習(xí)?，F(xiàn)在想自己把每天學(xué)習(xí)的東西理解并記錄下來，加深下印象以后可以做個(gè)回顧。不知道自己能否堅(jiān)持每周至少寫2篇博文。古話說的好：工欲善其事,必先利其器。所以我們要找到一個(gè)神器來幫助我

　　第一次在博客園寫博客，以前都是看別人寫的技術(shù)在自己慢慢的學(xué)習(xí)。現(xiàn)在想自己把每天學(xué)習(xí)的東西理解并記錄下來，加深下印象以后可以做個(gè)回顧。不知道自己能否堅(jiān)持每周至少寫2篇博文。

　　古話說的好：工欲善其事,必先利其器。所以我們要找到一個(gè)神器來幫助我們更好的學(xué)習(xí)前端開發(fā)，要么記事本怎么樣？不錯(cuò)是不錯(cuò)估計(jì)要寫到猴年馬月了。

　　百度一搜，web前端開發(fā)利器有很多，比如：EditPlus，Dreamweaver，HBuilder，Webstorm，Aptana Studio，Sublime text,這么多最后我還是選擇了sublime，據(jù)說是前端開發(fā)神器。

　　Sublime text：輕量級(jí)IDE（集成開發(fā)環(huán)境），神器神在可擴(kuò)展性，并包含大量實(shí)用插件，我們可以通過安裝自己領(lǐng)域的插件來成倍提高工作效率。擁有高效、沒有干擾的界面，在編輯方面的多選、宏、代碼片段等功能。

一、安裝Sublime Text 3

　　官網(wǎng)/下載網(wǎng)站：http://www.sublimetext.com/3

　　對(duì)應(yīng)這各個(gè)版本，選擇最適合你系統(tǒng)的版本下載安裝，大約7MB左右，直接下一步即可

二、安裝Package Control

　　安裝好了這時(shí)候我們想要sublime用的更稱手，要安裝一個(gè)基礎(chǔ)的也是sublime必備的包管理：Package Control，用來以后安裝插件用的。

　　點(diǎn)擊菜單 View -> Show Console或者 Ctrl + ` 會(huì)在底部出現(xiàn)一個(gè)命令輸入框（sublime控制臺(tái)），然后將下面的命令拷貝到輸入控制臺(tái)中，回車，等待，安裝成功。

　　安裝代碼和指導(dǎo)地址:https://packagecontrol.io/installation

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)

　　在安裝Package Control過程中有時(shí)候會(huì)出先錯(cuò)誤，但是安裝還是成功的，并沒有什么影響。如果安裝失敗建議你關(guān)掉sublime然后在重復(fù)上面的操作，在安裝Package Control過程中會(huì)有點(diǎn)卡頓。

三、安裝插件

　　上面已經(jīng)安裝了Package Control，這是時(shí)候我們可以通過快捷鍵　 Ctrl + Shift + P 打開命令面板，然后輸入pack就會(huì)出現(xiàn)安裝

　　點(diǎn)擊紅色框中的安裝，稍作等待

　　安裝成功后的界面

　　成功安裝Package Control之后，這時(shí)候我們?cè)谕ㄟ^ Ctrl + Shift + P 　　打開命令面板輸入想要安裝的插件：

　　在安裝插件中也需要等待:

　　作為一個(gè)前端開發(fā)人員，我認(rèn)為需要的插件：

Emmet：（誰用誰知道）快速生成代碼段插件，熟練使用讓你鍵步如飛

如何使用百度一下，你就知道。
ConvertToUTF8：直接在菜單欄中可以轉(zhuǎn)了，專為中文設(shè)計(jì)，媽媽再也不通擔(dān)心中文亂碼問題了
BracketHighlighter：顯示我在哪個(gè)括號(hào)內(nèi)
JSFormat：Javascript的代碼格式化插件
AutoFileName：自動(dòng)完成文件名的輸入，如圖片選取
Sublime CodeIntel：代碼自動(dòng)提示
Bracket Highlighter：類似于代碼匹配，可以匹配括號(hào)，引號(hào)等符號(hào)內(nèi)的范圍。

　　這只是一小部分sublime插件，如果你需要更多百度一下，根據(jù)你的喜好去下載你喜歡的插件。

四、快捷鍵

　　作為一個(gè)開發(fā)人員熟練使用快捷鍵是必須的，這樣才能事半功倍。

　　sublime通用的快捷鍵這里就不談了，因?yàn)榘俣壬嫌幸欢?。下面我要談的是如何設(shè)置自己的快捷鍵。

　　當(dāng)你發(fā)現(xiàn)你下了一堆插件，但是有時(shí)候去使用一些插件的快捷鍵卻怎么按都不會(huì)出現(xiàn)效果，我想這時(shí)候你是快捷鍵沖突了。sublime中的默認(rèn)快捷鍵在編輯器中是無法修改的，這時(shí)候你需要自定義快捷鍵，如何自定義下面分享：

　　Key Bindings - Default是sublime默認(rèn)的快捷鍵，點(diǎn)開他你想修改但是sublime是不會(huì)讓你修改的。

　　這時(shí)候就要用到Key Bindings - User

　　　　配置的話跟默認(rèn)的一樣去配置，json格式:

　　Keys:需要設(shè)置的快捷鍵組合

　　command:按下快捷鍵發(fā)生的sublime命令,sublime根據(jù)命令發(fā)生相應(yīng)的事件。

　　比如：上圖的事件是打開一個(gè)新的編輯窗口，當(dāng)我感覺這個(gè)快捷鍵使用的不爽，于是就修改為ctrl+shift+.保存即可，當(dāng)然在默認(rèn)里面是修改不了，把默認(rèn)中的代碼復(fù)制到User中。當(dāng)你在按下快捷鍵的時(shí)候他會(huì)執(zhí)行你User中的快捷鍵，而不是執(zhí)行Default中的快捷鍵。

這個(gè)修改快捷鍵不難，如何去定義一個(gè)沒有不知道命令的快捷鍵

五、自定義快捷鍵

　　在sublime做任何事情都會(huì)有一個(gè)命令

　　如何查看命令？

　　打開sublime控制臺(tái)，前面已經(jīng)說過控制臺(tái)打開方式：點(diǎn)擊菜單 View -> Show Console或者 Ctrl + `會(huì)在底部出現(xiàn)一個(gè)命令輸入框（sublime控制臺(tái)）

　　輸入 sublime.log_commands(True) 然后回車，就能監(jiān)控你所操作的命令。