<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          sublime的使用

          2018-8-16    seo達人

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          一、 前言

                 使用Sublime Text 也有幾個年頭了,版本也從2升級到3了,但猶如寒天飲冰水,冷暖盡自知。最初也是不知道從何下手,滿世界地查找資料,但能查閱到的資料,苦于它們的零碎、片面,不夠系統和全面,所以一路走來,耗費了本人大量的時間和精力。所以蒙生了寫這篇《Sublime Text 3 全程詳細指南》,一來對自己的經驗是一個總結,二來可以給初學者做個系統、全面的指引,讓他們少走我當時走過的彎路,從而能快速地掌握Sublime Text這個優秀的編輯器。

                目前我正在使用的版本是Sublime Text 3 Build 3083的beta版本,已經相當穩定。所以本文所有講解均以此版本為準,并以windows 7 x64平臺為示例。至于其它的版本也不會有太大的差異。

           

          二、 Sublime Text 特點

                1、Sublime Text 是一款跨平臺代碼編輯器,在Linux、OS X和Windows下均可使用。

                2、Sublime Text 是可擴展的,并包含大量實用插件,我們可以通過安裝自己領域的插件來成倍提高工作效率。

                3、Sublime Text 分別是命令行環境和圖形界面環境下的最佳選擇,同時使用兩者會大大提高工作效率。

                4、Sublime Text 為收費軟件,建議有能力的人付費使用,以支持開發者。不過不購買也可以一直使用。

           

          三、下載與安裝

                1、下載:目前官方的正式版本為v2.0.2,我們打開官網下載鏈接http://www.sublimetext.com/3,下載Sublime Text 3 Build 3083。

           

                其中“Windows 64 bit”下載下來為“Sublime Text Build 3083 x64 Setup.exe”的安裝程序;“portable version”下載下來為“Sublime Text Build 3083 x64.zip”編輯器的包,解壓后無需安裝就能運行。

           

                如果你的電腦平臺是windows x86,也就是32位的系統,請點擊“Windows”下載32位的安裝程序,如果不想安裝,就點擊其后的“portable version”下載它的32位編輯器包。

           

                2、安裝:雙擊上一步下載下來的“Sublime Text Build 3083 x64 Setup.exe”,記得選擇“Add to explorer context menu”,把它加入右鍵快捷菜單。其它以默認設置安裝。

           

                3、安裝完畢,雙擊桌面“Sublime Text 3”快捷圖標,打開程序,就可以見到“Sublime Tex的廬山真面目了。

           

                4、如果你不是把“Sublime Text 3”安裝在默認路徑,比如你把它安裝在D盤,請你添加環境變量。

           

          四、設置字體及字體大小

                點菜單“Preferences--->Setting - User”,打開“Preferences.sublime-settings”。

           

                如下圖添加所需代碼,根據自己的喜好進行設置。設置字體用"font_face":"字體名稱",設置字體大小用"font_size":"字體大小",注意它們之間需要用逗號隔開。

           

          五、安裝插件

                 學習Sublime Text擴展插件的安裝前,讓我們來先了解一下它的插件官方網站:https://packagecontrol.io/

           

               當我們在搜索框中輸入插件的關鍵字,相關的插件就會在下面實時顯示出來,我們就可以選擇自己想要的插件進行了解。

           

          1、安裝Package Control

                Package Control為插件管理包,所以我們首先要安裝它。有了它,我們就可以很方便的瀏覽、安裝和卸載Sublime Text中的插件。

                打開Package Control的網頁https://packagecontrol.io/,點擊右側的“Install Now”按鈕。

           

          進入https://packagecontrol.io/installation#st3頁面,選擇“SUBLIME TEXT 3”選項卡,復制出里面的代碼段:

           

          import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; 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)

           

                雙擊桌面“Sublime Text 3”打開程序,快捷鍵 Ctrl + ` 打開Sublime Text控制臺,將之前復制的代碼粘貼到控制臺里,按下“Eenter”鍵。

           

                等待其安裝完成后關閉程序,重新啟動“Sublime Text 3”,點開菜單“Preferences”可見“Package Control”項,說明插件管理包已安裝成功。

           

          2、ConvertToUTF8 插件安裝

                a)功能說明:ConvertToUTF8 能將除UTF8編碼之外的其他編碼文件在 Sublime Text 中轉換成UTF8編碼,在打開文件的時候一開始會顯示亂碼,然后一剎那就自動顯示出正常的字體,當然,在保存文件之后原文件的編碼格式不會改變。

                b)安裝方法一:快捷鍵 Ctrl+Shift+p ,打開 “Command Palette” 懸浮對話框,在頂部輸入 “install”, 然后下選點擊 “Package Control:Install Package”。

           

                在出現的懸浮對話框中輸入 “convert”, 然后點選下面的 “ConvertToUTF8” 插件,就會自動開始安裝,請耐心等待。

           

                 當插件安裝成功后,Sublime Text 3 編輯器底端的狀態欄會有安裝成功的提示。

           

           

                c)安裝方法二:你還可以下載完整的插件包后解壓,放入 C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages 目錄下,以達到安裝插件的目的。下載地址:https://github.com/seanliang/ConvertToUTF8。

          如何找到 Packages 目錄?一個快捷的方法是:雙擊打開你的 “Sublime Text 3”,點菜單 “Preferences--->Browse Packages...”。

           

                它會直接打開插件包存放的目錄 “Packages”。然后你就可以把下載后解壓好的插件包復制到這個 Packages 目錄下。

                當然,如果你熟悉 git,你還可以用 git 從插件的 GitHub 庫直接克隆插件包到 Packages 目錄下。

           

                備注: 以后所有插件都可以通過以上介紹的兩種方法安裝,將不再贅述,推薦方法一,使用“ Package Control”安裝插件。

           

          3、BracketHighlighter 插件

                功能說明:高亮顯示匹配的括號、引號和標簽。

                插件地址:https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

           

          4、LESS 插件

                功能說明:LESS語法高亮顯示。

                插件地址:https://github.com/danro/LESS-sublime

           

          5、sublime-less2css 插件

                功能說明:將less文件編譯成css文件。

                插件地址:https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

                輔助工具:安裝后從 https://github.com/duncansmart/less.js-windows 下載 less.js-windows,然后配置 less.js-windows 的環境變量。

           

          6、Emmet 插件

                功能說明:Emmet的前身是大名鼎鼎的Zen codin。前端開發必備,HTML、CSS代碼快速編寫神器。

                使用方法:默認快捷鍵 Tab

                插件地址:https://github.com/sergeche/emmet-sublime

                輔助工具:PyV8 下載地址: https://github.com/emmetio/pyv8-binaries

                注意:Emmet 插件需要 PyV8 插件的支持,所以在安裝 Emmet 時,會自動安裝 PyV8 插件,如果安裝后 Emmet 不能正常保用,很有可能是因為 PyV8 沒有安裝完全,Sublime Text 2 和 3 容易出現這個問題。你可以刪除它,然后手動下載,采用方法二安裝 PyV8 插件。

           

                使用方法示例:書寫代碼 ul#nav>li.item$*8>a{Item $}

           

                然后把光標定在這行代碼的最后面,按 Tab 鍵,就會自動生成:

                <ul id="nav">

                        <li class="item1"><a href="">Item 1</a></li>

                       <li class="item2"><a href="">Item 2</a></li>

                       <li class="item3"><a href="">Item 3</a></li>

                       <li class="item4"><a href="">Item 4</a></li>

                       <li class="item5"><a href="">Item 5</a></li>

                       <li class="item6"><a href="">Item 6</a></li>

                       <li class="item7"><a href="">Item 7</a></li>

                       <li class="item8"><a href="">Item 8</a></li>

              </ul>

           

           

                更多更詳細的使用方法,請查閱 Emmet 官網:http://docs.emmet.io/

           

          7、JsFormat 插件

                功能說明:JavaScript代碼格式化。

                使用方法:在打開的JavaScript文件里點右鍵,選擇JsFormat。

                插件地址:https://github.com/jdc0589/jsformat

           

          8、ColorHighlighter 插件

                功能說明:顯示所選顏色值的顏色,并集成了ColorPicker

                插件地址:https://github.com/Monnoroch/ColorHighlighter

           

                在16進制的顏色值上點右鍵,選擇“Choose color”,會彈性顏色拾色器,在需要的色塊上單擊。

           

           

                看看效果,顏色值和顯示顏色都相應做了改變。

           

          9、Compact Expand CSS Command 插件

                功能說明:使CSS屬性展開及收縮,格式化CSS代碼。

                使用方法:按 Ctrl+Alt+[ 收縮CSS代碼為一行顯示,按 Ctrl+Alt+] 展開CSS代碼為多行顯示。

                插件地址:https://gist.github.com/vitaLee/2863474 或者:https://github.com/TooBug/CompactExpandCss

           

                快捷鍵 Ctrl+Alt+[ 收縮CSS代碼為效果: 

           

                快捷鍵 Ctrl+Alt+] 展開CSS代碼為多行顯示效果:

           

          10、SublimeTmpl 插件

                功能說明:快速生成文件模板。

                使用方法:SublimeTmpl默認的快捷鍵如下,如果快捷鍵設置沖突可能無效。

                              Ctrl+Alt+h              新建 html 文件

                              Ctrl+Alt+j               新建 javascript 文件

                              Ctrl+Alt+c               新建 css 文件

                              Ctrl+Alt+p              新建 php 文件

                              Ctrl+Alt+r               新建 ruby 文件

                              Ctrl+Alt+Shift+p     新建 python 文件

                插件地址:https://github.com/kairyou/SublimeTmpl

           

                下圖為按快捷鍵 Ctrl+Alt+h 新建的一個 html 文件。

           

                相應的模板為tmpl格式的文件,它們保存在C:\Users\ usersName\AppData\Roaming\Sublime Text 3\Packages\SublimeTmpl\templates下。

           

                當然你可以根據自己的喜好來更改模板格式。例如把“html.tmpl”改為早期的html標準格式后保存。

           

                現在按快捷鍵 Ctrl+Alt+H,新建一個 html 文件,其格式就和更改后模板格式完全一樣了。如下圖:

           

                新增語言:你還可以增加模板文件夾中沒有的文件模板,并做相應的設置來使用這一功能。具體可以參考它的中文文檔:http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/

           

          11、Alignment 插件

                功能說明:使代碼格式的自動對齊。

                使用方法:快捷鍵Ctrl+Alt+A,可能與QQ截圖沖突,二者中的一個要重置快捷鍵。

                插件地址:https://github.com/kevinsperrine/sublime_alignment

           

          12、AutoFileName 插件

                功能說明:自動補全文件(目錄)名。

                插件地址:https://github.com/BoundInCode/AutoFileName

           

                安裝好后就可以來測試如何使用AutoFileName,先以<link>css檔案來示范,當輸入href=””的同時,Sublime Text就會將現在編輯檔案的路徑為中心,判斷該路徑內的所有檔案。

                a)以這個檔案為范本它會去抓取跟abc.html在同一層的檔案列表。

           

                像我們這次要link的是在css資料夾內的auto.css,所以我們直接銜接打上css/,就會跑出css資料夾內的檔案,整個用法以此類推

           

                b)像是<img src=””>的部分也是一樣的方式,沒什么困難了,弄懂一下路徑就好了。

           

               c)再來看看是css檔中要用url,也是用同樣方式,只不過因為要連到上一層的images資料夾內的arrow.png,所以就前面打..(上層),依序去選擇路徑即可。

           

          13、DocBlockr 插件

                功能說明:快速生成JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Groovy, Objective C, C, C++ and Rust語言函數注釋。

                使用方法:在函數上面輸入/** ,然后按 Tab 就會自動生成注釋。

                插件地址:https://github.com/spadgos/sublime-jsdocs

           

                在函數上面輸入/** ,然后按Tab 就會自動生成注釋。

           

          14、SublimeCodeIntel 插件

                功能說明:智能提示。

                插件地址:https://github.com/SublimeCodeIntel/SublimeCodeIntel

           

          15、HTML-CSS-JS Prettify 插件

                功能說明:HTML、CSS、JS格式化。

                插件地址:https://github.com/victorporof/Sublime-HTMLPrettify

                安裝方法:安裝這個套件前必須先安裝node.js,指定 node.exe 的執行檔所在位置。進而安裝HTML-CSS-JS Prettify。

                使用方法一:View -> Show console 或者使用快捷鍵(Ctrl + `),在命令列的地方輸入:view.run_command("htmlprettify"),然后按下Enter。

           

                使用方法二:默認快捷鍵:Ctrl+Shift+H。

                                 你也可以自行設置快捷鍵,菜單 “Preferences---> Key Bindings – User” 里新增:

          { 
              "keys": ["ctrl+shift+o"], 
              "command": "htmlprettify" 
          }

           

                 完成后保存,以上代碼設定執行此插件的快捷鍵是:Ctrl+Shfit+O,自己設定的話就要測試一下,不要跟其他快捷鍵沖突。

           

                格式化前:

           

                格式化后:

           

          16、SideBarEnhancements 插件

                功能說明:側欄菜單擴充功能。

                插件地址:https://github.com/titoBouzout/SideBarEnhancements/tree/st3

           

          17、View In Browser 插件

                功能說明:Sublime Text保存后網頁自動同步更新。

                插件地址:https://github.com/adampresley/sublime-view-in-browser

                使用方法:在打開的文檔任一處點右鍵,選擇“View In Browser”,就會用默認的瀏覽器自動打開該文件。

           

                如果你電腦裝有多個瀏覽器,你想換其它的作為此操作的默認瀏覽器,你可以按以下方法設置:

           

                打開“View In Browser.sublime-settings”,寫入以下代碼:

          {
              "browser": "chrome64"
          }

           

                這樣你就把它默認設置為“Chrome”瀏覽器了,當然你還可以改成“Firefox”、“Safari”等等,前提是你的電腦事先已安裝好了這些瀏覽器。

           

          18、LiveReload 插件

                功能說明:調試網頁實時自動更新。

                使用說明:快捷鍵 Ctr+Alt+V

                插件地址:https://github.com/dz0ny/LiveReload-sublimetext2

           

                同時Chrome瀏覽器也要安裝LiveReload 的擴展插件。

           

          19、TortoiseSVN 插件(win下需要安裝有TortoiseSVN客戶端支持)

                功能說明:版本控制工具。

                插件地址:https://github.com/dexbol/sublime-TortoiseSVN

           

          20、Theme-Soda 插件

                功能說明:的 Sublime Text 主題之一。

                插件地址:https://github.com/buymeasoda/soda-theme

                安裝完成后,點菜單 Preferences--->Settings - User,根據需要的主題效果,添加如下代碼。

                Soda 亮色主題請添加:

          {
              "soda_classic_tabs": true,
              "theme": "Soda Light 3.sublime-theme",
          }

               

                Soda 暗色主題請添加:

          {
              "soda_classic_tabs": true,
              "theme": "Soda Dark 3.sublime-theme",
          }

           

           

                要達到圖中的效果,你還需要下載與之搭配的 color scheme。下載地址:http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip,如果你喜歡 Soda Dark 和 Monokai,我建議你使用 Monokai Extended。這個 color scheme 是 Monokai Soda 的增強,再配合 Markdown Extended ,將大大改善 Markdown 的語法高亮。

           

                如果加代碼 "soda_classic_tabs":true,文件標簽頁形狀會如下顯示:

           

                如果不添加此行代碼,文件標簽頁形狀會如下顯示:

           

          21、Theme-Flatland 插件

                功能說明:的 Sublime Text 主題之一。

                插件地址:https://github.com/thinkpixellab/flatland

           

          22、Theme-Nexus 插件

                功能說明:的 Sublime Text 主題之一。

                插件地址:https://github.com/EleazarCrusader/nexus-theme

           

           

          六、插件列表

              快捷鍵 Ctrl+Shift+P,在對話框中輸入“list”,選擇“Package Control:List Packages”。

                會列出所有已安裝的插件。這樣可以很方便地了解自己已經安裝了哪些插件。

           

          七、移除插件

                有時候我們需要移除自己不想要的插件,具體操作如下:快捷鍵 Ctrl+Shift+P,在對話框中輸入“remove”,選擇“Package Control: Remove Packages”。

           

                然后在出現的插件列表中點選你要移除的插件。

           

          八、Sublime Text 的窗口操作

          1、分屏

                Sublime Text有多種分屏形式,讓我來具體地看一看。菜單 “View-àLayout”就可以選擇你的分屏樣式。

           

                對應的快捷鍵與分屏情況如下:

                Alt+Shift+1       Single             獨屏

                Alt+Shift+2       Columns:2      縱向二欄分屏

                Alt+Shift+3       Columns:3      縱向三欄分屏

                Alt+Shift+4       Columns:4      縱向四欄分屏

           

                Alt+Shift+8       Rows:2          橫向二欄分屏

                Alt+Shift+9       Rows:3          橫向三欄分屏

           

                Alt+Shift+5       Grid              四格式分屏

           

          2、創建新窗

                快捷鍵Ctrl+Shift+N 創建一個新窗口。

           

          九、使用技巧薈萃

           (未完待續。。。。。。)

           

           

           

           

           

           

           

           

           

          十、Sublime Text 快捷鍵列表

                快捷鍵按類型分列如下:

          1、通用

                ↑↓← →    上下左右移動光標

                Alt    調出菜單

                Ctrl + Shift + P    調出命令板(Command Palette)

                Ctrl + `    調出控制臺

          2、編輯

                Ctrl + Enter    在當前行下面新增一行然后跳至該行

                Ctrl + Shift + Enter    在當前行上面增加一行并跳至該行

                Ctrl + ←/→    進行逐詞移動

                Ctrl + Shift + ←/→    進行逐詞選擇

                Ctrl + ↑/↓    移動當前顯示區域

                Ctrl + Shift + ↑/↓    移動當前行

          3、選擇

                Ctrl + D    選擇當前光標所在的詞并高亮該詞所有出現的位置,再次 Ctrl + D 選擇該詞出現的下一個位置,在多重選詞的過程中,使用 Ctrl + K 進行跳過,使用 Ctrl + U 進行回退,使用 Esc 退出多重編輯

                Ctrl + Shift + L    將當前選中區域打散

                Ctrl + J    把當前選中區域合并為一行

                Ctrl + M    在起始括號和結尾括號間切換

                Ctrl + Shift + M    快速選擇括號間的內容

                Ctrl + Shift + J    快速選擇同縮進的內容

               Ctrl + Shift + Space    快速選擇當前作用域(Scope)的內容

          4、查找&替換

                F3    跳至當前關鍵字下一個位置

                Shift + F3    跳到當前關鍵字上一個位置

                Alt + F3    選中當前關鍵字出現的所有位置

                Ctrl + F/H    進行標準查找/替換,之后:

                Alt + C    切換大小寫敏感(Case-sensitive)模式

                Alt + W    切換整字匹配(Whole matching)模式

                Alt + R    切換正則匹配(Regex matching)模式

                Ctrl + Shift + H    替換當前關鍵字

                Ctrl + Alt + Enter    替換所有關鍵字匹配

                Ctrl + Shift + F    多文件搜索&替換

          5、跳轉

                Ctrl + P    跳轉到指定文件,輸入文件名后可以:

                @ 符號跳轉    輸入@symbol跳轉到symbol符號所在的位置

                # 關鍵字跳轉    輸入#keyword跳轉到keyword所在的位置

                : 行號跳轉    輸入:12跳轉到文件的第12行。

                Ctrl + R    跳轉到指定符號

                Ctrl + G    跳轉到指定行號

          6、窗口

                Ctrl + Shift + N    創建一個新窗口

                Ctrl + N    在當前窗口創建一個新標簽

                Ctrl + W    關閉當前標簽,當窗口內沒有標簽時會關閉該窗口

                Ctrl + Shift + T    恢復剛剛關閉的標簽

          7、屏幕

                F11    切換至普通全屏

                Shift + F11    切換至無干擾全屏

                Alt+Shift+1       Single             切換至獨屏

                Alt+Shift+2       Columns:2      切換至縱向二欄分屏

                Alt+Shift+3       Columns:3      切換至縱向三欄分屏

                Alt+Shift+4       Columns:4      切換至縱向四欄分屏

                Alt+Shift+8       Rows:2          切換至橫向二欄分屏

                Alt+Shift+9       Rows:3          切換至橫向三欄分屏

                Alt+Shift+5       Grid              切換至四格式分屏

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合