Sublime Text 3 全程詳細圖文原創教程(持續更新中。。。)
轉自:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/7838660.html
一、 前言
使用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,我們開啟官網下載連結
其中“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”按鈕。
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 外掛
功能說明:高亮顯示匹配的括號、引號和標籤。
4、LESS 外掛
功能說明:LESS語法高亮顯示。
5、sublime-less2css 外掛
功能說明:將less檔案編譯成css檔案。
6、Emmet 外掛
功能說明:Emmet的前身是大名鼎鼎的Zen codin。前端開發必備,HTML、CSS程式碼快速編寫神器。
使用方法:預設快捷鍵 Tab
注意: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>
7、JsFormat 外掛
功能說明:JavaScript程式碼格式化。
使用方法:在開啟的JavaScript檔案裡點右鍵,選擇JsFormat。
8、ColorHighlighter 外掛
功能說明:顯示所選顏色值的顏色,並集成了ColorPicker
在16進位制的顏色值上點右鍵,選擇“Choose color”,會彈性顏色拾色器,在需要的色塊上單擊。
看看效果,顏色值和顯示顏色都相應做了改變。
9、Compact Expand CSS Command 外掛
功能說明:使CSS屬性展開及收縮,格式化CSS程式碼。
使用方法:按 Ctrl+Alt+[ 收縮CSS程式碼為一行顯示,按 Ctrl+Alt+] 展開CSS程式碼為多行顯示。
快捷鍵 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 檔案
下圖為按快捷鍵 Ctrl+Alt+h 新建的一個 html 檔案。
相應的模板為tmpl格式的檔案,它們儲存在C:\Users\ usersName\AppData\Roaming\Sublime Text 3\Packages\SublimeTmpl\templates下。
當然你可以根據自己的喜好來更改模板格式。例如把“html.tmpl”改為早期的html標準格式後儲存。
現在按快捷鍵 Ctrl+Alt+H,新建一個 html 檔案,其格式就和更改後模板格式完全一樣了。如下圖:
11、Alignment 外掛
功能說明:使程式碼格式的自動對齊。
使用方法:快捷鍵Ctrl+Alt+A,可能與QQ截圖衝突,二者中的一個要重置快捷鍵。
12、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 就會自動生成註釋。
在函式上面輸入/** ,然後按Tab 就會自動生成註釋。
14、SublimeCodeIntel 外掛
功能說明:智慧提示。
15、HTML-CSS-JS Prettify 外掛
功能說明:HTML、CSS、JS格式化。
安裝方法:安裝這個套件前必須先安裝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 外掛
功能說明:側欄選單擴充功能。
17、View In Browser 外掛
功能說明:Sublime Text儲存後網頁自動同步更新。
使用方法:在開啟的文件任一處點右鍵,選擇“View In Browser”,就會用預設的瀏覽器自動開啟該檔案。
如果你電腦裝有多個瀏覽器,你想換其它的作為此操作的預設瀏覽器,你可以按以下方法設定:
開啟“View In Browser.sublime-settings”,寫入以下程式碼:
{ "browser": "chrome64" }
這樣你就把它預設設定為“Chrome”瀏覽器了,當然你還可以改成“Firefox”、“Safari”等等,前提是你的電腦事先已安裝好了這些瀏覽器。
18、LiveReload 外掛
功能說明:除錯網頁實時自動更新。
使用說明:快捷鍵 Ctr+Alt+V
同時Chrome瀏覽器也要安裝LiveReload 的擴充套件外掛。
19、TortoiseSVN 外掛(win下需要安裝有TortoiseSVN客戶端支援)
功能說明:版本控制工具。
20、Theme-Soda 外掛
功能說明:最受歡迎的 Sublime Text 主題之一。
安裝完成後,點選單 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 主題之一。
22、Theme-Nexus 外掛
功能說明:最受歡迎的 Sublime Text 主題之一。
六、外掛列表
快捷鍵 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 將當前選中區域打散
相關推薦
Sublime Text 3 全程詳細圖文原創教程(持續更新中。。。)
轉自:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/7838660.html一、 前言 使用Sublime Text 也有幾個年頭了,版本也從2升級到3了,但猶如寒天飲冰水,冷暖儘自知。最初也是不知道從何下手,滿世界地查詢
Sublime Text 3 全程詳細圖文原創教程
一、 前言 使用Sublime Text 也有幾個年頭了,版本也從2升級到3了,但猶如寒天飲冰水,冷暖儘自知。最初也是不知道從何下手,滿世界地查詢資料,但能查閱到的資料,苦於它們的零碎、片面,不夠系統和全面,所以一路走來,耗費了本人大量的時間和精力
Sublime Text 3 全程詳細圖文
一、 前言 使用Sublime Text 也有幾個年頭了,版本也從2升級到3了,但猶如寒天飲冰水,冷暖儘自知。最初也是不知道從何下手,滿世界地查詢資料,但能查閱到的資料,苦於它們的零碎、片面,不夠系統和全面,所以一路走來,耗費了本人大量的時間和精力。所以蒙
Sublime Text 3.1 3170 / 3176 註冊碼(附降級與禁止更新方法)
快捷 eba deb 註冊碼 colors man lena pat hit 3.1 3176 可用註冊碼 127.0.0.1 www.sublimetext.com 127.0.0.1 license.sublimehq.com ----- BEG
將sublime text 3開啟方式新增到系統右鍵選單中
將下面的程式碼儲存為 sublime_addright.inf 並放在 sublime text 3 的安裝目錄下。 [Version] Signature="$Windows NT$" [DefaultInstall] AddReg=SublimeText3 [Su
Sublime Text 3 配置java程式執行環境(可輸入)
1、首先得配置好java環境2、Sublime Text 3--->Preference--->Browse Packages,開啟User資料夾,新建記事本,複製下面程式碼並儲存命名為java.sublime-build{ "cmd": ["javac"
在Sublime Text 3上實現python互動功能(SublimeREPL外掛安裝)
原本python IDLE 3.6寫程式碼好好的,不知為何,莫名其妙地經常出現IndentationError:unexpected indent的錯誤,用Sublime Text 3開啟,發現的確又是縮排對齊的問題。網上搜索了半天,沒有解決方案,問題依舊。於是想轉用Subl
python2.X和python 3.X的區別(持續更新中)
在自學python過程中躺過的那些坑坑窪窪。。。 覺得有必要記錄一下 一。raw_input()和input()的區別和整合 1,在Python2.x中raw_input()和input(),兩個
專案框架搭建用到的第三方框架—3(持續更新中)
專案框架搭建用到的第三方框架—3 QMUI_Android Git地址: https://github.com/QMUI/QMUI_Android 官網: https://qmuiteam.com/android/ Api說明地址 https://qmuitea
全網最新CocoaPods安裝教程(持續更新)
雖然網上關於CocoaPods安裝教程多不勝數,但是我在安裝的過程中還是出現了很多錯誤,所以大家可以照下來步驟裝一下,我相信會很好用. 前言 在iOS專案中使用第三方類庫可以說是非常常見的
【Mac教程】Sublime Text 3 註冊碼失效被移除詳細解決方法
sublime text 3 Mac 破解是一款非常優秀的程式碼編輯軟體,最近有小夥伴們反映Sublime Text 3 註冊碼失效被移除,今天我就為大家帶來了Sublime Text 3 註冊碼失效被移除詳細解決方法,有Mac平臺和Windows平臺兩種解決方案,有興趣的小夥伴趕快來看看吧!
(圖文超級詳細)sublime text 3安裝過程、語言漢化、基本外掛安裝、重要快捷鍵彙總(極適於小白零基礎開始學習使用sublime text 3)
sublime text 3安裝過程、語言漢化、基本外掛安裝、重要快捷鍵彙總 Sublime Text:是一款具有程式碼高亮、語法提示、自動完成且反應快速的編輯器軟體,不僅具有華麗的介面,還支援外掛擴充套件機制,用它來寫程式碼,絕對是一種享受。相比於難於上手的
Sublime Text 3下載及安裝和外掛的詳細教程
一、 前言 使用Sublime Text 也有幾個年頭了,版本也從2升級到3了,但猶如寒天飲冰水,冷暖儘自知。最初也是不知道從何下手,滿世界地查詢資料,但能查閱到的資料,苦於它們的零碎、片面,不夠系統和全面,所以一路走來,耗費了本人大量的時間和精力。所以蒙
Sublime Text 3.2.1詳細安裝破解教程,附最新啟用碼license(全網獨家可用有效)
title: "Sublime Text 3.2.1詳細安裝破解教程,附最新啟用碼license(全網獨家可用有效)" categories: soft tags: soft author: LIUREN --- Sublime Text 3.2.1詳細安裝破解教程,附最新啟用碼license(全網獨家可用
打造適合Ruby on Rails的Sublime Text 3開發環境[原創]
ebr ins oda lan new alt mac 管理 nbsp 強大的 Package Control Package Control 是一個包管理工具,類似於 Homebrew, NPM, 用它來管理所有 ST 插件非常方便 安裝:https://package
Sublime Text 3 設定中文+禁用更新+永久啟用教程(2018-8-30親測給力)
傳送門 https://www.sublimetext.com/3 設定中文 一、找到 Tools->Install Package Control 選項,調出 Package Control; 二、去找“Tools->Command Palette…”選項; 三
Sublime Text 3 中關於C/C++的實用外掛安裝教程
關於怎樣安裝Sublime Text3軟體以及C++環境配置在這裡就不詳細說了,這個部落格寫的挺詳細的比較不錯,推薦大家看一下:https://blog.csdn.net/android_msk/article/details/62431155 配置 介面 字型、主題風格等設定 當需
Sublime Text 3 註冊碼失效被移除怎麼辦?Sublime Text 3 註冊碼失效被移除詳細解決方法
Sublime Text 3註冊碼失效被移除是因為Sublime Text 3增加了註冊碼驗證功能,雖然使用的時候會提示註冊碼失效,但是卻依舊可以正常啟用!今天我就為大家帶來了Sublime Text 3註冊碼失效被移除詳細解決方法,有Mac平臺和Windows平臺兩種解決方案,有興趣的小夥伴趕快來
Mac中Sublime Text 3漢化教程
關於Mac中Sublime Text 3的漢化其實也還挺簡單的啦。 1·下載並安裝Sublime Text 3 (具體就一路確定就可以了) 2·下載網址 連結:https://pan.baidu.com/s/1662WMtlxj5H1EyZTGaSf2w 密碼:
sublime text 3 安裝中文外掛圖文版
想要安裝安裝中文外掛,就必須先安裝package control 因為通過程式碼的方式安裝經常出現各種各樣的錯誤,所以這裡不就介紹程式碼在安裝方式了,本文介紹的手動安裝package control