notepad++已成往事，文本編輯器選這些

于npp作者的一系列無腦言論，使得作為一個極易上手、使用簡便的文本編輯器的npp現在也是越來越不受待見。那么，我們今天就來扒一扒，除了npp，還有哪些同樣簡單便捷、啟動快、易上手的文本編輯器。

第五名——SciTE

SciTE，一個支持Windows和Linux平臺使用的開源的文本編輯器，開始時只是為了演示Scintilla強大功能而開發的。此后它成為一個功能全面的編輯器，windows下安裝包不到2M。你可以通過用戶自定義的配置文件來擴展默認功能。

一方面，這個軟件入門簡單。基本文本編輯器的功能它都具備：多格式（HTML、RTF、PDF、XML）文件導出，文本搜索替換、幾十種語法高亮顯示等。

另一方面，這個軟件配置復雜。因為它默認情況下很多功能還沒有展現，需要我們手動設置，而這個設置過程也相當復雜，如果沒有正確的配置，他就會出現很多問題，比如選擇中文時候出現亂碼，縮進格式出錯等等。

考慮到它的配置復雜且默認是英文菜單界面，所以，把它排名第五。推薦喜歡極簡風的朋友使用或極客朋友挖掘、自定義配置使用。

第四名——NotePad 3

Notepad 3是一個快速、基于Scintilla的輕量級文本編輯器，同樣支持語法高亮等文本編輯器普遍具備的基礎功能，這點不用多說。值得一提的是，Notepad3安裝后會直接替代記事本，也就是你每次創建或新打開.txt文本文檔都會默認使用Notepad 3, 想想人家當初的主要目標也是替換掉 Windows 自帶記事本。Notepad 3在windows下的安裝包僅3M，且默認中文菜單界面，所以無論是作為常用文本編輯器，還是作為windows記事本來使用，都是比較推薦的。

第三名——Ultra Edit

UE作為一款老牌、流行的文本編輯器，默認安裝后支持中文界面。不僅支持搜索替換、代碼高亮等文本編輯功能，還支持ASCII/ANSI files編碼的腳本。可以在對應的語法文件下進行函數和類的跳轉，是不是有點智能IDE的意思了，還支持宏錄制等一下進階玩法。但是，這個軟件并不是開源軟件，30天的試用期后需要付費使用，安裝包大概90M左右。

第二名——Sublime Text 3

在作者認為Sublime Text 3 和 UE，如果僅從功能上來看，作者認為兩者各有千秋，不分伯仲，但是從安裝包體積、用戶使用界面，以及擴展包源豐富性而言，作者更傾向于ST3，ST3的編輯界面更加好看些。ST3支持快捷鍵豐富，進行工程編輯時，可以通過命令來快速進行文件跳轉、類跳轉、行跳轉，猶如使用idea進行代碼跟進一樣。Sublime安裝后默認為英文界面，可以通過安裝插件包修改為中文界面，目前是作者使用較為頻繁的一個編輯器。

第一名——VS code

世界上最好的文本編輯器——VS code！

VS code排第一，相信大家無可爭議，絕對的No.1，嚴格來說，把VS code僅僅定位為一個文本編輯器，實在是殺雞用牛刀，大材小用了。但是就僅僅討論文本編輯功能來說，VS code也是十分跟手，代碼跳轉、代碼片段運行、文本搜索替換等都是入門標配，且是大廠出品，UI美觀性更不必說，VS code除了本身功能全面、便捷外，還有一個更讓人們依賴的是它豐富的插件庫，你幾乎可以找到工作中處理代碼和文本所需要的所有插件，配合插件后，vscode簡直如絲般潤滑。

其實，文本編輯器本身核心功能差不多都一樣，至于選擇哪款，還是取決于你是追求小巧便捷，還是功能豐富；是喜歡開箱即用，還是手動定制（比如宏開發）。

希望，上面推薦的幾款編輯器，能夠滿足大家工作需求。

工具，順手即可~

者：Lucida
原文鏈接：http://lucida.me/blog/sublime-text-complete-guide

# 摘要（Abstract）

本文系統全面的介紹了 Sublime Text，旨在成為最優秀的 Sublime Text 中文教程。

# 更新記錄

1.2014/09/27：完成初稿

2.2014/09/28：

更正打開控制臺的快捷鍵為 Ctrl + `

更正全局替換的快捷鍵為 Ctrl + Alt + Enter

3.2016/09/15：作者已全面轉向 Visual Studio Code

# 前言（Prologue）

Sublime Text 是一款跨平臺代碼編輯器（Code Editor），從最初的 Sublime Text 1.0，到現在的 Sublime Text 3.0，Sublime Text 從一個不知名的編輯器演變到現在幾乎是各平臺首選的 GUI 編輯器。而這樣優秀的編輯器卻沒有一個靠譜的中文教程，所以我試圖通過本文彌補這個缺陷。

# 編輯器的選擇（Editor Choices）

從初學編程到現在，我用過的編輯器有 EditPlus、UltraEdit、Notepad++、Vim、TextMate 和 Sublime Text，如果讓我從中推薦，我會毫不猶豫的推薦 Vim 和 Sublime Text，原因有下面幾點：

1.跨平臺：Vim 和 Sublime Text 均為跨平臺編輯器（在 Linux、OS X 和 Windows 下均可使用）。作為一個程序員，切換系統是常有的事情，為了減少重復學習，使用一個跨平臺的編輯器是很有必要的。

2.可擴展：Vim 和 Sublime Text 都是可擴展的（Extensible），并包含大量實用插件，我們可以通過安裝自己領域的插件來成倍提高工作效率。

3.互補：Vim 和 Sublime Text 分別是命令行環境（CLI）和圖形界面環境（GUI）下的最佳選擇，同時使用兩者會大大提高工作效率。

# 個人背景（Personal Background）

我是一名非常典型的程序員：平時工作主要在 Linux 環境下使用 Java 和 Python，偶爾會用 HTML+CSS+JavaScript 編寫網頁；業余時會在 Windows 環境編寫一些 C# 程序（包括控制臺程序（Console Application）和移動應用（Mobile App），也會玩一些非主流語言（比如 Haskell，ML 和 Ruby 等）以拓展見識。

所以這篇文章會我的個人工作內容為主要使用場景（Scenario），盡管無法覆蓋到所有的使用場景，但我認為依然可以覆蓋到絕大部分，如果您認為我遺漏了什么內容，請在文章下面回復，我會盡量更新。

# 本文風格（Writing Style）

受益于 K&R C 的寫作風格，我傾向于以實際案例來講解 Sublime Text 的功能，所以本文中的例子均源于我在實際開發時遇到的問題。

此外，把本文會使用大量動畫（GIF）演示 Sublime Text 的編輯功能，因為我發現圖片難以演示完整的編輯流程（Workflow），而視頻又過于重量級。本文的GIF動畫均使用 ScreenToGif 進行錄制。

# 編輯器（Editor） vs 集成開發環境（Integrated Development Environment，下文簡稱 IDE）

我經常看到一些程序員拿編輯器和 IDE 進行比較，諸如 Vim 比 Eclipse 強大或是 Visual Studio 太慢不如 Notepad++ 好使之類的討論比比皆是，個人認為這些討論沒有意義，因為編輯器和 IDE 根本是面向兩種不同使用場景的工具：

1.編輯器面向無語義的純文本，不涉及領域邏輯，因此速度快體積小，適合編寫單獨的配置文件和動態語言腳本（Shell、Python 和 Ruby 等）。

2.IDE 面向有語義的代碼，會涉及到大量領域邏輯，因此速度偏慢體積龐大，適合編寫靜態語言項目（Java、C++ 和 C# 等）。

我認為應當使用正確的工具去做有價值的事情，并把效率最大化，所以我會用 Eclipse 編寫 Java 項目，用 Vim 編寫Shell，用 Sublime Text 編寫 JavaScript/HTML/Python，用 Visual Studio 編寫C#。

前言到此結束，下面進入正題。

# 安裝（Installation）

Sublime Text 官方網站提供了 Sublime Text 各系統各版本的下載，目前Sublime Text 的最新版本是 Sublime Text 3。這里以 Windows 版本的 Sublime Text 安裝為例。

注意在安裝時勾選 Add to explorer context menu，這樣在右鍵單擊文件時就可以直接使用 Sublime Text 打開。

# 添加 Sublime Text 到環境變量

使用 Win + R 運行 sysdm.cpl 打開 “系統屬性”。

然后在 “高級” 選項卡里選擇 “環境變量”，編輯 “Path”，增加 Sublime Text 的安裝目錄（例如 D:\Program Files\Sublime Text 3）。

接下來你就可以在命令行里面利用 subl 命令直接使用 Sublime Text 了：

subl file :: 使用 Sublime Text 打開 file 文件
subl folder :: 使用 Sublime Text 打開 folder 文件夾
subl . :: 使用 Sublime Text 當前文件夾

# 安裝 Package Control

前文提到 Sublime Text 支持大量插件，如何找到并管理這些插件就成了一個問題，Package Control 正是為了解決這個問題而出現的，利用它我們可以很方便的瀏覽、安裝和卸載 Sublime Text 中的插件。

# 安裝 Package Control

進入 Package Control 的官網，里面有詳細的安裝教程。Package Control 支持 Sublime Text 2 和 3，本文只給出 3 的安裝流程：

1.使用 Ctrl + ` 打開 Sublime Text 控制臺。

2.將下面的代碼粘貼到控制臺里：

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; 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://sublime.wbond.net/' + 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)

3.等待 Package Control 安裝完成。之后使用 Ctrl + Shift + P 打開命令板，輸入 PC 應出現 Package Control：

成功安裝 Package Control 之后，我們就可以方便的安裝使用 Sublime Text 的各種插件：

# 購買（Purchase）

Sublime Text 是一個收費閉源軟件，這在一定程度上成為了我支持 Sublime Text 的理由（我心中的軟件靠譜程度：免費開源 << 免費閉源 < 收費開源 < 收費閉源）：在這里購買。

不過不購買 Sublime Text 也可以 “正常” 使用它，只是 Sublime Text 會時不時的彈出一個對話框提醒你購買，此外窗口處會有一個很屌絲很 low 逼的 (UNREGISTERED)。（在高頻操作下，一般 20 分鐘提示一次，個人認為算是很厚道了）

也許不少人會覺著 Sublime Text 70 刀的價格太貴，但相比它的功能和帶來的效率提升，70 刀真的不值一提，如果你不方便使用 Paypal 付款可以郵件聯系我，你支付寶給我打款然后我幫你付款，價格按當日匯率折算（450 元左右）。

概覽（Tour）

# 基本概念（Basic Concepts）

Sublime Text 的界面如下：

1.標簽（Tab）：無需介紹。

2.編輯區（Editing Area）：無需介紹。

3.側欄（Side Bar）：包含當前打開的文件以及文件夾視圖。

4.縮略圖（Minimap）：如其名。

5.命令板（Command Palette）：Sublime Text 的操作中心，它使得我們基本可以脫離鼠標和菜單欄進行操作。

6.控制臺（Console）：使用 Ctrl + ` 調出，它既是一個標準的 Python REPL，也可以直接對 Sublime Text 進行配置。

7.狀態欄（Status Bar）：顯示當前行號、當前語言和Tab格式等信息。

# 配置（Settings）

與其他 GUI 環境下的編輯器不同，Sublime Text 并沒有一個專門的配置界面，與之相反，Sublime Text 使用 JSON 配置文件，例如：

{
 "font_size": 12,
 "highlight_line": true,
}

會將默認字體大小調整為 12，并高亮當前行。

JSON 配置文件的引入簡化了 Sublime Text 的界面，但也使得配置變的復雜，一般我會到這里查看可用的 Sublime Text 配置。

# 編輯（Editing）

Sublime Text 的編輯十分人性化——它不像 Vim 那樣反人類（盡管我也用 Vim 但我還是要說 Vim 的快捷鍵設定絕壁連代謝產物都不如），少量的快捷鍵就可以完成絕大多數編輯任務。

# 基本編輯（Basic Editing）

↑↓←→ 就是 ↑↓←→，不是 KJHL，（沒錯我就是在吐槽 Vim，尼瑪設成 WSAD 也比這個強啊），粘貼剪切復制均和系統一致。

Ctrl + Enter 在當前行下面新增一行然后跳至該行；Ctrl + Shift + Enter 在當前行上面增加一行并跳至該行。

Ctrl + ←/→ 進行逐詞移動，相應的，Ctrl + Shift + ←/→ 進行逐詞選擇。

Ctrl + ↑/↓ 移動當前顯示區域，Ctrl + Shift + ↑/↓ 移動當前行。

# 選擇（Selecting）

Sublime Text 的一大亮點是支持多重選擇——同時選擇多個區域，然后同時進行編輯。

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

多重選詞的一大應用場景就是重命名——從而使得代碼更加整潔。盡管 Sublime Text 無法像 IDE（例如 Eclipse）那樣進行自動重命名，但我們可以通過多重選詞+多重編輯進行直觀且便捷的重命名：

有時我們需要對一片區域的所有行進行同時編輯，Ctrl + Shift + L 可以將當前選中區域打散，然后進行同時編輯：

有打散自然就有合并，Ctrl + J 可以把當前選中區域合并為一行：

# 查找&替換（Finding&Replacing）

Sublime Text 提供了強大的查找（和替換）功能，為了提供一個清晰的介紹，我將 Sublime Text 的查找功能分為快速查找、標準查找和多文件查找三種類型。

# 快速查找&替換

多數情況下，我們需要查找文中某個關鍵字出現的其它位置，這時并不需要重新將該關鍵字重新輸入一遍然后搜索，我們只需要使用 Shift + ←/→ 或 Ctrl + D 選中關鍵字，然后 F3 跳到其下一個出現位置， Shift + F3 跳到其上一個出現位置，此外還可以用 Alt + F3 選中其出現的所有位置（之后可以進行多重編輯，也就是快速替換）。

# 標準查找&替換

另一種常見的使用場景是搜索某個已知但不在當前顯示區域的關鍵字，這時可以使用 Ctrl + F 調出搜索框進行搜索：

以及使用 Ctrl + H 進行替換：

# 關鍵字查找&替換

對于普通用戶來說，常規的關鍵字搜索就可以滿足其需求：在搜索框輸入關鍵字后 Enter 跳至關鍵字當前光標的下一個位置， Shift + Enter 跳至上一個位置， Alt + Enter 選中其出現的所有位置（同樣的，接下來可以進行快速替換）。

Sublime Text 的查找有不同的模式：Alt + C 切換大小寫敏感（Case-sensitive）模式， Alt + W 切換整字匹配（Whole matching）模式，除此之外Sublime Text還支持在選中范圍內搜索（Search in selection），這個功能沒有對應的快捷鍵，但可以通過以下配置項自動開啟。

"auto_find_in_selection": true

這樣之后在選中文本的狀態下范圍內搜索就會自動開啟，配合這個功能，局部重命名（Local Renaming）變的非常方便：

使用 Ctrl + H 進行標準替換，輸入替換內容后，使用 Ctrl + Shift + H 替換當前關鍵字， Ctrl + Alt + Enter 替換所有匹配關鍵字。

# 正則表達式查找&替換

正則表達式是非常強大的文本查找&替換工具，Sublime Text中使用 Alt + R 切換正則匹配模式的開啟/關閉。Sublime Text的使用Boost里的Perl正則表達式風格。

出于篇幅原因，本文不會對正則表達式進行詳細介紹，Mastering Regex（中譯本：精通正則表達式）對正則表達式的原理和各語言下的使用進行了詳細介紹。此外網上有大量正則表達式的優秀教程（“正則表達式30分鐘入門教程” 和 MSDN正則表達式教程.aspx)），以及在線測試工具（regexpal 和 regexer）。

# 多文件搜索&替換

使用 Ctrl + Shift + F 開啟多文件搜索&替換（注意此快捷鍵和搜狗輸入法的簡繁切換快捷鍵有沖突）：

多文件搜索&替換默認在當前打開的文件和文件夾進行搜索/替換，我們也可以指定文件/文件夾進行搜索/替換。

# 跳轉（Jumping）

Sublime Text 提供了強大的跳轉功能使得我們可以在不同的文件/方法/函數中無縫切換。就我的使用經驗而言，目前還沒有哪一款編輯器可以在這個方面超越Sublime Text。

# 跳轉到文件

Ctrl + P 會列出當前打開的文件（或者是當前文件夾的文件），輸入文件名然后 Enter 跳轉至該文件。

需要注意的是，Sublime Text使用模糊字符串匹配（Fuzzy String Matching），這也就意味著你可以通過文件名的前綴、首字母或是某部分進行匹配：例如， EIS 、 Eclip 和 Stupid 都可以匹配 EclipseIsStupid.java 。

# 跳轉到符號

盡管是一個文本編輯器，Sublime Text 能夠對代碼符號進行一定程度的索引。Ctrl + R 會列出當前文件中的符號（例如類名和函數名，但無法深入到變量名），輸入符號名稱 Enter 即可以跳轉到該處。

此外，還可以使用 F12 快速跳轉到當前光標所在符號的定義處（Jump to Definition）。

比較有意思的是，對于 Markdown， Ctrl + R 會列出其大綱，非常實用。

# 跳轉到某行

Ctrl + G 然后輸入行號以跳轉到指定行：

# 組合跳轉

在 Ctrl + P 匹配到文件后，我們可以進行后續輸入以跳轉到更精確的位置：

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

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

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

所以 Sublime Text 把 Ctrl + P 稱之為 “Go To Anything”，這個功能如此好用，以至于我認為沒有其它編輯器能夠超越它。

# 中文輸入法的問題

從 Sublime Text 的初版（1.0）到現在（3.0 3065），中文輸入法（包括日文輸入法）都有一個問題：輸入框不跟隨。

目前官方還沒有修復這個 bug，解決方法是安裝 IMESupport 插件，之后重啟 Sublime Text 問題就解決了。

# 文件夾（Folders）

Sublime Text 支持以文件夾做為單位進行編輯，這在編輯一個文件夾下的代碼時尤其有用。在 File 下 Open Folder ：

你會發現右邊多了一個側欄，這個側欄列出了當前打開的文件和文件夾的文件，使用 Ctrl + K, Ctrl + B 顯示或隱藏側欄，使用 Ctrl + P 快速跳轉到文件夾里的文件。

# 窗口&標簽（Windows & Tabs）

Sublime Text 是一個多窗口多標簽編輯器：我們既可以開多個Sublime Text窗口，也可以在一個Sublime Text窗口內開多個標簽。

# 窗口（Window）

使用 Ctrl + Shift + N 創建一個新窗口（該快捷鍵再次和搜狗輸入法快捷鍵沖突，個人建議禁用所有搜狗輸入法快捷鍵）。

當窗口內沒有標簽時，使用 Ctrl + W 關閉該窗口。

# 標簽（Tab）

使用 Ctrl + N 在當前窗口創建一個新標簽， Ctrl + W 關閉當前標簽， Ctrl + Shift + T 恢復剛剛關閉的標簽。

編輯代碼時我們經常會開多個窗口，所以分屏很重要。Alt + Shift + 2 進行左右分屏， Alt + Shift + 8 進行上下分屏， Alt + Shift + 5 進行上下左右分屏（即分為四屏）。

分屏之后，使用 Ctrl + 數字鍵跳轉到指定屏，使用 Ctrl + Shift + 數字鍵將當前屏移動到指定屏。例如， Ctrl + 1 會跳轉到1屏，而 Ctrl + Shift + 2 會將當前屏移動到2屏。

# 全屏（Full Screen）

Sublime Text 有兩種全屏模式：普通全屏和無干擾全屏。

個人強烈建議在開啟全屏前關閉菜單欄（Toggle Menu），否則全屏效果會大打折扣。

F11 切換普通全屏：

Shift + F11 切換無干擾全屏：

# 風格（Styles）

風格對于任何軟件都很重要，對編輯器也是如此，尤其是GUI環境下的編輯器。作為一個程序員，我希望我的編輯器足夠簡潔且足夠個性。

Notepad++ 默認界面

Sublime Text 默認界面

所以在用過 Sublime Text 之后，我立刻就卸掉了 Notepad++。

Sublime Text 自帶的風格是我喜歡的深色風格（也可以調成淺色），默認主題是Monokai Bright，這兩者的搭配已經很不錯了，不過我們還可以做得更好：接下來我將會展示如何通過設置偏好項和添加自定義風格/主題使得 Sublime Text 更加 Stylish。

# 一些設置（Miscellaneous Settings）

下面是我個人使用的設置項。

// 設置Sans-serif（無襯線）等寬字體，以便閱讀
"font_face": "YaHei Consolas Hybrid",
"font_size": 12,
// 使光標閃動更加柔和
"caret_style": "phase",
// 高亮當前行
"highlight_line": true,
// 高亮有修改的標簽
"highlight_modified_tabs": true,

設置之后的效果如下：

# 主題（Themes）

Sublime Text 有大量第三方主題：[https://sublime.wbond.net/browse/labels/theme]，這里我給出幾個個人感覺不錯的主題：

Soda Light

Soda Dark

Nexus

Flatland

Spacegray Light

Spacegray Dark

# 配色（Color）

colorsublime 包含了大量 Sublime Text 配色方案，并支持在線預覽，配色方案的安裝教程在這里，恕不贅述。

我個人使用的是 Nexus 主題和 Flatland Dark 配色，配置如下：

"theme": "Nexus.sublime-theme",
"color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme",

效果如下：

# 編碼（Coding）

優秀的編輯器使編碼變的更加容易，所以 Sublime Text 提供了一系列功能以提高開發效率。

# 良好實踐（Good Practices）

良好的代碼應該是規范的，所以Google為每一門主流語言都設置了其代碼規范（Code Style Guideline）。我自己通過下面的設置使以規范化自己的代碼。

// 設置tab的大小為2
"tab_size": 2,
// 使用空格代替tab
"translate_tabs_to_spaces": true,
// 添加行寬標尺
"rulers": [80, 100],
// 顯示空白字符
"draw_white_space": "all",
// 保存時自動去除行末空白
"trim_trailing_white_space_on_save": true,
// 保存時自動增加文件末尾換行
"ensure_newline_at_eof_on_save": true,

# 代碼段（Code Snippets）

Sublime Text 支持代碼段（Code Snippet），輸入代碼段名稱后 Tab 即可生成代碼段。

你可以通過Package Control安裝第三方代碼段，也可以自己創建代碼段，參考這里。

# 格式化（Formatting）

Sublime Text 基本的手動格式化操作包括：Ctrl + [ 向左縮進， Ctrl + ] 向右縮進，此外 Ctrl + Shift + V 可以以當前縮進粘貼代碼（非常實用）。

除了手動格式化，我們也可以通過安裝插件實現自動縮進和智能對齊：

1.HTMLBeautify：格式化HTML。

2.AutoPEP8：格式化Python代碼。

3.Alignment：進行智能對齊。

# 自動完成（Auto Completion）

Sublime Text 支持一定的自動完成，按 Tab 自動補全。

# 括號（Brackets）

編寫代碼時會碰到大量的括號，利用 Ctrl + M 可以快速的在起始括號和結尾括號間切換， Ctrl + Shift + M 則可以快速選擇括號間的內容，對于縮進型語言（例如Python）則可以使用 Ctrl + Shift + J 。

此外，我使用 BracketHighlighter 插件以高亮顯示配對括號以及當前光標所在區域，效果如下：

# 命令行（Command Line）

盡管提供了 Python 控制臺，但 Sublime Text 的控制臺僅支持單行輸入，十分不方便，所以我使用 SublimeREPL 以進行一些編碼實驗（Experiments）。

# 其它（Miscellaneous）

盡管我試圖在本文包含盡可能多的 Sublime Text 實用技能，但受限于篇幅和我的個人經驗，本文仍不免有所遺漏，歡迎在評論里指出本文的錯誤及遺漏。

下面是一些可能有用但我很少用到的功能：

1.宏（Macro）：Sublime Text 支持錄制宏，但我在實際工作中并未發現宏有多大用處。

2.其它平臺（Other Platforms）：本文只介紹了 Windows 平臺上 Sublime Text 的使用，不過 Linux 和 OS X 上Sublime Text的使用方式和Windows差別不大，只是在快捷鍵上有所差異，請參考 Windows/Linux快捷鍵和 OS X 快捷鍵。

3.項目（Projects）：Sublime Text支持簡單的項目管理，但我一般只用到文件夾。

4.Vim模式（Vintage）：Sublime Text自帶 Vim模式。

5.構建（Build）：通過配置，Sublime Text可以進行源碼構建。

6.調試（Debug）：通過安裝插件，Sublime Text 可以對代碼進行調試。

# 快捷鍵列表（Shortcuts Cheatsheet）

我把本文出現的Sublime Text按其類型整理在這里，以便查閱。

通用（General）

1.↑↓←→：上下左右移動光標，注意不是不是 KJHL ！

2.Alt：調出菜單

3.Ctrl + Shift + P：調出命令板（Command Palette）

4.Ctrl + ` ：調出控制臺

# 編輯（Editing）

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

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

3.Ctrl + ←/→：進行逐詞移動

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

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

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

#選擇（Selecting）

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

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

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

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

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

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

7.Ctrl + Shift + Space：快速選擇當前作用域（Scope）的內容

# 查找&替換（Finding&Replacing）

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

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

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

4.Ctrl + F/H：進行標準查找/替換，之后：

5.Alt + C：切換大小寫敏感（Case-sensitive）模式

6.Alt + W：切換整字匹配（Whole matching）模式

7.Alt + R：切換正則匹配（Regex matching）模式

8.Ctrl + Shift + H：替換當前關鍵字

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

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

# 跳轉（Jumping）

1.Ctrl + P：跳轉到指定文件，輸入文件名后可以：

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

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

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

5.Ctrl + R：跳轉到指定符號

6.Ctrl + G：跳轉到指定行號

# 窗口（Window）

1.Ctrl + Shift + N：創建一個新窗口

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

3.Ctrl + W：關閉當前標簽，當窗口內沒有標簽時會關閉該窗口

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

# 屏幕（Screen）

1.F11：切換普通全屏

2.Shift + F11：切換無干擾全屏

3.Alt + Shift + 2：進行左右分屏

4.Alt + Shift + 8：進行上下分屏

5.Alt + Shift + 5：進行上下左右分屏

6.分屏之后，使用 Ctrl + 數字鍵跳轉到指定屏，使用 Ctrl + Shift + 數字鍵將當前屏移動到指定屏

延伸閱讀（Further Reading）

# 書籍（Books）

Mastering Sublime Text：我讀過的唯一一本關于 Sublime Text 的書籍，書中介紹的插件很實用，但對編輯技巧介紹不全。

Instant Sublime Text Starter：另外一本關于 Sublime Text的書，我沒有讀過。

# 鏈接（Links）

1.官方文檔：http://www.sublimetext.com/docs/3/

2.官方論壇：http://www.sublimetext.com/forum/

3.Stack Overflow 的 Sublime Text 頻道：4.http://stackoverflow.com/questions/tagged/sublimetext

5.http://stackoverflow.com/questions/tagged/sublimetext2

6.http://stackoverflow.com/questions/tagged/sublimetext3

7.非官方文檔：http://sublime-text-unofficial-documentation.readthedocs.org/ 甚至比官方文檔還要全面！

8.Package Control：https://sublime.wbond.net/ 大量的 Sublime Text 插件和主題。

# 視頻（Videos）

1.Getting Started with SublimeText：https://www.youtube.com/watch?v=04gKiTiRlq8

2.Sublime Text Pefect Workflow：https://www.youtube.com/watch?v=bpEp0ePIOEM&list=PLuwqxbvf3olpLsnFvo06gbrkcEB5o7K0g

.1 HTML簡介

1.1.1 HTML：Hyper Text Markup Language（超文本標記語言）

在學習使用HTML之前，大家經常會問，什么是HTML？HTML是用來描述頁面的一種語言，它是一種超文本標記語言，也就是說，HTML不是一種編程語言，僅是一種標記語言。 HTML由一套標記標簽組成，在制作網頁時，HTML使用標記標簽來描述網頁。

1.1.2 發展史

1.1.3 HTML5的優勢

HTML5自正式推出以來，就以一種驚人的速度被迅速推廣著，各主流瀏覽器對于HTML5表現出來的熱烈歡迎、積極支持。

1、世界知名瀏覽器廠商對HTML5的支持

通過對Internet、Explorer、Google、Firefox、Safari、Opera等主要的web瀏覽器發展策略調查，發現它們都在支持HTML5上采取了措施

- 微軟：2010年3月16日，微軟與拉斯維加斯市舉行的MIX10技術大會上宣布已推出InternetExplorer(IE)9瀏覽器開發者預覽版。

- Google：2010年2月19日，GoogleGears項目經理伊安~費特通過博客宣布，谷歌將放棄對Gears瀏覽器插件項目支持、重點開發HTML5項目

- 蘋果：2010年6月7日，蘋果開發者大會的會后發布了Safari5。這款瀏覽器支持10個以上HTML5的新技術，包括全屏播放、HTML5地理位置、HTML5的形式驗證等功能

- Opera：2010年5月5日，Opera軟件公司首席技術官Hakon Wium Lie先生在訪華之際，接受了中國軟件資訊網等少數幾家媒體采訪，他認為HTML5和CSS3將是全球互聯網發展的未來趨勢

- Mozilla：2010年7月，Mozilla基金會發布了Firefox4瀏覽器的第一個測試版，從官方文檔看，它對HTML5是完全級別的支持

2、市場的需求

現在的市場已經迫不及待地要求有一個統一的互聯網通用標準。HTML5之前的情況是，由于各瀏覽器之間不統一，僅修改web瀏覽器之間的由于兼容性而引起的bug就浪費了大量的時間。而HTML5的目標就是將web帶入一個成熟的應用平臺，在HTML5平臺上，視頻，音頻，圖像，動畫及同計算器的交互都被標準化。

3、跨平臺

HTML5可以做到跨平臺開發，用戶只用打開瀏覽器即可訪問應用，PC網站、各種移動設備，插件等核心代碼就可以不需要重復編寫，極大地減少了開發人員的工作量。

1.1.4 W3C標準

發明HTML的初衷是實現信息資料的網絡傳播和共享，希望HTML文檔具有平臺無關性，即同一個HTML文件，在不同的瀏覽器上看到同樣的頁面內容和效果。但是遺憾的是，隨著瀏覽器市場的激烈競爭，各大瀏覽器廠商為了吸引用戶，都在早期HTML版本的基礎上擴展各類標簽，各瀏覽器之間互不兼容，導致HTML編碼規則混亂，違背了HTML發明的初衷，因此需要一個組織來指定和維護統一的國際化web開發標準，確保多個瀏覽器都兼容，HTML內容結構都是語義化的。

W3C標準不是某一個標準，而是一系列的標準集合，一個網頁主要有三部分組成，即結構、表現、行為。

對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型（如W3CDOM）、ECMAScript等。這些標準大部分由W3C起草和發布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。

1.1.5 網頁編輯工具

1、開發工具：

記事本、Dreamweaver、UltraEdit、Sublime、WebStorm等
你可以從以上軟件的官網中下載對應的軟件，按步驟安裝即可。
接下來我們將為大家演示如何使用 WebStorm來創建 HTML 文件。

2、使用WebStorm編輯HTML文檔如下：

打開WebStorm編輯器后，選擇File->New->HTML File命令，打開“HTML File”對話框;
在“Name”文本框中輸入HTML的文件名為“my_firstPage”在“Kind”下拉列表框中選擇HTML5 file選項后OK按鈕即可創建一個HTML5頁面的模板;
在body元素和title元素中添加網頁內容;
網頁內容添加完成后，鼠標移動到編輯器的右上方，會出現幾個常見的瀏覽器圖標，單擊Chrome瀏覽器附表即可打開頁面;
在Chrome瀏覽器中可以顯示出結果。

2.1 HTML基礎

2.1.1 HTML5的基本結構

<html>
    <head>
             <title>我的第一個網頁</title>
    </head>
    <body>
             我的第一個網頁
    </body>
</html>

標簽都是成對出現的。有一個開頭標記就應該有一個對應的結束標記記，“<>”開始，以“</>”結束，要求成對出現，標簽之間有縮進，提現層次感，方便閱讀。

HTML5的基本結構分為兩部分。整個HTML包括頭部｛head｝和主體｛body｝兩部分，頭部包括網頁標題｛title｝等基本信息，主體包括頁面的內容信息，如圖片、文字等。

2.1.2 網頁的基本信息

1、DOCTYPE 聲明在這個HTML5文件最上面有一行關于DOCTYPE文檔類型的聲明，約束HTML文檔結構。檢查是否符合相關WEB標準，同時告訴瀏覽器使用那中規范來解釋這個文檔中的代碼。DOCTYPE聲明必須位于HTML文檔的第一行。

HTML5:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

HTML4：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3.org/TR/xhtml1-transitional.dtd">

2、<title>標簽 使用<title>標簽描述頁面的標簽，類似一個文檔的標題，為一個簡介的主題，并能使讀者有興趣。

<title>搜狐-中國最大的門戶網站</title>

3、<meta>標簽 使用<meta>標簽描述網頁的摘要信息，包括文檔內容類型、字符編碼信息，搜索關鍵字、網站提供的功能和服務的詳細描述等。<meta>標簽的內容并不顯示，其目的是方便瀏覽器解析或利于搜索引擎搜索，它采用“名稱/值”對的方式描述摘要信息。

meta標簽可分為兩大部分：http-equiv和name變量。

http-equiv相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。

name屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。

1.文檔內容類型，字符編碼信息書寫如下：

HTML5:

<meta charset="UTF-8">

HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

屬性：charset表示字符集編碼，常用的編碼有以下幾種。

1.gb2312：簡體中文，一般用于包含中文和英文的頁面；

2.ISO-885901：純英文，一般用于只包含英文的頁面；

3.big5：繁體，用于帶有繁體字的頁面；

4.UTF-8：國際性通用的編碼，同樣適用于中文和英文的頁面。和gb2312編碼相比，國際通用性更好。

2.搜索關鍵字和內容描述信息書寫如下：

<meta name="keywords" content="云圖智聯">
<meta name="description"content="云圖智聯是國內的IT教育集團，致力于為中國培養優秀的IT技術人才">

網站示例：

<!--京東-->
 <meta name="description"
          content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!"/>
    <meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東"/>

<!--淘寶-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <title>淘寶網 - 淘！我喜歡</title>
  <meta name="spm-id" content="a21bo" />
  <meta name="description" content="淘寶網 - 亞洲較大的網上交易平臺，提供各類服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨后付款)等安全交易保障服務，并由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！" />
  <meta name="aplus-xplug" content="NONE">
  <meta name="keyword" content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪" />

2.1.3 HTML5的基本標簽

1、標題標簽

<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

標題標簽表示一段文字和標題或主題，并且支持多層的內容結構。例如，一級標題采用h1，二級標題采用h2，其他級別標題以此類推。HTML共提供了六級標題h1~h6，并賦予了標題一定的外觀，所有標題字體加粗，h1字號最大，h6字號最小。

2、段落標簽、換行標簽和水平線標簽

<p>段落標簽</p>
<br/><!--換行標簽-->
<hr><!--水平線標簽-->

3、字體樣式標簽

<!--加粗-->
<strong></strong>
<b></b>
<!--傾斜-->
<em></em>
<i></i>
<!--字體縮小-->
<small></small>
<!--刪除線-->
<s></s>
<!--下劃線-->
<u></u>

4、圖像標簽

（1）常見的圖像格式

1.JPG格式

JPG格式圖像是在Internet上被廣泛支持的圖像格式，它是聯合圖像專家組格式的英文縮寫。JPG格式采用的是有損壓縮，會造成圖像畫面的失真，不過壓縮之后的體積很小，而且比較清晰，所以比較適合在網頁中應用此格式最適合用于排和或連續取色調圖像的高級格式，這事因為JPG文件可以包含數百萬種顏色。隨著JPG格式文件品格式質的提高，文件的大小和下載時間也會隨著增加。通常可以通過壓縮JPG格式文件在圖像品質和文件大小之間達到良好的平衡。

2.GIF格式

GIF格式圖像是網頁中使用最廣泛，最普通的一種圖像格式，它是圖像交換格式的英文縮寫。GIF格式文件支持透明色，使得GIF格式在網頁的背景和一些多層特效的顯示上用得非常多；還支持動畫，這是它最突出的一個特點，因此GIF格式圖像在網頁中應用非常廣泛。

3.BMP格式

BMP格式圖像在Windows操作系統中使用得比較多，它是位圖的英文縮寫。BMP格式圖像格式與其他Microsoft Windows程序兼容。它不支持文件壓縮，也不是用于Web頁。

4.PNG格式

PNG格式是20世紀90年代中期開始開發的圖像文件儲存格式，它兼有GIF和JPG格式的優勢，同時具備GIF格式不具備的特性。

（2）圖像標簽

<img src="path" alt="text" title="text"  width="x"  height="y" />

src屬性表示圖片路徑，alt屬性指定圖像的代替文本，表示圖像無法顯示時（如圖片路徑錯誤或網速太慢等）替代先是文本，這樣，即使當圖像無法顯示時，用戶還可以看到網頁丟失的信息內容。

title屬性可以提供額外的提示或幫助信息，當鼠標移至圖片上時顯示提示信息，方便用戶使用。

width和height兩個屬性分別表示圖片的寬度和高度，如果不設置，那么圖片默認顯示原始大小。

5、超鏈接標簽

（1）超鏈接包含兩部分內容，一是鏈接地址，即鏈接的目標，可以是某個網站或文件路徑，對應a標簽的href屬性；二是鏈接文本或圖像，點擊該文本或圖像，將跳轉到href屬性指定的鏈接地址。

<a href="path" target="目標窗口位置">鏈接文本或圖像</a>

href：鏈接地址的路徑;

target：指定鏈接在哪個窗口打開，常用的取值有_self（自身窗口）、_blank（新建窗口）。超鏈接即可以是文本超鏈接，也可以使圖片超鏈接

（2）常用的超鏈接

1>頁面間鏈接

從一個頁面鏈接到另一個頁面

2>錨鏈接

錨鏈接也稱錨點鏈接，命名錨點鏈接（也叫書簽鏈接）常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，自動跳轉到我們設置錨點的位置，類似于我們閱讀書籍時的目錄頁碼或章回提示。

錨點鏈接可以跳轉到頁面的任何位置。一般用于在頁面下面的時候，點擊回到最上面。錨點鏈接的名稱可以隨意取，只起到標記作用。

1.從A頁面的甲位置跳轉到本頁中的乙位置

示例：

    <a href="#a1">a1</a>
    <a href="#a2">a2</a>
    <a href="#a3">a3</a>
    <a href="#a4">a4</a>

    <div id="a1">a1</div>
    <div id="a2">a2</div>
    <div id="a3">a3</div>
    <div id="a4">a4</div>

2.從A頁面的甲位置跳轉到B頁面中的乙位置

示例：

<!--A頁面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
<title>錨鏈接</title>
</head>
<body>
<p>
    [<a href="help.html#register">A位置</a>] 
    [<a href="help.html#login">B位置</a>]
</p>
</body>
</html>

<!--B頁面-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>錨鏈接</title>
    <style>
        div{
            width: 100%;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<h4><a name="register">A位置</a></h4>
<div>
    <h2>A位置</h2>
</div>
<h4><a name="login">B位置</a></h4>
<div>
    <h2>B位置</h2>
</div>
</body>
</html>

3>功能性鏈接

<!--下載圖片-->
<a href="img/qq.jpg">點擊下載圖片</a>

<!--發送郵件-->
<a href="mailto:Webmaster@ytzl.cn">聯系我們</a>

<!--引用腳本語言-->
<a href="javascript：alert('哈哈哈哈')"></a>

6、注釋和特殊符號

<!--注釋符號-->

當頁面的HTML結構復雜或內容較多時，需要添加必要的注釋方便代碼閱讀和維護。同時，有時為了調試，需要暫時注釋掉一些不必要的HTML代碼。特殊符號一般以"&"符號開頭，";"結尾。

3.1 練習

3.1.1 制作《悟空》歌詞

需求：

1、標題使用標題標簽，文字使用p標簽標題與正文之間的分隔線使用水平線標簽；歌詞詞結束后使用換行標簽換行

2、人名加粗顯示，時間斜體顯示

3、制作頁面版權部分

<html>
    <head>
             <title>我的第一個網頁</title>
    </head>
    <body>
             我的第一個網頁
    </body>
</html>

3.1.2 制作圖書簡介頁面

使用學過的圖像標簽、標題標簽、水平線標簽、斜體標簽、加粗標簽、段落標簽等制作京東讀書新聞資訊頁面，主標題使用一級標題標簽，副標題使用二級標題標簽，二級標題與圖片之間使用水平線分隔。

<h1>HTML5+CSS3從入門到精通（標準版）</h1>
<h2>作者：未來科技</h2>
<hr/>
<p><img src="images/book.jpg" alt="圖書" width="200"/></p>
<p><em>HTML 5 CSS 3 JavaScript從入門到精通（標準版）</em></p>
<p><em>  以基礎知識、示例、實戰案例相結合的方式詳盡講述了HTML  CSS  JavaScript及目前*的前端技術html5移動開發 html5實戰 html5 canvas html5 app html5入門 html5 動畫  html5揭秘 html 游戲 html5權威指南 的基本知識都有涉及。</em></p>
<p><strong>全書分兩大部分，共12章</strong></p>
<p>介紹了HTML5入門和CSS3實戰入門內容：使用HTML標簽標識網頁內容，使用CSS設計網頁基本樣式，如使用并美化文本、圖像、超鏈接、列表、表單和表格等</p>
<p>第二部分為CSS3布局部分，主要講解使用CSS3設計完整網頁的方法和技巧，以及CSS3中的各種新技術應用；</p>
<p>? 2015-2025 云圖智聯</p>

3.1.3 錨鏈接的應用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{
            display: block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
        }
        div{
            width: 400px;
            height: 400px;
            margin-top: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<a href="#a1">a1</a><a href="#a2">a2</a><a href="#a3">a3</a><a href="#a4">a4</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
</body>
</html>

免費學習視頻歡迎關注云圖智聯：https://e.yuntuzhilian.com/

在線咨詢

上一篇：關于博客里視頻插入的方法，以土豆為例
下一篇：前端面試：如何寫出高性能的 HTML？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商