前端神器-神級代碼編輯軟件Sublime Text下載、使用教程、插件推薦說明、全套快捷鍵

Sublime Text 是一個代碼編輯器,也是HTML和散文先進的文本編輯器。Sublime Text是由程序員Jon Skinner於2008年1月份所開發出來,它最初被設計爲一個具備豐富擴展功能的Vim。 
Sublime Text具備漂亮的用戶界面和強大的功能,例如代碼縮略圖,Python的插件,代碼段等。還可自定義鍵綁定,菜單和工具欄。Sublime Text 的主要功能包括:拼寫檢查,書籤,完整的 Python API , Goto 功能,即時項目切換,多選擇,多窗口等等。Sublime Text 是一個跨平臺的編輯器,同時支持Windows、Linux、Mac OS X等操做系統。 
Notepad++之類的無可比擬,前端必備的敲碼工具,大量便捷的快捷鍵跟豐富神器的插件css

Sublime Text 特色

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

二、Sublime Text 是可擴展的,幷包含大量實用插件,咱們能夠經過安裝本身領域的插件來成倍提升工做效率。前端

三、Sublime Text 分別是命令行環境和圖形界面環境下的最佳選擇,同時使用二者會大大提升工做效率。node

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

安裝Sublime Text 3

官網: http://www.sublimetext.com/3程序員

file

註冊碼(學習目的,請支持正版):github

適用於Sublime Text2同時也適用於Sublime Text3

ZYNGA INC.
50 User License EA7E-811825 927BA117 84C9300F 4A0CCBC4 34A56B44 985E4562 59F2B63B CCCFF92F 0E646B83 0FD6487D 1507AE29 9CC4F9F5 0A6F32E3 0343D868 C18E2CD5 27641A71 25475648 309705B3 E468DDC4 1B766A18 7952D28C E627DDBA 960A2153 69A2D98A C87C0607 45DC6049 8C04EC29 D18DFA40 442C680B 1342224D 44D90641 33A3B9F2 46AADB8F
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

選擇對應的版本安裝。完過後,要安裝一個基礎的、必備的包管理:Package Control,用來之後安裝插件用的。chrome

安裝指導:https://sublime.wbond.net/installationjson

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 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)
  • 1

打開ST3,點擊菜單 View -> Show Console,會在底部出現一個命令輸入框,而後將上面的命令拷貝到輸入框中,回車,等待,安裝成功。sublime-text

若是在Perferences->中看到package control這一項,則安裝成功。 
file

經常使用插件安裝

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

當咱們在搜索框中輸入插件的關鍵字,相關的插件就會在下面實時顯示出來,咱們就能夠選擇本身想要的插件進行了解。 
file

通過上面安裝了Package Control後,咱們就能夠經過快捷鍵 Ctrl+Shift+P 打開 Package Control 來安裝插件了。在打開的輸入框中輸入 install ,會根據你的輸入自動提示,選擇 Install Package。 
插件安裝

等待,而後又會彈出一個輸入框,讓你輸入你要安裝的插件。

ConvertToUTF8

咱們要安裝支持非UTF8編碼的一個插件,只須要在輸入框中輸入 convert,自動匹配後,選擇 ConvertToUTF8 插件,回車,等待,安裝完畢,這樣,ST就支持顯示如 GBK 等編碼的內容了。 
file

ChineseLocalizations

一種讓sublime漢化的插件 
file

Emmet(原名 Zen Coding)

一種快速編寫html/css的方法 
file

BracketHighlighter

相似於代碼匹配,能夠匹配括號,引號等符號內的範圍。 
file

Autoprefixer

CSS3 私有前綴自動補全插件,顯然也頗有用哇 
file

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

Colorpicker

使用一個取色器改變顏色 
快捷鍵:ctrl+shift+c 
file

SyncedSidebarBg

自動同步側邊欄底色爲編輯窗口底色 
file

DocBlockr  

DocBlockr 能夠自動生成 PHPDoc 風格的註釋。它支持的語言有 Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++

這個插件改進了側邊欄,增長了許多功能,如按F12調用瀏覽器查看頁面

Themr  

主題管理,切換主題的時候,不用本身修改配置文件了,用這個能夠方便的切換主題

JsFormat

格式化 js 代碼

Goto-CSS-Declaration

安裝後按快捷鍵 win 鍵 +Alt+. 跳轉到 css 文件該 class 的聲明處,方便修改查看,注意對應的css文件要同時打開才行.

Prettify Code

格式化 Html/CSS/JavaScript,一鍵讓代碼變整齊。

Sublime?Linter

自動提示補齊代碼,支持 JavaScript、Python、PHP 等等經常使用語言。

View In Browser 插件

功能說明:Sublime Text保存後網頁自動同步更新。 
插件地址:https://github.com/adampresley/sublime-view-in-browser 
使用方法:在打開的文檔任一處點右鍵,選擇「View In Browser」,就會用默認的瀏覽器自動打開該文件。 
file 
若是你電腦裝有多個瀏覽器,你想換其它的做爲此操做的默認瀏覽器,你能夠按如下方法設置: 
file 
打開「View In Browser.sublime-settings」,寫入如下代碼: 


"browser": "chrome64" 


file 
這樣你就把它默認設置爲「Chrome」瀏覽器了,固然你還能夠改爲「Firefox」、「Safari」等等,前提是你的電腦事先已安裝好了這些瀏覽器。

### LiveReload 插件 
功能說明:調試網頁實時自動更新。 
使用說明:快捷鍵 Ctr+Alt+V 
插件地址:https://github.com/dz0ny/LiveReload-sublimetext2 
file 
同時Chrome瀏覽器也要安裝LiveReload 的擴展插件。 
file

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

功能說明:版本控制工具。 
插件地址:https://github.com/dexbol/sublime-TortoiseSVN

Theme-Soda 插件

功能說明:最受歡迎的 Sublime Text 主題之一。 
插件地址:https://github.com/buymeasoda/soda-theme 
安裝完成後,點菜單 Preferences—>Settings - User,根據須要的主題效果,添加以下代碼。 
Soda 亮色主題請添加: 
file 
Soda 暗色主題請添加:

{
    "soda_classic_tabs": true, "theme": "Soda Dark 3.sublime-theme", }
  • 1
  • 2
  • 3
  • 4

file

要達到圖中的效果,你還須要下載與之搭配的 color scheme。下載地址:http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip,若是你喜歡 Soda Dark 和 Monokai,我建議你使用 Monokai Extended。這個 color scheme 是 Monokai Soda 的加強,再配合 Markdown Extended ,將大大改善 Markdown 的語法高亮。 
file 
若是加代碼 「soda_classic_tabs」:true,文件標籤頁形狀會以下顯示: 
file 
若是不添加此行代碼,文件標籤頁形狀會以下顯示: 
file

插件列表

快捷鍵 Ctrl+Shift+P,在對話框中輸入「list」,選擇「Package Control:List Packages」。 
file 
會列出全部已安裝的插件。這樣能夠很方便地瞭解本身已經安裝了哪些插件。 
file

移除插件

有時候咱們須要移除本身不想要的插件,具體操做以下:快捷鍵 Ctrl+Shift+P,在對話框中輸入「remove」,選擇「Package Control: Remove Packages」。 
file 
而後在出現的插件列表中點選你要移除的插件。 
file

主要快捷鍵列表

掌握基本的代碼編輯器的快捷鍵,能讓你打碼更有效率。剛開始可能有些生疏,只要花一兩個星期堅持使用並熟悉這些經常使用的快捷鍵,從此就能解放鼠標了,省心省力又省時,何樂而不爲呢。

如下是我的總結不徹底的快捷鍵總彙,祝願各位順利解放本身的鼠標。

選擇類

Ctrl+D 選中光標所佔的文本,繼續操做則會選中下一個相同的文本。 
Alt+F3 選中文本按下快捷鍵,便可一次性選擇所有的相同文本進行同時編輯。舉個栗子:快速選中並更改全部相同的變量名、函數名等。

Ctrl+L 選中整行,繼續操做則繼續選擇下一行,效果和 Shift+↓ 效果同樣。

Ctrl+Shift+L 先選中多行,再按下快捷鍵,會在每行行尾插入光標,便可同時編輯這些行。

Ctrl+Shift+M 選擇括號內的內容(繼續選擇父括號)。舉個栗子:快速選中刪除函數中的代碼,重寫函數體代碼或重寫括號內裏的內容。

Ctrl+M 光標移動至括號內結束或開始的位置。

Ctrl+Enter 在下一行插入新行。舉個栗子:即便光標不在行尾,也能快速向下插入一行。

Ctrl+Shift+Enter 在上一行插入新行。舉個栗子:即便光標不在行首,也能快速向上插入一行。

Ctrl+Shift+[ 選中代碼,按下快捷鍵,摺疊代碼。

Ctrl+Shift+] 選中代碼,按下快捷鍵,展開代碼。

Ctrl+K+0 展開全部摺疊代碼。

Ctrl+← 向左單位性地移動光標,快速移動光標。

Ctrl+→ 向右單位性地移動光標,快速移動光標。

shift+↑ 向上選中多行。

shift+↓ 向下選中多行。

Shift+← 向左選中文本.

Shift+→ 向右選中文本。

Ctrl+Shift+← 向左單位性地選中文本。

Ctrl+Shift+→ 向右單位性地選中文本。

Ctrl+Shift+↑ 將光標所在行和上一行代碼互換(將光標所在行插入到上一行以前)。

Ctrl+Shift+↓ 將光標所在行和下一行代碼互換(將光標所在行插入到下一行以後)。

Ctrl+Alt+↑ 向上添加多行光標,可同時編輯多行。

Ctrl+Alt+↓ 向下添加多行光標,可同時編輯多行。

編輯類

Ctrl+J 合併選中的多行代碼爲一行。舉個栗子:將多行格式的 CSS 屬性合併爲一行。

Ctrl+Shift+D 複製光標所在整行,插入到下一行。

Tab 向右縮進。

Shift+Tab 向左縮進。

Ctrl+K+K 從光標處開始刪除代碼至行尾。

Ctrl+Shift+K 刪除整行。

Ctrl+/ 註釋單行。

Ctrl+Shift+/ 註釋多行。

Ctrl+K+U 轉換大寫。

Ctrl+K+L 轉換小寫。

Ctrl+Z 撤銷。

Ctrl+Y 恢復撤銷。

Ctrl+U 自動讀取圖片寬高。

Ctrl+F2 設置書籤

Ctrl+T 左右字母互換。

F6 單詞檢測拼寫。

搜索類

Ctrl+F 打開底部搜索框,查找關鍵字。

Ctrl+shift+F 在文件夾內查找,與普通編輯器不一樣的地方是sublime容許添加多個文件夾進行查找,略高端,未研究。

Ctrl+P 打開搜索框。舉個栗子:一、輸入當前項目中的文件名,快速搜索文件,二、輸入@和關鍵字,查找文件中函數名,三、輸入:和數字,跳轉到文件中該行代碼,四、輸入#和關鍵字,查找變量名。

Ctrl+G 打開搜索框,自動帶:,輸入數字跳轉到該行代碼。舉個栗子:在頁面代碼比較長的文件中快速定位。

Ctrl+R 打開搜索框,自動帶@,輸入關鍵字,查找文件中的函數名。舉個栗子:在函數較多的頁面快速查找某個函數。

Ctrl+:打開搜索框,自動帶#,輸入關鍵字,查找文件中的變量名、屬性名等。

Ctrl+Shift+P 打開命令框。場景栗子:打開命名框,輸入關鍵字,調用sublime text或插件的功能,例如使用package安裝插件。

Esc 退出光標多行選擇,退出搜索框,命令框等。

顯示類

Ctrl+Tab 按文件瀏覽過的順序,切換當前窗口的標籤頁。

Ctrl+PageDown 向左切換當前窗口的標籤頁。

Ctrl+PageUp 向右切換當前窗口的標籤頁。

Alt+Shift+1窗口分屏,恢復默認1屏(非小鍵盤的數字)

Alt+Shift+2 左右分屏-2列

Alt+Shift+3 左右分屏-3列

Alt+Shift+4 左右分屏-4列

Alt+Shift+5 等分4屏

Alt+Shift+8 垂直分屏-2屏

Alt+Shift+9 垂直分屏-3屏

Ctrl+K+B 開啓/關閉側邊欄。

F11 全屏模式

Shift+F11 免打擾模式


一路走來數個年頭,感謝RDIFramework.NET框架的支持者與使用者,你們能夠經過下面的地址瞭解詳情。

RDIFramework.NET官方網站:http://www.rdiframework.net/

RDIFramework.NET官方博客:http://blog.rdiframework.net/

同時須要說明的,之後的全部技術文章以官方網站爲準,歡迎你們收藏!

RDIFramework.NET框架由專業團隊長期打造、一直在更新、一直在升級,請放心使用!

歡迎關注RDIFramework.NET框架官方公衆微信(微信號:guosisoft),及時瞭解最新動態。

掃描二維碼當即關注 

相關文章
相關標籤/搜索