前端神器-神級代碼編輯軟件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++之類的無可比擬,前端必備的敲碼工具,大量便捷的快捷鍵跟豐富神器的插件

Sublime Text 特點

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

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

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

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

安裝Sublime Text 3

官網: http://www.sublimetext.com/3

file

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

適用於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,用來以后安裝插件用的。

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

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,會在底部出現一個命令輸入框,然后將上面的命令拷貝到輸入框中,回車,等待,安裝成功。

如果在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 打開搜索框。舉個栗子:1、輸入當前項目中的文件名,快速搜索文件,2、輸入@和關鍵字,查找文件中函數名,3、輸入:和數字,跳轉到文件中該行代碼,4、輸入#和關鍵字,查找變量名。

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),及時了解最新動態。

掃描二維碼立即關注 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM