Sublime Text 使用指南 - 前端開發神器


Sublime Text 前端開發的神器

Sublime Text是一個前端開發者必備的編輯器,大量的插件,完善的功能,優越的性能,有非常多的特色,給前端開發提供了一個完善的開發條件。

本文主要介紹的是如何使用sublime Text藏在菜單里的一些功能,這些功能十分強大,卻因隱藏的較深不太被大家關注,網上相關的介紹文章也不太多,這里就整理一下。

 

Sublime Text 功能使用介紹,目錄:

  • Nodejs build System
  • Multiple Selections
  • Project & Workspace
  • Sublime Text 便攜化(綠化)
  • Goto Anything...
  • Snippets
  • Macros
  • Split Editing

 

 

 

Nodejs build System

nodejs編譯系統,可以用來快速的測試函數功能。

Sublime Text -> Tools -> Build System -> new Build System..

粘貼如下代碼

{
    "cmd": ["node", "$file"],
    "file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
    "selector": "source.js",
    "shell": true,
    "encoding": "utf-8", // 編碼
    "windows": {
        // "cmd": ["taskkill /F /IM node.exe & node", "$file"] // win下不支持這樣的命令
        "cmd": ["node", "$file"]  // 每次編譯都新開一個進程,但編譯結束后進程會自動關閉,所以不要直接用來啟動server
    },
    "linux": {
        "cmd": ["killall node; node", "$file"]
    },
    "osx": {
        "cmd": ["killall node; node $file"]
    }
}

Sublime Text -> Tools -> Build (Ctrl + B),效果如下:

 

 

Multiple Selections

Sublime Text多點編輯,sublime的最大特點,sublime官網的大圖就是介紹該功能。使用方式如下:

  • 連續點擊 ctrl+d 選中同名字符
  • ctrl+鼠標左鍵 點擊選擇多行
  • 鼠標中間按住 拖動選擇多行

 

 

 

Project & Workspace

Sublime Text自帶工作空間。使用方式如下:

Sublime Text -> Project -> Save Project As ... 保存工作空間

Sublime Text -> Project -> Open Project  打開工作空間

工作空間有Project 與 Workspace 兩個概念的區別,在使用上並沒有區別。

打開工作空間后,在sublime的標題欄處會顯示當前工作空間。

 

 

 

Sublime Text 便攜化(綠化)

對Sublime Text進行綠化,實現一個文件夾打包遷移的目的。

安裝sublime時,默認的用戶配置與插件的路徑會安裝在用戶臨時目錄下,可以通過 Sublime Text -> Preference -> Browse Packages... 快速訪問該目錄。

為防止綠化過程中出現錯誤,先退出sublime。

打開sublime臨時目錄,返回上一級目錄,有Install Packages、Local、Packages三個目錄,將它們剪切。

打開Sublime Text的安裝目錄,新建Data文件夾,將剪切的三個目錄粘貼到Data下,完成綠化。

 

 

 

Goto Anything...

Ctrol + P 快速查找文件,可以通過幾個關鍵詞模糊查詢整個workspace中的文件。如下:

輸入 :50 查找行號

輸入 @check 查找函數

Goto Definition... 快捷鍵F12,快速跳轉到函數定義的位置。

 

 

 

Snippets

Sublime Text 代碼片段,給經常使用的語法糖或代碼添加代碼片段非常有用。

Sublime Text -> Tools -> New Snippet... 添加如下代碼:

${1} 代表一個占位符,數字表示tab index,${0}是最后一個。或者可以有這樣帶描述的語法:${1:description}

 

還有更高級的用法,如:

${1:T} 是第一個占位符

${1/(T)|.*/(?1:s)/} 是對第一個占位符進行匹配。

格式是這樣的:

${1/a|b|c|d|.*/(?1:A)(?2:B)(?3:C)(?4:D)/}(該例子是將輸入的字符進行判斷,abcd轉大寫,其余不做處理)

拆開來是這樣理解的:

 

 

 

 

Macros

Sublime Text 宏。

Tools -> Record Macro 錄制宏

Tools -> Save Macro... 播放宏

在工作中並沒有什么情況需要自己去錄制一些特殊的宏。

 

 

給宏綁定快捷鍵,Preferences -> Key Bindings - User,配置快捷鍵和宏文件路徑,如下:

{ "keys": ["ctrl+enter"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Add Line.sublime-macro"} },

 

 

 

Split Editing

Sublime Text分屏

 


免責聲明!

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



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