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分屏