使用的是日文版Windows系統,在編輯中文時很多編譯器不支持中文,保存后出現嚴重的亂碼。今天決定安裝Sublime Text版本2.0.2。
在這里介紹一下,下載及安裝Sublime Text的方法。
1) 點擊以下鏈接訪問Sublime Text官網。
2) 點擊「Downalod」。
在這里直接點擊「Download 佛如Windows」也可以。
3) 下載Sublime Text版本2.0.2。
在這里選擇的是Windows32位版,需根據實際情況選擇下載的版本。
1) 雙擊下載的「Sublime Text 2.0.2 Setup.exe」文件之后,點擊「Next」。
2) 安裝目錄使用默認,點擊「Next」。
3) 勾選「Add to explorer context menu」后,點擊「Next」。
4) 點擊「Install」安裝Sublime Text。
5) 點擊「Finish」完成Sublime Text的安裝。
如果沒有安裝Sublime Text的Package Control的話,可以進行手動安裝。
1) 點擊以下鏈接,訪問Package Control官網。
2) 啟動Sublime Text之后,依次點擊「Preferences」->「Browse Packages」。
3) 選擇「Sublime Text 2\Installed Packages」目錄
點擊「Browse Packages」的目錄是「Sublime Text 2\Packages」,需要選擇「Sublime Text 2\Installed Packages」目錄。
4) 安裝Package Control
把下載的「Package Control.sublime-package」文件存放到「Sublime Text 2\Installed Packages」目錄下。
5) 重啟Sublime Text后,就可以在「Preferences」下出現了「Package Control」。
最近編輯PHP和HTML及CSS時間較多,因此安裝如下Sublime Text插件。有多種多樣的插件根據實際需要安裝就可以。而安裝插件的方法是一樣的以SublimeCodeIntel為例,介紹安裝Sublime Text插件的方法。
1) 啟動Subliem Text之后依次點擊「Preferences」->「Package Control」。
或者使用快捷鍵「Ctrl + Shift + p」啟動Package Control。
2) 輸入「Package Control:ins」。
3) 輸入安裝的插件名「SublimeCodeIntel」。
在這里輸入插件名稱的一部分的話,會顯示相關插件名稱。
安裝完成SublimeCodeIntel插件之后會顯示如下頁面,但是并不是所有插件都會顯示類似信息。
4) 重啟Sublime Text,完成插件的安裝。
Emmet的使用方法可參照Emmet官網,可以大大的減少編寫代碼的時間。
Sublime Text是一個代碼編輯器,也是HTML和散文先進的文本編輯器。
本文通過實例來介紹項目中常用快捷鍵和插件的用法,熟悉快捷鍵和引用插件可以極大地提高我們的開發效率。
輸入“html:5”后點擊Tab鍵或輸入“!”后點擊Ctrl+E都能轉換為html5的骨架結構,轉換為的代碼如下圖:
Tips:需安裝Emmet插件;
右下角的文本類型要選為“html”。
輸入“div.wrapper>div.header>span.title{標題}”或“ul.lis>li*5>p.title+p.content”后點擊Tab可以快速生成相應的代碼,轉換為的代碼如下圖:
Tips:上面兩種寫法只是其中的一部分,大家可以自己練習多種組合;
img[src="face/bd/$.gif"] +Tab,bd目錄下自動從1開始到最后,適合于一次性增加從1--多個的圖片。
“Ctrl+Shift+P”用于快速更改文件類型(js/css)(第一圖)、安裝插件(第二圖)等,如下圖:
“Ctrl+G”用于快速定位到行數,比如審查元素知道修改的樣式在那一行,就可以點擊快捷鍵,然后輸入行數,就能定位到相應的位置進行修改;
“Ctrl+C”用于撤回信息,而“Ctrl+Y”用于恢復信息,都可多次操作;
“Ctrl+/”用于注釋信息,可單行也可以多行;
“Ctrl+F”用于查找輸入的內容,可往前、往后或全部查找;
“Ctrl+Shirt+D”用于復制游標所在行;
“Ctrl+D”用于選擇游標所在單詞,連續“Ctrl+D”實現多個選擇(選擇與第一次選擇相同的單詞);如果中間有要跳過的相同單詞,可以先點擊“Ctrl+K”再點擊“Ctrl+D”;
“Alt+F3”用于選擇所有與游標所在單詞相同的單詞,跟上面一個快捷鍵對于批量修改非常方便。
“Alt+Shift+1/2/3”,后面數字表示要顯示多少列,如下圖,對于參照html編寫css和js有很大的便利。
Tips:從標題到這塊是最經常用到的快捷鍵,一定熟悉記住。
“Ctrl+] ”增加縮進,“Ctrl+] ” 減小縮進,好的排版有利于查看;
“Ctrl+Shift+V”保持縮進粘貼,直接用“Ctrl+V”有時會導致顯示排版亂了,使用該快捷鍵可以保持原來的排版;
“Ctrl+PgUp”往前切換Tab欄的文件,“Ctrl+PgDn”往后切換Tab欄的文件;
“/**+Tab”常用于js的自動補全注釋信息和內容;
“Ctrl+P”用于快速查找并打開文件,點擊快捷鍵后打開命令面板,直接點擊就可以打開文件,也可以進行搜索操作;
“Ctrl+L”用于選擇單行;
“Ctrl+H”用于查找替換,可替換單個或全部替換;
“Ctrl+Shift+Enter”在當前上方添加一行;
右鍵點擊“Open Containing Folder”可以打開該文件的本地目錄。
“Ctrl+Shift+P”打開命令面板,輸入range點擊第一條就會出現了,然后輸入開始和結束數字,可以批量修改序號,需安裝插件Text Pastry。
“跟蹤函數ctags”在使用函數調轉功能前,需要先生成.tags文件,只需在項目文件管理器的項目文件上右鍵點擊Ctags:Rebuild Tags即可(注意,在改動文件之后會重新生成.tags);所有工作都準備充分之后,就可以在函數名上右鍵點擊navigate 頭definition跳轉到指定函數了,返回用jump back,需安裝插件ctags。
直接安裝:直接下載安裝包解壓縮到Packages目錄(菜單->preferences->Browse Packages);
使用Package Control組件安裝(在線安裝):點擊“Ctrl+`”,然后輸入“import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())()”回車,下載完畢后,重啟Sublime Text程序;如果在Perferences->中看到package control這一項,則安裝成功。
Tips:輸入代碼為3版本,其他版本代碼可以百度搜索。
用Package Control安裝插件的方法,按下“Ctrl+Shift+P”調出命令面板,輸入install 調出 Install Package 選項并回車,然后在列表中選中要安裝的插件。
比如“Emmet”,在搜索框輸入“Emmet”,列表就會顯示插件“Emmet”,然后點擊該條數據,就會開始安裝該插件,安裝信息可查看左下角。
Tips:安裝插件時保持網絡暢通,避免插件由于網絡原因奔潰。
常用插件的用法說明:
Emmet(原名 Zen Coding):一種快速編寫html/css的方法;
Autoprefixer:CSS3私有前綴自動補全插件;
AutoFileName:顯示路徑下文件名;
SyncedSidebarBg:自動同步側邊欄底色為編輯窗口底色;
HTML-CSS-JS Prettify:html/css/js格式化工具,依賴node.js,格式化的HTML不能有中文和中文符號等,HTMLPrettify.sublime-settings路徑對應node安裝目錄,使用快捷鍵“Ctrl+Shift+H”;
sublimelinter:檢查js語法;
jQuery:補全JQ代碼;
Text Pastry:可以一次性改批量序號,用法快捷鍵里面有介紹;
ctags:跟蹤函數,用法快捷鍵里面有介紹;
Less2Css:保存less文件時候自動生成css文件,windows下,Less2CSS對lessc.cmd有依賴,請下載:https://github.com/duncansmart/less.js-windows/releases后并將其路徑( E:/Less)添加至系統環境變量中;一般建議生產環境不使用less,所以這個還是蠻方便的;
SideBarEnhancements:設置瀏覽器,如下圖。
Sublime Text 是一套跨平臺的文本編輯器,支持基于Python的插件。Sublime Text 是專有軟件,可通過包(Package)擴充本身的功能。大多數的包使用自由軟件授權發布,并由社區建置維護。
“Go to anything”功能:可快速跳至文件、符號或行數。
“Command palette”功能:彈性快捷鍵功能。
多行選擇功能:同時修改多內聯容。
基于 Python 語言的外掛 API。
針對個別項目使用不同的編輯器設置。
通過 JSON 文件自定義設置值。
跨平臺(Windows、Linux 和 Mac OS X)。
兼容 TextMate 的語言標記語法。
3.1 Package Control
除了自身擁有無數實用功能和特性之外,它還能安裝使用各種擴展/皮膚/配色方案等來增強自己。現在介紹的這個 Package Control 可以看做是一個ST2的擴展管理器,使用它,你可以用非常神奇、非常簡單方便的方法去下載、安裝、刪除 Sublime Text 2 的各種插件、皮膚等,相信我,想更好地使用 ST2 絕對不能沒有它!不過 ST2 本身并沒有自帶這個工具,我們需要自行安裝它,方法很簡單:
1、在 SublimeText2 的目錄里面找到 Data > Installed Packages 的文件夾 (如沒有請手動新建)
2、在這里下載 Package Control.sublime-package 文件
3、將下載到的文件放進去 Installed Packages 里面
4、重新啟動 Sublime Text 即可如果 Package Control 已經安裝成功,那么 Ctrl+Shift+P 調用命令面板,我們就會找到一些以“Package Control:”開頭的命令,我們常用到的就是幾個 Install Package (安裝擴展)、List Packages (列出全部擴展)、Remove Package (移除擴展)、Upgrade Package (升級擴展)。
但如果你按照上面的方法確實搞不定,可以試試按鍵盤 Ctrl+~ (數字1左邊的按鍵)調出控制臺,然后拷貝下面的代碼進去并回車,它會自動幫你新建文件夾并下載文件的,與上面的方法最終效果是一樣的:
import urllib2,os,hashlib; h = '2deb499853c4371624f5a07e27c334aa' + 'bf8c4e67d14fb0525ba4f89698a6d7e1'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
3.2 GBK to UTF8
將文件編碼從GBK轉換成UTF8,快捷鍵Ctrl+Shift+C
3.3 zenCoding
zenCoding是一種快速的html、css編寫方式。默認用tab鍵.
已經更名為Emmet。
3.4 JS Format
一個JS代碼格式化插件。默認ctrl+alt+f
3.5 BracketHighlighter
括弧高亮插件,清晰明了
3.6 Git
代碼版本管理
3.7 HTML格式化
TAG
3.8 SideBarEnhancements
配置瀏覽器打開文件
在sublime-text中設置瀏覽器預覽
3.9 docblockr
安裝DocBlockr插件后,在function上一行輸入/**,然后按Tab就自動補全注釋,生成注釋如下所示:
/**
* [clone description]
* @param {[type]}
* @return {[type]}
*/
function
clone(obj){
}
3.10 HTML/CSS/JS prettify
HTML/CSS/JS格式化插件
Sublime Text 2 - 性感無比的代碼編輯器!程序員必備神器!跨平臺支持Win/Mac/Linux
前端開發必備!Emmet使用手冊
Emmet:HTML/CSS代碼快速編寫神器
Sublime text 2編輯器
*請認真填寫需求信息,我們會在24小時內與您取得聯系。