網頁

2013年4月4日 星期四

Sublime Text 2 - Find Function Definition 移到方法定義

會寫這篇的起因是這樣的,

image

Eclipse 並不是我的開發工具,所以我不清楚,不過對比到我主要的開發工具「Visual Studio」上面的功能,例如在 C# 程式中,在程式中對使用的方法或是變數按下 F12 或 Shift + F12 就可以移到定義或是找出哪些程式有使用變數或方法,VS2010 只能對 C# 或是其他 Server 端語言才能使用這樣的功能(或是安裝第三方工具後也會有這樣ˇ功能),而到了 VS2012 除了 Server 端語言有這樣的功能外,也開始支援在 Javascript 程式裡有這樣尋找定義的功能,在 Sublime Text 2 也是有類似的 Package「Find Function Definition」。

 


Sublime-Find-Function-Definition

https://github.com/timdouglas/sublime-find-function-definition

image

這個 package 的功能相當單純,就是可以讓我們在開啟的文件中去找出某個方法的定義,這個在編輯 Javascript 程式的時候會相當有幫助,尤其是某一個功能在多個檔案都有使用的時候,在開啟的文件裡只要在使用的方法上按下「F8」就馬上開啟方法定義的檔案並顯示方法。

 

安裝

在 Sublime Text 2 裡安裝這個 package 的時候要注意一下,在輸入 package 名稱去尋找的時候可能會找不到,因為作者似乎把 package 的名稱給 key 錯了,所以我們輸入 definition 的時候會找不到,而必須要輸入 definiton,不過這不會影響安裝與使用,

image

image

有關在 Sublime Text 2 安裝 package 還不會的朋友(這應該是少數),可以先看「Sublime Text 2 - 好用的前端程式編輯器 Part.3 安裝Package Control」這一篇文章。

 

使用

安裝完之後就是使用,使用的方式相當簡單,先開啟一分內有 Javascript 程式檔案,

SNAGHTML4216c8d

然後游標移到程式裡使用方法的地方,然後按下「F8」

image

按下「F8」之後就會將方法定義的位置給移到編輯區的最上方,

image

上面使用 Page_Init 以及定義的內容都是在同一個檔案內,如果說方法定義是在別的檔案,而我並沒有開啟那個檔案的話,這個 Find Function Definition 是否有作用呢?

我們在檔案裡找一個使用方法的地方,例如說下圖的 JSLINQ 方法,游標移到上面然後按下「F8」,

image

按下「F8」之後就會自動開啟 JSLINQ 其定義的檔案並移到該方法定義的位置顯示,

image

 

注意

這個功能只限於建立 Project 或是以 Open Folder 才可以使用,開啟單一檔案則是無法使用這個功能,

image

如果是開啟單一檔案的方式,按下「F8」就會出現錯誤訊息,即使 function 的定義在同一個檔案內,這樣也不行,

SNAGHTML439455e

 

最後

我只有找到這個可以尋找並快速移到方法定義的 Package,至於尋找並移到變數的功能與相關 package 就沒有找到,不過倒是可以使用「Sublime Text 2 - 快速開啟符合搜尋關鍵字的檔案」裡面有提到的方法,安裝「SideBarEnhancements」這個 Package 然後使用「Find Advanced」來做尋找,缺點就是會找出一堆有使用查詢關鍵字的內容,而無法找出定義的位置。

 

以上

2 則留言: