Sublime Text 快速指南



Sublime Text - 簡介

Sublime Text 編輯器是一個功能齊全的文字編輯器,用於編輯本地檔案或程式碼庫。它包含各種用於編輯程式碼庫的功能,幫助開發人員跟蹤更改。Sublime 支援的各種功能如下:

  • 語法高亮
  • 自動縮排
  • 檔案型別識別
  • 帶有指定目錄檔案的側邊欄
  • 外掛和包

Sublime Text 編輯器用作整合開發環境 (IDE),例如 Visual Studio Code 和 NetBeans。Sublime Text 編輯器的當前版本為 3.0,相容各種作業系統,例如 Windows、Linux 和 macOS。

為什麼選擇 Sublime Text?

當您使用合適的文字編輯器時,您可以享受其豐富的功能。Sublime Text 為其使用者提供以下好處:

  • 能夠解決連結器錯誤。
  • 跟蹤所有檔案和資料夾以進行工作。
  • 與 Git、Mercurial 等版本控制系統連線。
  • 問題解決能力。
  • 保持語法組合的顏色組合。

您可以從其官方網站下載 Sublime Text:www.sublimetext.com。在下一章中,我們將學習如何在各種作業系統中安裝 Sublime Text 編輯器。

Sublime Text - 安裝

Sublime Text 編輯器受以下主要作業系統支援:

  • Windows
  • Linux 及其發行版
  • OS X

您可以從其官方網站下載 Sublime Text:www.sublimetext.com

Installation Downloading Setup.jpg

在本節中,您將學習如何在各種作業系統上安裝 Sublime Text。

在 Windows 上安裝

您需要按照以下步驟在 Windows 上安裝 Sublime Text:

步驟 1 - 從官方網站下載 .exe 包,如下所示:

https://www.sublimetext.com/3

Installation Step-1

步驟 2 - 現在,執行可執行檔案。這定義了環境變數。當您執行可執行檔案時,您可以在螢幕上看到以下視窗。點選下一步

Installation Step-2

步驟 3 - 現在,選擇一個目標位置來安裝 Sublime Text 3 並點選下一步

Installation Step-3

步驟 4 - 驗證目標資料夾並點選安裝

Installation Step-4

步驟 5 - 現在,點選完成以完成安裝。

Installation Step-5

步驟 6 - 成功安裝後,您的編輯器將顯示如下:

Installation Step-6

在 Linux 上安裝

您需要按照以下步驟在 Linux 發行版上安裝 Sublime Text:

步驟 1 - 使用命令列終端,使用以下命令安裝 Sublime Text 編輯器的軟體包:

sudo add-apt-repository ppa:webupd8team/Sublime-Text-3

步驟 2 - 使用以下命令更新軟體包:

sudo apt-get update

步驟 3 - 使用以下命令安裝 Sublime Text 儲存庫:

sudo apt-get install Sublime-Text

成功執行上述命令後,您會發現 Sublime Text 編輯器已安裝到系統中。

在 OSX 上安裝

對於 OSX 作業系統,

  • 下載 Sublime Text 編輯器的 .dmg 檔案。

  • 開啟它並將其拖放到應用程式資料夾中。

  • 按照您在上述兩種情況下看到的步驟操作。

  • 啟動應用程式。

Sublime Text - 資料目錄

在本教程中,我們將重點關注將 Subversion 控制系統、Git 和 Bitbucket 與 Sublime Text 編輯器結合使用。

與任何其他文字編輯器一樣,在特定儲存庫上工作是 Sublime Text 的關鍵方面。它在以下步驟中詳細顯示:

步驟 1 - 考慮從 Bitbucket 克隆的儲存庫。請注意,在本教程中,我們將使用 Python 指令碼。

Data Directory Step-1

步驟 2 - 使用“開啟資料夾”選項將儲存庫包含在 Sublime Text 編輯器中,如下所示。

Data Directory Step-2

Data Directory Step-2-1

步驟 3 - 包含儲存庫後,Sublime Text 編輯器的螢幕將顯示如下:

Installation Step-3

您可以從螢幕左側顯示的列表中選擇要開啟的檔案,如以下影像所示:

Data Directory Display Selected File

請注意,顏色組合識別程式碼中包含的關鍵字和包。

Sublime Text - 建立第一個文件

在本節中,您將學習如何在 Sublime Text 中逐步建立檔案。

步驟 1 - 使用新建檔案選項在 Sublime Text 編輯器中建立檔案。

Creating File Step-1

步驟 2 - 新檔案可用後,您可以像任何其他文字編輯器一樣插入程式碼,並將檔案儲存在工作儲存庫中。

Creating File Step-2

步驟 3 - 儲存關聯檔案後,Sublime Text 編輯器會根據檔案型別提供各種選項,例如 PHP 指令碼的 .php、Python 指令碼的 .py 和 Java 程式碼庫的 .java

Creating File Step-3

步驟 4 - 由於我們的程式碼儲存庫位於 Python 專案上,因此我們將檔案儲存為 demo1.py,如下所示:

Creating File Step-4

Sublime Text - 編輯第一個文字文件

程式碼編輯器允許使用者使用各種快捷鍵編輯程式碼指令碼和文字文件。在本節中,讓我們透過各種示例瞭解在 Sublime Text 中編輯第一個文字文件的選項。

同時編寫

在本例中,您將看到如何在兩個位置新增列印語句。

步驟 1 - 考慮第一個 Python 指令碼,其中包含以下程式碼:

Editing First Document step-1

步驟 2 - 假設在給定的指令碼中,您希望使用簡單的語句來提及迴圈的起始點和結束點。您可以在需要的地方編寫列印語句,但是,在 Sublime Text 編輯器中,您可以使用 Windows 或 Linux 的 Ctrl+游標點或 Mac 的 Cmd+游標點快捷鍵同時在兩個位置添加註釋和語句。然後,您可以看到如下所示的游標點:

Editing First Document step-2

步驟 3 - 現在,您可以在提到的游標點的兩個位置插入列印語句,如下面的影像所示。

Editing First Document step-3

查找出現次數

Sublime Text 編輯器包含一個功能,用於查詢指令碼中包含的關鍵字的出現次數。突出顯示關聯關鍵字後,查詢關鍵字出現次數的快捷鍵為 Ctrl+D

Finding Occurrences

如果要搜尋某個關鍵字,例如給定程式碼中的 print,您可以使用 Ctrl+DCmd+D 獲取關聯關鍵字的出現次數。

Counting Occurrences

在行中追加註釋

我們可以在行尾追加註釋,方法是在選擇實際需要註釋的程式碼部分後,使用 Windows 的 Ctrl+Shift+L 或 Mac 作業系統的 Cmd+Shift+L 快捷鍵。

Appending Comments in Line

Sublime Text - 程式碼編輯模式

Sublime Text 編輯器中使用了各種型別的程式碼編輯和快捷鍵:

  • 將選擇拆分為行
  • 將整個段落包裝在 HTML 檔案中
  • 查詢所有出現次數

本章詳細討論了它們中的每一個。

將選擇拆分為行

鍵組合 Ctrl+Shift+L 允許您選擇程式碼塊並將其拆分,在 Windows 中。下面給出的螢幕截圖說明了這一點:

Splitting the Selection into Lines

將整個段落包裝在 HTML 檔案中

鍵組合 Windows 的 Alt+Shift+w 和 Mac 的 Cmd+Shift+w 允許使用者拆分程式碼部分並建立各種段落。它被稱為“使用 html 標記包裝選擇”。這也允許您使用 Sublime 編輯器包含 HTML 標記。

下面給出的螢幕截圖說明了使用 HTML 標記包裝文字:

Wrapping Complete Paragraph in HTML File

包裝文字後,將使用 HTML 標記包裝的文字將顯示如下:

After Wrapping the Text

查詢所有出現次數

鍵模式 Ctrl+Shift+f 允許您在給定專案中查詢關鍵字。下面給出的螢幕截圖說明了這一點:

Finding all Occurrences

快捷鍵會開啟一個包含三個選項的視窗,即查詢、位置替換

其中,

  • 查詢指的是特定關鍵字的搜尋,

  • 位置指的是搜尋哪個儲存庫的部分,以及

  • 替換指的是替換查詢關鍵字的關鍵字。

Sublime Text - Sublime Linter

Linting 是標記可疑結構和任何程式語言中可能存在的錯誤的過程。

Sublime Linter 是 Sublime Text 的一個包,可幫助您在 Sublime 中執行 linting。它有助於以不同的模式建立檔案以操作程式碼庫。它不是內建包,您需要手動安裝它。

您可以使用Sublime Text編輯器的快捷鍵組合Ctrl+Shift+P,並選擇Package Control: Install Package選項來安裝任何包控制。

Install Linter Package

在Sublime Text編輯器中選擇要安裝的關聯包。要安裝Sublime Linter,您需要選擇SublimeLinter外掛選項。

Select the Associated Package to Install

安裝成功後,您的螢幕將如下所示:

Sublime Linter Successful Installation

Sublime Linter的模式

Sublime Linter以以下四種不同的模式執行:

後臺模式

當Sublime Linter鍵設定為true時,每次修改檔案時都會在後臺持續執行程式碼檢查。

載入-儲存模式

當Sublime Linter鍵設定為load save時,將在從儲存庫載入檔案時執行程式碼檢查。

僅儲存模式

當Sublime Linter鍵設定為save only模式時,在將特定檔案儲存到工作儲存庫時執行程式碼檢查。

按需模式

在按需模式下,Sublime Linter將設定為true,使用快捷鍵Ctrl+Alt+L,這將設定程式碼檢查器以檢測程式碼中是否存在任何錯誤。

Sublime Text - 快捷鍵

Sublime Text編輯器包含用於操作輸出的快捷鍵和方法。本章將藉助合適的插圖詳細討論這些快捷鍵。

開啟命令面板

Sublime Text編輯器中的命令面板包含用於安裝包和控制檯的選項。用於此目的的快捷鍵是Windows上的Ctrl+Shift+P和Mac上的Cmd+Shift+P。下面給出的螢幕截圖顯示了使用此快捷鍵開啟命令面板。

Opening the Command Palette

切換側邊欄

Sublime Text編輯器包含一個側邊欄,顯示指令碼或檔名。您可以為此目的在Windows上使用快捷鍵Ctrl+KB,在Mac上使用Cmd+KB

Toggle Side Bar 1

Toggle Side Bar2

在狀態列中顯示範圍

Windows上的快捷鍵Ctrl+Shift+Alt+P和Mac上的Ctrl+Shift+P會在狀態列中顯示範圍。下面的螢幕截圖顯示了此快捷鍵的示例。

Display Scope in Status Bar

Python 控制檯

當您使用Sublime Text編輯器處理Python指令碼時,您可以使用Windows上的Ctrl+`或Windows上的Control +`來操作Python控制檯。

Python Console

新建視窗

使用新視窗,您可以同時管理多個專案。您可以在Windows上使用快捷鍵Ctrl+Shift+N,在Mac上使用Cmd+Shift+N在Sublime Text編輯器中建立新視窗。新建視窗

Sublime Text - 程式碼片段

程式碼片段是可以根據需要重複使用的智慧模板。Sublime Text編輯器包含用於HTML模板的程式碼片段功能。在本章中,您將詳細瞭解它們。

瞭解程式碼片段

程式碼片段是簡單的XML支援檔案,具有各種屬性。它們包含一個名為sublime-snippet的副檔名。XML元素的根標籤將是<snippet>標籤。建立的程式碼片段儲存在Packages資料夾中,並被視為位於此資料夾中。

Understanding Snippets

程式碼片段的檔案格式和語法將詳細討論如下:

  • 內容 - 此部分包含程式碼片段的描述。

  • tabTrigger - 它包含當寫入程式碼片段時觸發的字元序列。

  • 範圍 - 它定義程式碼片段保持活動狀態的範圍。

  • 描述 - 它包含所有元描述。當代碼片段的選單開啟時,它將顯示。

建立第一個程式碼片段

您可以使用工具 → 開發人員 → 程式碼片段選項建立預設程式碼片段。

Create Snippet Using Tools-Developer-Snippet option

然後,將建立具有關聯標籤的演示程式碼片段,如下所示:

Demo Snippet

要在Sublime Text編輯器中建立第一個程式碼片段,請單擊工具選單,並從下拉視窗中選擇程式碼片段選項,如這裡螢幕截圖所示。

Create a First Snippet

現在,從顯示的選項中選擇程式碼片段:html

Choose Snippet:html

這將在指定的html檔案上建立一個預設程式碼片段,如下所示。

Default Snippet on HTML File

請注意,不同型別的檔案有各種程式碼片段。對於程式碼庫中的html檔案,在Sublime Text編輯器中定義了三個程式碼片段,如下所示。

Three Snippets in Sublime Text editor

包控制程式碼片段

控制程式碼片段主要用於產品開發。使用Sublime編輯器中的安裝包選項,您可以下載任何Web開發所需的程式碼片段並安裝它。

Package Control Snippets

您可能需要以下軟體包進行Web開發:

  • EverCodeLab Sublime 支援 Ruby on Rails
  • PHP 的附加 PHP 程式碼片段
  • HTML 檔案的 HTML 程式碼片段
  • Twitter Bootstrap 的 Twitter Bootstrap 程式碼片段
  • JS 檔案的 JavaScript 程式碼片段
  • jQuery 的 jQuery 程式碼片段包

Sublime Text - 宏

宏是包含一系列命令的基本自動化工具。當您需要執行包含相同步驟的操作時,可以使用宏。

宏檔案是副檔名為.sublime-micro的JSON檔案,被認為非常有用。

錄製宏

錄製宏定義了保留給定檔案所需的一組命令的過程。您可以透過兩種方式錄製宏:

  • 使用快捷鍵Ctrl+Q在Windows中錄製宏,在Mac中使用Cmd+Q。

  • 使用工具 → 錄製宏中的錄製選項。

Tools -> Record Macro

宏開始錄製後,您可以在Sublime Text編輯器中看到以下訊息:

Message in Sublime Text Editor

播放宏

您可以使用Windows上的快捷鍵Ctrl+Shift+Q和Mac上的Cmd+Shift+Q來播放使用者在Sublime Text中錄製的宏。請注意,此快捷鍵會播放Sublime中最後錄製的宏。

儲存宏

您可以使用工具 → 儲存宏選項保存錄制的宏。下面的螢幕截圖顯示瞭如何使用此選項儲存宏。

Tools -> Save Macro

您還可以使用工具選單欄中的各種選項重新定義宏,如下所示:

Redefine the Macros

Sublime Text - 鍵繫結

Sublime Text中的鍵繫結幫助使用者處理並將按鍵序列對映到操作。它們以JSON格式定義,並存儲在.sublime-keymap檔案中。

為了更好地整合,重要的是為Linux、OSX和Windows保留單獨的鍵對映檔案。相應平臺的鍵對映將在Sublime Text編輯器中載入。

使用者可以使用首選項 → 鍵繫結選項開啟鍵對映檔案或預設鍵繫結。

Key Bindings in Sublime Text1

Key bindings in Sublime Text2

以下示例顯示瞭如何在Windows中執行鍵繫結:

[
   { "keys": ["ctrl+shift+n"], "command": "new_window" },
   { "keys": ["ctrl+shift+w"], "command": "close_window" }
]

定義鍵繫結

Sublime Text編輯器包含一個定義鍵對映的選項。在.sublime-keymap檔案中定義的鍵繫結包含所有鍵值組合。

Defining Key Bindings

您可以將以下鍵繫結集包含到此檔案中並儲存它們以檢查執行情況,藉助以下顯示的程式碼:

[
   { 
      "keys": ["super+alt+;"], "command": "run_macro_file",
      "args": 
      {"file": "Packages/User/semicolon.sublime-macro"} 
   }
]

這裡super是Windows或Linux中的Win鍵,以及OSX作業系統上的命令。請注意,此程式碼將在按下Super+Alt+鍵時執行位於Packages/User中並命名為semicolon.sublime-macro的宏。

Sublime Text - 列選擇

在本章中,您將學習各種快捷鍵,以在Sublime Text中移動和選擇檔案的列。

將指標移動到程式碼開頭

您可以使用快捷鍵Ctrl+Home將指標移動到Sublime Text編輯器中程式碼的開頭。

觀察此處顯示的示例程式碼。

Sample Code

下面給出的螢幕截圖顯示了相同的程式碼,其中游標已移動到其開頭。

Screenshot Cursor moved to Beginning

擴充套件列

您可以使用快捷鍵Ctrl+L擴充套件指定的列。此快捷鍵將選擇包含指標的列。以下螢幕截圖詳細解釋了這一點:

Extending a Column

修剪列

您可以使用快捷鍵Ctrl+K修剪檔案指定的列。對於OSX,您將必須為此目的使用鍵組合Cmd+K

此處顯示的示例顯示了程式碼,其中提到了第五列中的行已被修剪。

Trimming a column

分割文字塊

您可以使用快捷鍵Ctrl+Shift+K將選定的文字塊分成兩個選擇。

Split a Block of Text

注意 - 與之前的鍵組合的區別在於列是可見的。Ctrl+Shift+K從指定的程式碼中刪除列號,而Ctrl+K在修剪整個列後保持列號不變。

Sublime Text - 縮排

縮排是維護程式語言的程式碼塊以維護系統結構的過程。它有助於向開發人員傳達更好的程式結構。本章詳細解釋了Sublime Text編輯器中的縮排。

縮排的重要性

縮排有助於維護程式碼結構,以便任何訪問它的人都能輕鬆理解。正確的縮排賦予程式碼以下功能:

  • 可讀性
  • 使用者友好性
  • 適應性
  • 易於維護

Sublime Text中的縮排選項

Sublime Text編輯器提供了各種程式碼縮排選項,如下面的螢幕截圖所示:

Options for Indentation in Sublime Text

此處詳細討論了這些選項的使用:

縮排選項

縮排選項有助於建立指定程式碼的縮排。您必須選擇指定的程式碼並選擇縮排選項。您也可以在選擇要縮排的所需程式碼後使用快捷鍵Ctrl+[。請參閱以下螢幕截圖以更好地理解:

Indent Option

取消縮排選項

取消縮排選項的工作原理與縮排過程相反。取消縮排選項的快捷鍵為Ctrl+]。請參閱以下螢幕截圖以更好地理解:

Unindent Option

重新縮排選項

重新縮排選項用於撤消取消縮排選項並將程式碼恢復到相同狀態。請參閱以下螢幕截圖以更好地理解:

Reindent Option

縮排的好處

正確的縮排為程式碼和開發人員提供了各種好處。它們在下面討論:

  • 程式碼塊將無需太多努力即可檢視。

  • 開發人員可以專注於必要的程式碼行,並輕鬆忽略不相關的程式碼行。

  • 多次使用相同程式碼結構的開發人員無需關注塊的開始塊的結束語句。

  • 可以輕鬆識別任何錯位的程式碼行。

Sublime Text - 基本設定

Sublime Text編輯器的基本設定是編輯器所需的配置,例如字型大小、顯示行號或編輯器的配色方案。

所有基本設定都以JSON格式配置。要檢視設定列表,請轉到首選項 -> 設定選單。

Base settings

Base settings2

設定包括兩種型別的配置,即:

  • 預設
  • 使用者

預設包含所有預設配置,使用者為基本設定定義自定義設定。

對於上面提到的場景,自定義設定如下:

"font_size": 15,
   "ignored_packages":
   [
      "Vintage"
   ]

設定類別

Sublime Text中各種設定類別如下:

編輯器設定

這些包括用於編輯程式碼庫檔案的基本設定。示例包括font_face、font_sizetab_size。設定存在於預設配置中。

使用者介面設定

這些包括專門關注背景、主題和各種顏色組合的一般設定。這些設定附加在預設配置的第二部分中。

應用程式行為

這些設定側重於 Sublime Text 編輯器中包含的應用程式在開啟的視窗之間的行為。這些設定包含在預設配置設定的第三部分中。

語法 - 特定設定

這些設定用於設計 Sublime Text 編輯器的語法。要獲取語法特定設定的列表,使用者需要使用選項首選項 - 語法特定

Syntax Specific Settings

Syntax Specific Settings2

Sublime Text - 主題管理

Sublime Text 編輯器中的主題管理意味著使用顏色和吸引人的背景來增強編輯器的外觀。主題是使用.sublime-theme副檔名的 JSON 格式的值,透過更改 IDE 元素的顏色來管理編輯器使用者介面的外觀。

安裝和應用主題

以下步驟將指導您瞭解如何在 Sublime Text 編輯器中安裝和應用主題 -

步驟 1 - 使用 Sublime Text 的安裝包來安裝主題包,如此處螢幕截圖所示 -

Theme Management Step1

步驟 2 - 您可以看到一個包含安裝包選項的選項列表,您可以下載它們並安裝到 Sublime Text 編輯器中。

Theme Management Step2

步驟 3 - 選擇主題後,啟用它。

Theme Management Step3

步驟 4 - 現在從已安裝的主題列表中選擇所需的主題。這會自動更改編輯器的外觀。

Theme Management Step4

配色方案

配色方案是位於Packages資料夾中的 XML 格式檔案,其中包含配色方案。與特定於 UI 元素的主題不同,它們是自定義 Sublime Text 顏色的絕佳方式。

您可以使用選項首選項 → 配色方案選擇配色方案。請參閱以下顯示相同的螢幕截圖。

Color Schemes

Color Schemes2

配色方案包括各種選項,例如Breakers、Mariana、MonokaiSixteen。編輯器的外觀取決於您選擇的配色方案。請注意,這些模式將僅關注顏色語法。

Sublime Text - 瞭解 Vintage 模式

Sublime Text 編輯器中的 Vintage 模式是一個包含 vi 編輯功能組合的包。Vintage 模式允許您在 Sublime 編輯器中使用一系列 vi 命令。

Vintage 模式是一個開源專案,您可以從以下連結下載它 -

https://github.com/sublimehq/Vintage

瞭解 vi 編輯器

Vi 是一款原始且廣泛使用的文字編輯器。它最初是為 UNIX 作業系統建立的,並具有基本的指令碼執行功能。由於它不需要滑鼠操作,因此它是各種作業系統中廣泛使用的命令列編輯器。

Sublime 包含vim,它是vi編輯器的高階部分,幷包括宏、程式碼片段和外掛的自定義。

啟用 Vintage 模式

您可以透過以下步驟啟用 Vintage 模式 -

  • 選擇選項首選項 → 設定

  • 使用鍵名為ignored_packages編輯設定配置的json檔案。Vintage 包包含在ignored_packages部分中。

Enabling Vintage Mode
  • 刪除配置中 Vintage 的屬性以在 Sublime Text 編輯器中啟用 Vintage 屬性。

"ignored_packages": []
  • 您的 Vintage 模式編輯器將顯示如下面的螢幕截圖所示 -

Vintage Mode Editor Screenshot

Sublime Text - Vintage 命令

Vintage 模式包含各種類似於 vi 編輯器的命令。這包括如下所示的 Sublime Text 編輯器的基本設定 -

{
   "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
   "font_size": 15,
   "ignored_packages":
   [
   
   ],
   "vintage_start_in_command_mode": true,
   "theme": "Soda Dark.sublime-theme"
}
模式 描述
命令模式 等待使用者輸入命令 Esc
插入模式 文字可以插入到不同的位置 i/I/a/A
可視模式 使用移動命令選擇/突出顯示文字 V
可視行模式 使用箭頭鍵選擇/突出顯示文字行 Shift + V

Vintageous 模式

Vintageous 是用於 vi 編輯器描述性分析的包。它可以使用包控制下載,如下所述 -

Vintageous Mode Downloaded Using Package Control

成功安裝 Vintageous 包後,您的螢幕將如下面的螢幕截圖所示 -

Screenshot Successfully Install the Vintageous Package

Sublime Text - 測試 Javascript

Sublime 編輯器包含各種程式語言的測試模組。這有助於對檔案和指令碼進行單元測試,並幫助開發人員分析任何錯誤、錯誤和問題。

Sublime Text 編輯器包含 3 個模組,這些模組對於 JavaScript 的測試和部署是必要的。本章將詳細討論它們。

JsFormat

JsFormat 是一個用於格式化指令碼行的 JavaScript 外掛,它簡化了單元測試過程。在幕後,它使用 JS 美化器(http://jsbeautifier.org/)來格式化完整的 JS 檔案或 JS 檔案的部分內容。JsFormat 可以使用 Sublime 編輯器的安裝包選項安裝。

JsFormat Install Package

功能

JsFormat 為指令碼提供以下功能 -

  • 簡化 JS 和 JSON 檔案格式。
  • 提供全文格式化和選定格式化。
  • 提供可自定義的格式化選項設定。

JSHint

JSHint 是一個社群驅動的工具,用於透過提示分析錯誤。這有助於檢測錯誤和潛在問題。JSHint 是一個開源包,簡單易懂。您可以透過安裝包模式在 Sublime Text 編輯器中安裝 JSHine。

要在 Sublime Text 編輯器中實現 JSHint 外掛,您可以在 Windows 上使用快捷鍵Alt+J,在 OSX 系統上使用Cmd+j

JSHint Install Package

JavaScriptNext

此指令碼用於突出顯示 JS 檔案的語法及其關聯含義。它包含使用各種模組、箭頭函式、類和生成器的語法高亮功能。

JavaScriptNext

您可以使用語法列表對檔案執行語法檢查,如下面的螢幕截圖所示 -

Screenshot Syntax List

Sublime Text - 測試 Python 程式碼

Python 提供unittest,這是一個用於單元測試部署前設計的指令碼的官方單元測試框架。它也稱為PyUnit。Sublime Text 編輯器中使用的 Python 單元測試稱為sublime-unittests,它們位於以下連結中 -

https://github.com/martinsam/sublime-unittest

這些單元測試包含許多有用的程式碼片段,以簡化單元測試用例的編寫。

UnitTest 的安裝

Sublime 的包控制管理unittests的安裝,以下步驟詳細描述了它 -

步驟 1 - 使用 Sublime 編輯器的命令面板Ctrl+Shift+P安裝包,如下面的螢幕截圖所示 -

Installation of UnitTest Step1

Installation of UnitTest Step1-1

Installation of UnitTest Step1-2

步驟 2 - 已安裝的包使用以下兩個主要程式碼片段 -

  • testclass用於建立一個新的測試類

  • testfunc用於為我們建立一個新的測試函式以填寫

步驟 3 - 控制檯計算測試結果,如下面的螢幕截圖所示。請注意,結果取決於測試的成功或失敗。

成功結果

JSHint Install Package Failure Result

失敗結果

JSHint Install Package Failure Result

注意 - 單元測試用例充當計算 Python 中指令碼的編譯器。

Sublime Text - 拼寫檢查

Sublime Text 編輯器使用Hunspell進行拼寫檢查過程。Hunspell是 LibreOffice、Mozilla Thunderbird、Google Chrome 和許多專有軟體包的拼寫檢查器。Sublime Text 編輯器包含字典支援,以便正確拼寫單詞。

字典

Sublime Text 包含 UTF-8 編碼的字典。要在 Sublime Text 編輯器中實現字典,應首先將其轉換為 UTF-8。如果使用者擁有 UTF-8 編碼的字典,則可以使用 Sublime Text 編輯器中的首選項選項安裝它。

Install Using Preferences Option

您可以從檢視 → 字典選單中選擇字典,如給定的螢幕截圖所示 -

View Dictionary Menu

字典設定

為 Sublime Text 編輯器的拼寫檢查定義了兩個設定 -

  • Spell_check
  • Dictionary
// Set to true to turn spell checking on by default
"spell_check": false,

// Word list to use for spell checking
"dictionary": "Packages/Language - English/en_US.dic"

這些配置包含在設定檔案中。新增和忽略的單詞分別儲存在使用者設定下的added_wordsignored_words鍵中。

Sublime Text - 包

軟體包安裝在 Sublime Text 中以提供其他功能。您可以透過 Windows 上的快捷鍵Ctrl+Shift+P和 Mac 上的Cmd+Shift+P檢視軟體包列表。請觀察以下螢幕截圖以更好地理解 -

Installing Software Packages

Installing Software Packages2

這些包安裝在包含所有必要配置的Packages → User目錄中。要瀏覽包,請選擇首選項 → 瀏覽包選項,如下面的螢幕截圖所示 -

Packages User Directory Configuration

Packages User Directory Configuration2

Packages User Directory Configuration3

這些檔案是自定義配置,可以根據需要進行更改。包以 JSON 格式建立。

考慮建立的sublime-keymap包,其中包含以下程式碼 -

[
   { 
      "keys": ["super+alt+;"],
      "command": "run_macro_file",
      "args": {"file": "Packages/User/semicolon.sublime-macro"}
   }
]

Sublime Text - 選單

在本章中,您將瞭解 Sublime Text 編輯器的檔案、編輯轉到選單的主要選項。

帶編碼儲存

此選項包含在檔案選單中,有助於使用適當的編碼儲存指令碼和檔案。Sublime Text 編輯器包含各種用於編碼 Python 指令碼的選項,如下面的螢幕截圖所示 -

Save with Encoding

編碼過程有助於指令碼免受第三方攻擊,並允許將感知到的使用或興趣專案轉換為結構。

轉換大小寫

轉換大小寫有助於將大寫轉換為小寫,反之亦然。請參閱以下螢幕截圖以更好地理解 -

Convert Case

例如,考慮檔案中包含的關鍵字Monica,讓我們將其轉換為大寫。請參閱以下螢幕截圖以更好地理解 -

Keyword Converted

轉到符號

使用此選項,使用者可以搜尋或獲取相應的關鍵字或任何函式。當我們有超過 1000 行程式碼並且使用者需要搜尋唯一行或註釋時,此選項非常有用。

以下螢幕截圖顯示了轉到符號的演示 -

Goto Symbol

Sublime Text - 字型子選單

前面的章節討論了與偏好設定選單相關的各種選項。在本節中,您將詳細瞭解Sublime Text編輯器的字型設定

Sublime Editor提供了三種字型大小的維度 - 更大、更小重置選項以撤消所做的特定更改。一旦使用者在編輯器中選擇相應的段落或文字,就可以實現指定的字型。

Font settings of Sublime Text

考慮檔案functions.py中選定的文字,您需要在此處進行所需的更改 -

Font Settings Functions PY

請注意,在實現更大字型後,指令碼的尺寸和字型大小將自動更改為更大的尺寸。

Implementation of Larger Font

Sublime Text - 外掛開發

每個編輯器都包含用於開發的外掛,該外掛會觸發一系列活動和預設包。Sublime Text編輯器包含一個用於開發您自己的自定義外掛的功能。本章將詳細討論如何在Sublime Text中開發您自己的外掛。

外掛開發

以下步驟將詳細向您展示如何在Sublime Text中開發外掛 -

步驟1 - 透過導航到工具→開發者→新建外掛選擇新建外掛選項,如下所示 -

Developing Plugin step1

步驟2 - 外掛的基本程式碼包括匯入兩個主要的庫:sublimesublime_plugin

Developing Plugin step2

外掛的程式碼如下 -

import sublime
import sublime_plugin
class ExampleCommand(sublime_plugin.TextCommand):
   def run(self, edit):
      self.view.insert(edit, 0, "Hello, World!")

步驟3 - 自定義外掛儲存在Packages → User資料夾中。請參考以下螢幕截圖,它可以讓您完全瞭解儲存在Sublime Text編輯器中的外掛。

Developing Plugin step3

執行外掛

建立並儲存外掛後,使用快捷鍵Ctrl+`(Windows)和Cmd+`(OSX)開啟控制檯,並執行此處顯示的命令 -

view.run_command(plugin-name)
Font settings of Sublime Running the plugin

此命令將執行使用者定義的外掛,其中包含其中包含的活動列表。

Sublime Text - 命令面板

命令面板包含常用專案或命令的列表。命令的條目包含在.sublime-commands檔案中。

使用命令面板

要在Sublime Text編輯器中開啟命令面板,可以使用快捷鍵組合Ctrl+Shift+P(Windows)和Cmd+Shift+P(OSX)。

Using Command Palette

面板中常用的命令有 -

  • 使用Python構建
  • 安裝包

使用Python構建

這將生成所有依賴項並構建給定Python檔案的指定程式碼。

Build with Python

安裝包

使用此命令,我們可以獲得可以安裝的包列表,這些包之前未包含在內。

Install Packages Command Palette

命令面板中包含的所有命令都儲存在Packages目錄中。在Default.sublime-commands檔案中宣告的命令的基本示例如下所示 -

[
   { "caption": "Project: Save As", "command": "save_project_as" },
   
   { "caption": "Project: Close", "command": "close_project" },
   
   { "caption": "Project: Add Folder", "command": "prompt_add_folder" },
]

注意 - JSON檔案為每個命令包含3個主要鍵 -

  • 名稱/標題
  • 位置
  • 內容

Sublime Text - 除錯PHP應用程式

除錯是查詢給定程式碼中的錯誤和缺陷並修復它們的過程。Sublime編輯器包含各種具有除錯功能的外掛,這有助於輕鬆查詢錯誤。

在本節中,您將學習如何除錯PHP Web應用程式。Sublime為此目的使用Sublime TestX debug外掛。此外掛的功能如下 -

  • 它是用於除錯PHP檔案和指令碼的擴充套件。

  • 提供除錯和分析功能列表。

  • 維護堆疊跟蹤和即時引數,如顯示和功能。

Sublime外掛的安裝

要安裝Sublime Text Xdebug外掛,您需要執行以下步驟 -

步驟1 - 使用Ctrl+Shift+PCmd+shift+P的快捷方式安裝包控制面板安裝。

Installation of Sublime Plugin Step1

Installation of Sublime Plugin Step1-2

步驟2 - 成功安裝Xdebug客戶端後,配置檔案將儲存在Installed Packages資料夾中。配置檔案是JSON檔案,其中包含除錯PHP Web應用程式的引數。

Installation of Sublime Plugin Step2

步驟3 - 使用快捷鍵Ctrl+F9啟動PHP檔案的除錯會話。您也可以使用命令面板中的開始除錯選項來執行此操作。

Installation of Sublime Plugin Step3

步驟4 - XdebugClient的分屏視窗將顯示PHP檔案的輸出。它保持逐行除錯程式碼的過程。請參考以下螢幕截圖以更好地理解 -

Installation of Sublime Plugin Step4

除錯 Javascript 應用程式

Sublime Text Editor有一個外掛Web Inspector用於除錯JavaScript程式碼。它幫助我們設定斷點、檢查控制檯和評估程式碼部分。在本節中,您將詳細瞭解此外掛。

Sublime Web Inspector的安裝

以下步驟顯示Sublime Web Inspector的安裝 -

步驟1

使用選單選項首選項→瀏覽程式包獲取已安裝程式包的路徑,如給定螢幕截圖所示。

Installation of Sublime Plugin Web Inspector Step1

步驟2

藉助git命令提示符,使用git儲存庫克隆除錯Javascript Web應用程式的程式包,如下所示命令 -

git clone -b ST3 "git://github.com/sokolovstas/SublimeWebInspector.git"

Installation of Sublime Plugin Step2

步驟3

要測試安裝,請開啟命令面板並啟動Web檢查器。您可以使用Web檢查器的快捷鍵Ctrl+Shift+R(Windows)和Cmd+Shift+R(OSX)系統。您可以看到JavaScript應用程式所需的所有斷點,如下所示 -

Installation of Sublime Plugin Step3

Sublime Text - 批次處理

Sublime Text中的批次處理也稱為構建系統。構建系統幫助使用者透過外部程式(例如make、tidy直譯器)執行檔案。

使用構建系統時,以下幾點值得注意 -

  • 它們是JSON檔案,副檔名為.sublime-build

  • 要啟動構建過程,可以選擇工具→構建選項或Windows上的快捷鍵Ctrl+B和OSX系統上的Cmd+B

回想一下,在本教程中,我們專注於Python檔案。Sublime文字包含兩種用於Python檔案的構建模式。

Batch Processing Python Files

Python構建完成後,您可以在編輯器上觀察以下輸出 -

Output Build for Python is Completed

您可以使用工具→構建結果→顯示構建結果選項檢視在Sublime Text編輯器中為特定專案建立的構建結果列表。

Tools-Build Results-Show Build Results.

請注意,構建系統和與批處理相關聯的完整檔案必須位於Packages資料夾(Packages/user)下。Sublime Editor中的許多程式包都包含其自己的構建系統。

Sublime Text - 免打擾模式

Sublime Text編輯器中的免打擾模式允許全屏顯示程式碼和檔案。您可以透過選項檢視→進入免打擾模式選單項進入免打擾模式。

Distraction Free Mode View_Option

在Sublime Text編輯器中啟用免打擾模式後,輸出將如下所示 -

Distraction Mode is Enabled

所有可訪問的UI chrome專案都隱藏了,但在免打擾模式下仍然可以訪問。

自定義

Sublime Text編輯器免打擾模式的所有自定義屬性都包含在Distraction Free.sublime-settings JSON檔案中,如下面的螢幕截圖所示。

Customization of Distraction Free Mode

以下螢幕截圖顯示了Sublime編輯器免打擾模式中包含的屬性 -

Distraction free mode of Sublime editor

請注意,line_numbers、gutter、draw_centered、wrap_width、word_wrapscroll_past_end等屬性可以啟用有吸引力的免打擾模式。

Sublime Text - SublimeCodeIntel外掛

SublimeCodeIntel是Sublime Text編輯器的一個重要外掛。它提供以下功能 -

  • 跳轉到符號功能,幫助使用者跳轉到檔案的指定符號行。

  • 包含自動完成庫,並即時顯示模組/符號。

  • 工具提示在狀態列中顯示有關關聯函式的資訊。

安裝

您可以透過以下步驟安裝SublimeCodeIntel外掛 -

步驟1 - 使用Windows上的快捷鍵Ctrl+Shift+P和OSX系統上的Cmd+Shift+P獲取Sublime Text編輯器的安裝程式包功能。請參考以下螢幕截圖以更好地理解 -

SublimeCodeIntel Plugin Installation Step1

步驟2 - 現在,選擇要安裝的外掛SublimeCodeIntel並重新啟動Sublime Text編輯器。

SublimeCodeIntel Plugin Installation Step3

步驟3 - 成功安裝SublimeCodeIntel外掛後,您的螢幕將如下所示 -

SublimeCodeIntel Plugin Installation Step3

配置

SublimeCodeIntel有兩個內建配置 -

  • 設定 - 預設
  • 設定 - 使用者

請參考以下螢幕截圖,其中顯示了這些配置 -

Configuration Screenshot

SublimeCodeIntel的配置包含在名為SublimeCodeIntel.sublime-settings的JSON檔案中。每種語言所需的配置都包含在SublimeCodeIntel外掛中,如下所示 -

/*
   Defines a configuration for each language.
*/

"codeintel_language_settings": {
   "Python3": {
      "python3": "/usr/local/bin/python3.3",
      "codeintel_scan_extra_dir": [
         "/Applications/Sublime Text.app/Contents/MacOS",
         "~/Library/Application Support/Sublime Text 3/Packages/SublimeCodeIntel/arch",
         "~/Library/Application Support/Sublime Text 3/Packages/SublimeCodeIntel/libs"
      ],
      "codeintel_scan_files_in_project": true,
      "codeintel_selected_catalogs": []
   },
   
   "JavaScript": {
      "codeintel_scan_extra_dir": [],
      "codeintel_scan_exclude_dir":["/build/", "/min/"],
      "codeintel_scan_files_in_project": false,
      "codeintel_max_recursive_dir_depth": 2,
      "codeintel_selected_catalogs": ["jQuery"]
   },
   
   "PHP": {
      "php": "/Applications/MAMP/bin/php/php5.5.3/bin/php",
      "codeintel_scan_extra_dir": [],
      "codeintel_scan_files_in_project": true,
      "codeintel_max_recursive_dir_depth": 15,
      "codeintel_scan_exclude_dir":["/Applications/MAMP/bin/php/php5.5.3/"]
   }
}

這些配置可以根據需要進行自定義。這取決於使用者安裝的模組/庫的數量以及使用者正在處理的專案的規模和複雜性。

廣告

© . All rights reserved.