sublime3插件開發

sublime Text 3 如下簡稱ST3是一個很是性感的文本編輯器，不少前端開發者在使用它。無插件，不神器，插件的使用可使開發更方便快捷。目前社區裏提供了各類各樣的插件，在搜索裏一搜就是各種插件的使用推薦，即便有這麼多的插件，有時也不能知足咱們的開發須要，今天就跟你們聊一下前段時間實現的（QcmsAux）插件的開發過程，但願給打算寫插件的小夥伴們提供參考。

前期知識瞭解

1.瞭解Python

ST3是經過C++開發的，它的插件系統是經過Python來編寫的，因此你必定要會Python，不必定很是精通，可是必定要了解，用到哪塊兒知道去哪兒查。

推薦：Python基礎教程 作爲入門瞭解。

2. Python控制檯

Sublime Text中內嵌了Python解釋器。ST3中的Python和系統中的python是相互獨立的。

我使用的是OSX系統，系統中的pythone版本是

python -V // Python2.7.10

打開Python控制檯

• 快捷鍵：Ctrl + `
• 菜單： View -> Show Console

在這個控制檯中查看，當前ST3中sublime的信息

sublime.version() // '3126'
sublime.platform() // 'osx'

查看ST3中python的版本

platform.python_version() //'3.3.6'

3. 重要的幾個目錄

Data目錄

ST3幾乎全部須要的文件都保存在Data目錄下，不一樣的操做系統路徑不一樣：

• Windows: %APPDATA%Sublime Text 3
• OS X: ~/Library/Application Support/Sublime Text 3
• Linux: ~/.config/sublime-text-3

刪除這個目錄以前使用的插件和自定義的一些配置都會被同時刪除，再次打開ST3,這個目錄會被自動建立。

Packages目錄

Data目錄下的Packages目錄是一個很是重要的目錄，關於編程和標記語言的全部支持都保存在這裏。

經過Sublime Text -> Preferences -> Browse Packages…能夠打開該目錄。

User 目錄

User目錄在Packages目錄下，用於保存自定義plugins，snippets, macros(宏)。插件配置等都存在這個目錄下。插件更新時，這個目錄裏的內容不會被修改。

準備工做

一個簡單的插件示例

Tools -> Developer -> New Plugin, 使用這個命令能夠建立一個插件示例，保存該文件，默認會保存在User目錄下，默認文件名是 untitled.py

插件保存的位置

經過Package Control 安裝的插件有的以源碼的形式存入Packages目錄，有的則以.sublime-package結尾的壓縮包存在在上層目錄的Installed Packages文件夾下。

ST3將會3個地方依次加載插件：

1. Installed Pacages(only .sublime-package files)
2. Packages
3. Packages/User

根據約定，不會加載更深層次嵌套的文件，也就是說若是把 untitled.py 放在packages目錄下會生效，可是若是放在User/new/下就不會生效。下面我直接放Packages/Example/下，文件名稱改成Example.py，這裏建議文件名和目錄名保持一致。

我本機的目錄/Users/rongl/Library/Application Support/Sublime Text 3/Packages/Example/

打開控制檯，看到reloading plugin example.Example，說明插件已經被自動加載了，而後運行view.run_command('example'),以下會在第一行插入Hello, World! ，這樣這個簡單的插件就執行成功了。

Hello, World!import sublime
import sublime_plugin

class ExampleCommand(sublime_plugin.TextCommand):

    def run(self, edit):
        self.view.insert(edit, 0, "Hello, World!")

到目前爲止已經完成了簡單的插件的編寫執行。在上面的示例中：

• sublime_plugin.TextCommand:這是文本編輯相關的基類，文本編輯相關的命令都繼承於這個基類。
• ExampleCommand: 類名以Command結尾，以前的部分爲命令名，其中首字母要大寫。執行命令時則採用下劃線風格的拼寫，view.run_command中傳入example，若是爲MyExampleCommand，則傳入my_example。
• run(self,edit): 執行命令時會執行這個函數，這是固定格式。edit爲API中提供的edit對象，在編輯時會用到。self,表明類ExampleCommand的實例。
• self.view.insert(edit,point,content): point是init類型，指定編輯器中的一個座標。全部插入，刪除，選取等操做都經過self.view調用。

示例的效果就是在point位置插入content.

QcmsAux的開發過程

插件的主要功能

1. 獲取當前文件的路徑，分析文件路徑和文件名後綴，判斷是否符合配置中指定的條件
2. 若是未在qcms建立，調用qcms接口，在qcms建立文件，並返回新建文件的pid
3. 已提交git，已在qcms建立，調用OBQ接口，發佈到測試或上線
4. 已提交git，調用OBQ接口，查看當前文件操做信息
5. 調用驗證接口，進行代碼驗證
6. 跳轉到OBQ平臺，查看當前模板對應的query
7. 跳轉到OBQ平臺，解鎖當前模板
8. 支持在SideBar中文件上右鍵彈出菜單上傳到測試或上線

核心功能的實現

1. QCMS建立頁面查看QCMSAPI

sublime.load_settins加載插件的配置文件，配置文件內容格式爲jsop,分User和default兩種，分別位於Packages/User/<setting-name>和Packages/<package-name>/<setting-name>中，前者覆蓋後者。

# 獲取配置信息

settings = sublime.load_settins("QcmsAux.sublime-settings")

settings.get('key')

# 獲取頁面內容

content = view.substr(sublime.Region(0, view.size()))

# 往接口post信息,urllib發送數據和header僞代碼

import urllib.parse
import urllib.request

url = 'http://localhost/login.php'
user_agent = 'Mozilla/4.0 (compatible; MSIE 5.5; Windows NT)'
values = {
    'act' : 'login',
    'login[email]' : xx@xx.com',
    'login[password]' : '123456'
}
headers = { 'User-Agent' : user_agent }

data = urllib.parse.urlencode(values)
req = urllib.request.Request(url, data, headers)
response = urllib.request.urlopen(req)
the_page = response.read()

print(the_page.decode("utf8"))

2.指定瀏覽器打開url

# MacOS
CHROME_PATH = 'open -a /Applications/Google\ Chrome.app %s'

# Windows
# chrome_path = 'C:\Program Files (x86)\Google\Chrome\Application\chrome.exe %s'
# 
# Windows
# chrome_path = 'C:\Program Files (x86)\Google\Chrome\Application\chrome.exe %s' 
url = "http://www.so.com"
webbrowser.get(CHROME_PATH).open(url,new=1)

耗時任務阻塞主線程

ST3已經提供了很是方便的異步執行耗時任務的方法set_timeout_async

快捷鍵

sublime大部分的配置均可以經過json文件來完成，鍵盤綁定也同樣。不過它的鍵盤綁定是區分系統的，因此基本上要創建3個文件，並且命名爲Default (Windows).sublime-keymap, Default (Linux).sublime-keymap 和 Default (OSX).sublime-keymap

菜單項

• Main.sublime-menu 控制了程序的主菜單
• Side Bar.sublime-menu 控制側邊欄文件或者目錄的右鍵菜單
• Context.sublime-menu 控制處於編輯狀態的文件右鍵菜單

經過console打印

print xxxx

彈出式的窗口

sublime.error_message("hello world")

幾個常見概念

Window:

打開的 sublime text 窗口

View

表示一個文本緩衝的視圖，能夠認爲是打開的一個 tab。

Edit

繼承自 sublime_plugin.TextCommand 的命令， Edit 爲第一個參數。 打開一個 view 之後必需要指定 Edit 才能真正的 insert 字符。須要 view.begin_edit 開始使用編輯區，使用完要 end_edit 。根據 sublime 3 API 的說法，只能繼承，不能被建立。

Region

表示緩衝區的一個區域。有兩個init類型的屬性a和b。Region.a表示區域開始的點，Region.b表示區域結束的點。

view 的 find_all 等能夠匹配一系列的 region 出來

Selection(RegionSet)

表示選擇的區域。函數sublime.View.sel()返回的類型就是Selection，表示目前選中的全部區域。Selection.add(Region)方法能夠添加選擇區域。

Point概念

int類型，表明緩衝區的一個位置。能夠經過sublime.View.rowcol(point)將point轉化爲行列信息(int,int)。或經過sublime.View.text_point(row,col)將行列信息轉化爲point。

• Point 是跟文本開頭位置的偏移量
• 得到當前光標位置的 point: view.sel()[0].a
• 一個 region 的屬性 a b 爲起始的倆個 point

line:

這裏看到 line 返回的是鼠標所在行的起始字符數，從文件頭開始，算 UTF8 字符，一箇中文也是一個字符，不管光標在何處，都是這樣的結構(行開始字符數, 行結束字符)

mark = self.view.sel()[0]
line = self.view.line(mark.a)
sublime.status_message("hickdebug "  + time.strftime("%Y-%m-%d %X - ") + str(line))

內置命令

expand_selection

用內置的expand_selection命令，to參數設置爲brackets 每一個css規則區域內容就能夠選中了

self.view.run_command("expand_selection", {"to": "brackets"})

python中執行shell命令的四種方式

1. os.system()

這個方法得不到shell命令的輸出

import os
os.system('ls')
# 執行ls命令

1. popen()

這個方法能獲得命令執行後的結果是一個字符串，要自行處理才能獲得想要的信息

import os
str = os.popen("ls").read()
a = str.split('\n')
for b in a:
    print b

1. commands模塊

能夠很方便的取得命令的輸出（包括標準和錯誤輸出）和執行狀態位

commands.getstatusoutput(cmd) 返回(status,output)

import commands
a,b = commands.getstatusoutput('ls')
print a
# a是退出的狀態
# 0 
print b
# b是輸出結果
# 執行ls命令

commands.getoutput(cmd) 只返回輸出結果

import commands
b = commands.getoutput('ls')
# 執行ls命令

commands.getstatus(file) 待補充

1. subprocess模塊

使用subprocess模塊能夠建立新的進程，能夠與新建進程的輸入/輸出/錯誤管道連通，並能夠得到新建進程執行的返回狀態。使用subprocess模塊的目的是替代os.system(),os.popen(),commands*等舊的函數和模塊。

subprocess.call(command,shell=True)

import subprocess
subprocess.call('ls',shell=True)
# 執行ls命令

subprocess.Popen(command,shell=True)

import subprocess
subprocess.Popen('ls',shell=True)
# 執行ls命令

subprocess.Popen(command,stdout=subprocess.PIPE,shell=True)待補充

若是command不是一個可執行文件，shell=True是不可省略的。
shell=True表示在shell下執行command

經常使用語句功能

view.settings().get('syntax')

返回當前文件格式，常見的有

• [tpl,inc,html] : Packages/HTML/HTML.sublime-syntax
• css: Packages/CSS/CSS.sublime-syntax
• php: Packages/PHP/PHP.sublime-syntax
• js:Packages/JavaScript/JavaScript.sublime-syntax
• py:Packages/Python/Python.sublime-syntax

if int(sublime.version()) > 3000
    print("sublime3")

判斷sublime的版本信息

命令的拼寫

['node', '/Users/guopeipei/Library/Application Support/Sublime Text 3/Packages/JSLint/linter.js', '--bitwise', '--browser', '--es6', '--eval', '--for', '--fudge', '--node', '--this', '/Users/guopeipei/project/M_so_com/m_so/resource/js/result/scrollTab.js']

Running node /Users/guopeipei/Library/Application Support/Sublime Text 3/Packages/JSLint/linter.js --bitwise --browser --es6 --eval --for --fudge --node --this /Users/guopeipei/project/M_so_com/m_so/resource/js/result/scrollTab.js

sublime.View類重要方法

sublime.View.find_by_class(point, forward, classes, <separators>)

經過Class查找,sublime提供的Class

• sublime.CLASS_WORD_START
• sublime.CLASS_WORD_END
• sublime.CLASS_PUNCTUATION_START
• sublime.CLASS_PUNCTUATION_END
• sublime.CLASS_SUB_WORD_START
• sublime.CLASS_SUB_WORD_END
• sublime.CLASS_LINE_START
• sublime.CLASS_LINE_END
• sublime.CLASS_EMPTY_LINE

sublime.View.find_by_selector(selector)

根據語法選擇器查找 ，selector是一個字符串。Scope Naming

sublime.py文件位置

/Applications/Sublime Text.app/Contents/MacOS/sublime.py

參考

1. sublime插件開發從0到1
2. 爲sublime text 3開發插件
3. Sublime Text非官方文檔
4. 非官方文檔的翻譯整理
5. Sublime Text 3.0 API文檔
6. Sublime Text 3.0 API 中文版