Sublime Text使用手冊范本

SublimeText使用手冊文檔編號：［GUIDE-2015100001密級：公開資料文件密級說明絕密：一旦泄密會使公司利益遭受特別嚴(yán)重的損害：一旦泄密會使公司利益遭受嚴(yán)重的損害；秘密：一旦泄密會使公司利益遭受較大的損害；部資料：一旦泄密會使公司利益遭受一般損害；公開資料：公開有助于公司利益。（免責(zé)）聲明本文檔原始?xì)w（QQ群：JavaWeb基礎(chǔ)群437873646）所有，并保留一切權(quán)利。文件容可供任何機(jī)構(gòu)或個(gè)人修改使用。其僅提供階段性信息，所含容可能會隨時(shí)更新，恕不另行通知。如因文檔使用不當(dāng)造成的直接或間接損失，（QQ群：JavaWeb基礎(chǔ)群437873646）不承擔(dān)任何責(zé)任。

文檔信息”*3修訂日期”*3修訂日期NAMD修訂人修訂容修訂記錄：（N-新建，A-添加，M-修改，D-刪除）版本號修訂日期NAMD修訂人修訂容版本號：2015.0.1版本日期：2015年4月5日制作：Scott制作日期：2015年4月5日審批：Simon審批日期：2015年4月5日審核：審核日期：目錄TOC\o"1-5"\h\z引言1編寫目的1術(shù)語和縮寫定義1參考文檔1安裝與初始化配置1安裝SublimeText1個(gè)人風(fēng)格配置2系統(tǒng)增強(qiáng)3安裝PackageControl3安裝Emmet插件3將SublimeText加入系統(tǒng)右鍵菜單8項(xiàng)目工程9新建工程9保存工程9切換工程11版本控制11附錄12常用操作快捷鍵12常用編程快捷鍵121引言編寫目的SublimeText是一個(gè)輕量、簡潔、髙效、跨平臺的編輯器，方便的配色以及兼容vim快捷鍵等各種優(yōu)點(diǎn)博得了很多前端開發(fā)人員的喜愛！本文為了程序員快速地熟悉Windows系統(tǒng)環(huán)境下，SublimeText的安裝與配置而編寫，希望能有助于提髙前端開發(fā)的工作效率。1.2術(shù)語和縮寫定義前端：HTML、CSS、Javascript、Jquery等網(wǎng)頁編程相關(guān)的容。1.3參考文檔《編碼神器之sublime（插件安裝）》：/r/blogs./liuhy/p/3168693.html《SublimeText2/3安裝使用及常用插件》：/r/blogs./dudumao/p/4054086.html《Sublime創(chuàng)建工程》：.360doc./content/14/0416/13/13084517_369438723.shtml2安裝與初始化配置安裝SublimeText官方：.sublimetext./SublimeText2下載：.sublimetext./2SublimeText3下載：.sublimetext./3以下是SublimeText3下載的樣例頁面:個(gè)人風(fēng)格配置選擇“preferences"菜單，“settinguser”命令，參考設(shè)置如下：{//字體大小"font_size"：15.0,//字體類型font_face:Consolas,//設(shè)置每一行到頂部，以像素為單位的間距，效果相當(dāng)于行距"line_padding_top":2,//設(shè)置每一行到底部，以像素為單位的間距，效果相當(dāng)于行距"line_padding_bottom"：2,//html和xml下突出顯示光標(biāo)所在標(biāo)簽的兩端，影響HTML、XML、CSS等"match_tags":true,//是否顯示代碼折疊按鈕"fold_buttons"：true,//代碼提示"auto_complete"：true,//默認(rèn)編碼格式"default.encoding"："UTF-8",//左邊邊欄文件夾動畫"tree_animation_enabled"：true,//刪除你想要忽略的插件"ignored_packages"：["Vintage"]}

3系統(tǒng)增強(qiáng)3.1安裝PackageControl訪問PackageControl官網(wǎng)：https：//packagecontrol.io/，單擊Installation。PackageControlSearcifeesSimpleManualTh^tfrptascrrEixKiMj腦口larwrt0itrougriiteSudmth：TaiIcwiuma.加tHtuwrtkQrsT*wlhePackageControlSearcifeesSimpleManualTh^tfrptascrrEixKiMj腦口larwrt0itrougriiteSudmth：TaiIcwiuma.加tHtuwrtkQrsT*wlhe5h(!<fcu1iarP^Vr*■-menuOneropen,pwle-尿jpppDpnjij?fyitun(■?)?19甲財(cái)譏mnofSutlvTirTedimoZcsnaoiASJJBLMETEXTJWBLJMETEXT2L^pantunaiLb.nqiMct^ai^hssh]Lb;b■?Kd?97片IN冊吧靈跑短Ul：七氐DH牯2’+鈕Za潮陽[珂軌口]兀汨■:H-TFKkiflfrCami^L.tubLUK-pjick^gF"jL沖■auaLdn#.Lmtil2v4_p?clE3ijiFK_fUTfri|);■rl1lb.rv^wEc.lKtjJ3_cpm?r^ur>LlLb.r'M{LM4.t.budLd_t^MPr?rI；w*]Silii.PoquMT.Peaffl.jHjrttfL^'O)>j妨?u*lkic>.r^t^GT.urLapxi1；'Irrtp:.la/r4時(shí).r^plwtC'B■■naslilLb略也冇筑葉)，hzdNi缽瓷訃；E+wr￥*Lld貳"edzilosd(got3Liin<ctv>d?fplRniptryomaLLnaul]'X(rifaphj-)itdhI■h■】"cpvfrf-31.path.-Jabn^dpp.prf)j■也">.wrL?-|ibf*|Th*LodtcreaiHItebisul&dPjcksgHrotieiAm向ns^asj^iandit^fidmvEbrMIhe步藝號羊0C-wid^I.iiui>LlM>-pACKjetf?i?kThedawinadw#be-MijifirwQiHTTPirnlwdi?THTTPSi^i.ihPyJlijnTi^n^iriira^lix^.%■!■R*!>wil血v^brifiJFrinin-g3I-1A-J56riof&CIYK-r^acrXi竝ijcxiMipiruul和or昭nuziMns40nm彌匝I-dt艸恤心應(yīng)ha^wm,anyourrH**crt|,iwtfmth?^trunngswpstonmruaii/?nstaiParageQjrMCkkdK-PreferencKErPftMPKtajss-menuB^owki^fah^dcandI^Kfiktat%IrrfCjUM丹曲筆as.i*幻陽Cnw^tead旳ih町“r-cil.-^jdLIjm-^Kaei--andccprIriathe-EkJHriNTitlMewj打刑EAtaulEMK+YIIH仍該頁面里有介紹簡單安裝和手動安裝兩種方法。本文僅介紹簡單的安裝方法：使用Ctrl+'快捷鍵，如果安裝了QQ輸入法，將會發(fā)生快捷鍵沖突，則可通過View菜單下的ShowConsole命令打開控制臺(Console)，粘貼官網(wǎng)提供的代碼，按回車確認(rèn)即可安裝。SublimeText3的代碼樣例如下：【官網(wǎng)頁面顯示】SUeUMETEXT3SUBLIMEI^XT2importuri1ib.requestfosjheshlib；h-■eb2297elfl458-F27dB36c04bb0cb3-F282B+Hd0e7aJ09809,2775€cb37ca9d6b2e4b7clb;p-F°PackageControl.sublzme-package=ipp-sublime.instm1led_packages_path();urllib.request?installopener(urllib.irequestbulid_□peiner(ur11ib-reqnest.PircjscyHEndlEr()));by=urllib.「lequi呂弓七?urlaper('http://packagecontnolaio/p+pf.replacefp爲(wèi)9^2&9))tread();dh=hashlib?:&ha256(by}?hexdig@5t{}jprint{'Errorvali-d^tinigdowinlD^d(got第臨insteadof話片pleasetrymanualinstall'X(dh」h))ifdh1-helseopen(osTpath.joinfipp,pf)j'wb')B*wrlte(by)安裝Emmet插件官方網(wǎng)址：emmet.io/。安裝方法：安裝了PackageControl之后，使用快捷鍵“Ctrl+Shift+p”，在彈框中輸入install,如圖：

選擇InstallPackage，回車。加載完插件包倉庫后，會彈出:在輸入框中輸入“Emmet”，回車就裝上Emmet插件了。安裝后就可以正常使用了。使用Emmet：快速產(chǎn)生一個(gè)英文的HTML5頭文件：空白文檔中輸入！，然后按Tab鍵。〈！DOCTYPEhtml〉〈htmllang二"en"〉〈head〉<metacharset二"UTF-8"〉〈title〉Document〈/title〉〈/head〉〈body〉〈/body〉</html〉快速產(chǎn)生一個(gè)中文的HTML5頭文件：空白文檔中輸入!!!+doc[lang=zh-CN]，然后按Tab鍵。注：更好的生成方法請參考本文中“配j&met自定義模版”相關(guān)容。如圖：可以生成如下代碼：〈！D0CTYPEhtml〉〈htmllang二"zh-CN"〉<head><metacharset二"UTF-8"〉〈title〉Document〈/title〉</head>〈body〉

〈/body〈/body〉</html〉全部的命令請查看插件包目錄下的snippets.json文件，例如snippets.json中描述了生成帶lang屬性的html5文檔的方法：htmJ:4t":"1IL￡lt4doc4.[lang=5{lang}]"Jhtml■:"1Il￡l￡4doc4.[lang=S{lang}]\html:xt,p:"1ILjct4d<jci[xmlm=litTp://uuinr.wB.arg/'iggg/Khtni]uml:lanE=-${lang}]"htnl:xs":"3![xs+doc4[xmlns=http://www.y/3,orgZ1999fxhrtn1xml:lang=${laig}]"htnl:xxs":"!!Ixxs-Fdoc4[xmlns=http://wwt,w3-org/1999^xtilnlxml:1ang=${lane}]"!!J^oc[lanE=l<lane}]\獲得snippets.json文檔的方法如下。方法一：打開“Preferences-BrowsePackage":'\PxkaUr\Emmet.subli...PreferencesHelp|3rows-ePackages...■打開安裝包所在目錄后，向上一級，進(jìn)入InstailedPackages目錄下，如圖:5UBUME-PACKA..SUBUME-PACKA..SUBUM6-PACKA-.Djpa匚Lsg?c_CDni：rci_iDadffri55UBUME-PACKA..SUBUME-PACKA..SUBUM6-PACKA-.Djpa匚Lsg?c_CDni：rci_iDadffri5!uhiimE-p..i__jAJignmefTt-sijUirYic--packageE>:lip^±JA,i,2iFDfiridt1ei,.5ubliin±-pA￡lcfige-|jJEmmeu創(chuàng)bllmm?的Ms{袴20123:35SUBUME-PACtCA..葢HTML^.sublirrw-pK^agi?ao-iw-3旳為SUBUME-PAC^,.i_iQuerj'.sublime-pacicagt201574/^丄站帝SUBUME-FWCKA..4JPackjige1CQrYtriol.sutiJifine-pdckage-2015/4/iI5t4.9SUEUME-PACtA^11.5ldeBaFEnhancernents.SLtiSrTie-packa?.,2013/4^7；34￡UBUME-PACtCA.,2Q1滬產(chǎn)15：5520LW^15;582015/4/4lgi262015/4/415:52將“Emmet.sublime-package"文件復(fù)制，改擴(kuò)展名為zip,解壓縮。如圖:亙看也工BCD藉助?打開包含至膵中-共享〒新建劉快山.榕改口期Emmet-副本2015/4/5MPyVS2015/4/4_!0_package_control_loader.&ublime-p...2015/4/4一Alignme-nt.5ublime-pacScag&2015/4/4」EclipseJavaFormatter.sublime-package2015/4/41■Emmet-副本,z'p2015/4/4__」Emmetsublime-package2015/4/4然后，進(jìn)入“"文件夾即可看見snippets.json文件，用sublime可以打開查看其中的容。加Roaming加RoamingPSublimeTtxt3?InstalledPackages#Emmet-al$卜emmet文件也銅㈢空凹工^①祥曲凹嗨”□Wf共R斷和尿■卓面-呂近訪問的匡■卓面-呂近訪問的匡Hw崗囹戶國如也迅手下栽悸或日朗U_init_.py2015/4/423:33PV文件圜bootstriapjs2015/4/423:33JScript5??canius^.jsuni2015/4/423:33JSCN^,!ccntest.py2015/4/423:33PV文件1?劉emm&t-i!3|pp.js2015/4/423:33JScript52015/4/423:33PV文件1?劉python-wraipprr.js2015/4/423:33JScript5,,py^'SloEidcr.py2015/4/423:33PV文件,(reloader.py2015/4/423:33PV文忡11sernverr.py2015/4/423:33PV文件j(snippets.]son2015/4/423:33JSON文方法二：Github地址https：//github./sergeche/emmet—sublime/blob/master/emmet/snippets.jsonEmmet命令：輸入div〉ul〉li*10然后按tab鍵，能顯示如下代碼說明Emmet可以正常使用。<di\><u]><Lix/Li><Lix/Li><Lix/li><Lix/Li><Lix/li><Lix/Li><Lix/Li><Lix/Li><Lix/li></ul>更多類似“div〉ul〉li*10”的Emmet命令請查看官方文檔或研究透snippets.json文件:docs.emmet.io/abbreviations/syntax/其他快速上手參考：①《Emmet快捷方式查詢》emmet.evget./@)《Emmet最全提示說明》.tuicool./articles/IRvaiyEmmet特殊的操作快捷鍵(參考自官方文檔：https：//github./sergeche/emmet-sublime#readme按鍵效果Tab或Ctrl+E直接生成代碼Ctrl+Alt+Enter打開命令編輯欄，輸入命令直接在編輯器在中生成代碼Ctrl+f數(shù)值增大1Ctrl+/數(shù)值減小1Alt+f數(shù)值增大0.1Alt+/數(shù)值減小0.1Shift+Alt+f數(shù)值增大10Shift+Alt+/數(shù)值減小10配置Emmet自定義模版：打開菜單“Preferences-PackageSettings-Emmet-Settings-Use?，里面填寫的容參考“Preferences-PackageSettings-Emmet-Settings-Default”或參考官方的snippets.json文件例：定義一個(gè)bootstrap模版(模版參考：v3.bootcss./getting-started/)。1"snippets"：{//自定義BootStrap模版"html"：{"abbreviations"：{"bsdoc"："html>(head>meta[charset=\"utf-8\"]+meta[http-equiv=\"X-UA-Compatible\"content=\"IE=edge\"]+meta[name=\"viewport\"content=\"width=device-width,initial-scale=1\"]+title{${l：標(biāo)題}})+body","bscss"："<linkrel=\"stylesheet\"href=\"cdn.bootcss./bootstrap/3.3.4/css/bootstrap.min.css\">","bstheme"："〈linkrel=\"stylesheet\"href=\"cdn.bootcss./bootstrap/3.3.4/css/bootstrap-theme.min.css\">","bsjq"："〈script

src=\"cdn.bootcss./jquery/1.11.2/jquery.min.js\">〈/script>",bsjs:〈scriptsrc=\"cdn.bootcss./bootstrap/3.3.4/js/bootstrap.min.js\">〈/script>","bs"："!!!+bsdoc(div.container+bscss+bstheme+bsjq+bsjs)"}}}}以上配置輸入bs后按Tab鍵，自動生成代碼的效果如下:<!DOCTYPghtml>charset=wijitf?hrttp-equiv="X-UA-Cc(npatible11contents<!DOCTYPghtml>charset=wijitf?hrttp-equiv="X-UA-Cc(npatible11contents"IE=edBeF!，>i?wportHconitent■"Mildth?devic?-width,inltial-jct!?■1">cgi匚ntainer,!5|</di>cilri--r1■”"http://cdn,b(4tc$$「cWtoMtstn?p/3rBr4/c$$/bootstr*p,rc$$M></1命k><1in-rel=r,stylesheet"href=,!httpz//cdn-bootcssucom/boots-trap/3u314/c&s/bootstrap-theme.mintcs&r,X/Iirk>escr.i|：二src=n，httpz訂匸dnubootc&s.cafli/jquery/lu1112/jqueryumintjsszrip二》?$criptire"Hhttp:亡日n「bo&tcsspco<h/bootst卜upf耳.3「4/js/bo&tstrjp,min,jsHx/script></body>3.3將SublimeText加入系統(tǒng)右鍵菜單」networks2009jservi打JKO)迴EditwithSublime闿記事本打開取衢斤翊敵口到囲文件(也”.逐加50"protocol.zip'(T)耳打開注冊表，“開始”菜單，選擇“運(yùn)行”命令，輸入“regedit”；找到節(jié)點(diǎn)“HKEY_CLASSSES_ROOT-*-Shell”下面，單擊右鍵，新建“項(xiàng)”，命名為EditwithSublime；“新建字符串值”命名為Icon,值為“Sublimetext所在路徑,0〃，圖中就是C:\ProgramFiles\SublimeText3\sublime_text.exe,0。血注丟昏界血注丟昏界L=I回I玄電FJ誦論￡査呑MlES&SAi基述Hj-』?HICEVJCLAESES_RODT'：Ji1我算認(rèn)1REG.SZ腳H未迓m〉??［」OperiVJishLictJ?"shell:j.blntspad:―aCommandl>-閃removrproperties:卜」runas丄EditwithSublime蘭】conREG-5ZC:\ProgramFile^S-ublime-JX^ublime_textcx^Q在EdithwithSublime文件夾下面新建項(xiàng)command，在“默認(rèn)"字符串值中輸入“C:\ProgramFiles\SublimeText3\sublime_text.exe%1”。皤注田衲靜I三丈件㈢轄舊S^iVj蟲夬閥轄無時(shí)H<EY_CLAS￡E5_R￡JOTt-.*REG-SZC:\ProgramFile5\SublimeTextSVsublime-text.ejce5611sDpenWithLi-Et出.shellbNotepad:D-丄ramok'epTDperti?iD■丄BunasjJiEditwithSublime；???”Command4項(xiàng)目工程4.1新建工程4.1新建工程SublimeText可以把指定的一個(gè)或多個(gè)文件夾當(dāng)作工程的工作空間。首先，展開SiteBar:選擇“View”菜單，在“SiteBar”子菜單中選擇“ShowSideBar”。其次，創(chuàng)建工程：選擇“Project”菜單，單擊“AddFoldertoProject”命令，這時(shí)SideBar中就會顯示相應(yīng)目錄下的目錄樹。如果還需添加其他文件夾，重復(fù)創(chuàng)建工程操作即可。保存工程選擇“Project”菜單，單擊“SaveProjectAs”命令。保存后，SublimeText將自動生成兩個(gè)文件：project_name.sumlime-project：包含工程定義文件，該文件會被記錄到目錄樹里。project_name.sublime-workspace：包含用戶的工程數(shù)據(jù)，例如打開的文件和修改等，該文件不會被記錄到目錄樹里。在*.sublime-project中，你可以定義工程配置。詳情請參考SublimeText官網(wǎng)提供

/r//en/latest/filemanagement/filemanagement.html#projects簡要的配置說明：path：指定左側(cè)文件所在的目錄路徑。默認(rèn)是“.”,意為顯示“AddFoldertoProject”的文件夾下的整個(gè)目錄樹。name：為SideBar指定一個(gè)在目錄樹中的名字。如圖:回33￡5里C：Mlwry\Admini5.tratar\Dc：3ic.top\iS&^C^ffiSbootstrap企業(yè)模古下戢\騎|“磯|1?1扁丁卩「國回33￡5里C：Mlwry\Admini5.tratar\Dc：3ic.top\iS&^C^ffiSbootstrap企業(yè)模古下戢\騎|“磯|1?1扁丁卩「國51(tralv)-SublinvTextbjIM-!ubFime-projedFileEditSelectionFindViewGotoToolsProjectPreferenceHdpOPENriLLSF01DFR5二呂13vascript?C]vendor由bootstrapjs團(tuán)jtqiuiery.eaElnng-13.jJ5團(tuán)malnjs由pluginsjsbslv.5ublimEpirGjEctfolders":"path":，1narne'\11javascriptM丁]file_exclude_patterns:指定排除的文件。例如：配置隱藏bootstrap開頭的和jquery開頭的文件。審fojavascript>審fojavascript>亡?ndcir向malnds?Ei1{"fcldars11:[(/