首頁  >  文章  >  開發工具  >  分享一個好用的VSCode頭部註解外掛:Fileheader Pro

分享一個好用的VSCode頭部註解外掛:Fileheader Pro

青灯夜游
青灯夜游轉載
2022-07-13 20:22:573487瀏覽

VSCode中怎麼快速進行頭部註解?以下這篇文章跟大家分享一個好用的VSCode頭部註解外掛:Fileheader Pro,開箱即用又能完全自訂的Fileheader外掛程式您會喜歡麼?總之,非常好用就對了。加上頭部註解的事情就交給它吧!

分享一個好用的VSCode頭部註解外掛:Fileheader Pro

【推薦學習:《vscode入門教學》】

有時候需要在程式碼頭部加上像這樣的一段註釋。這段註釋包括了作者、程式碼版權授權等資訊。每次重複添加都會讓您覺得非常麻煩。作為開發者的您,時間是自然非常。那麼這個插件,就是為這個場景而生,替你無感地默默做完這件事。如果您想要在程式碼頭部添加一些類似這樣的ASCII Art。它也能滿足您的需求。

/*
 * @Author: IronLu233
 * @Date: 2021-03-10 12:00:00
 * Copyright © 你的公司名字. All rights reserved.
 */
/*
#### ########   #######  ##    ## ##       ##     ##  #######   #######   #######  
 ##  ##     ## ##     ## ###   ## ##       ##     ## ##     ## ##     ## ##     ## 
 ##  ##     ## ##     ## ####  ## ##       ##     ##        ##        ##        ## 
 ##  ########  ##     ## ## ## ## ##       ##     ##  #######   #######   #######  
 ##  ##   ##   ##     ## ##  #### ##       ##     ## ##               ##        ## 
 ##  ##    ##  ##     ## ##   ### ##       ##     ## ##        ##     ## ##     ## 
#### ##     ##  #######  ##    ## ########  #######  #########  #######   #######  

 * @author        IronLu233 <lrironsora@gmail.com>
 * @date          2022-06-12 22:33:53
 */

這段程式碼來自這裡:

https://github.com/IronLu233/fileheader-pro/blob/main/src/Extension.ts

安裝與使用

如何獲得它

讓它默默添加頭部註解

檔案註解中的資訊來自於您的版本控制工具,目前插件也只支援Git,再未來它將支援SVN,Mercurial等其它版本控制工具。因此請您確保在有Git的專案中使用它。

安裝後,預設的模板將能複合大部分的使用場景。

當你新建一個檔案後,將會自動地為你新增Fileheader。因此大部分情況下您不需要下文中的手動添加

分享一個好用的VSCode頭部註解外掛:Fileheader Pro

如您需要手動添加到已有代碼,打開一個文件後,在您的命令面板裡【您可以使用Ctrl(Mac下是Command) Shift P】,輸入Fileheader Pro: Add Fileheader並按下回車,就能見到文件註釋恰如其分地加入到了您巧奪天工的程式碼頭部。

分享一個好用的VSCode頭部註解外掛:Fileheader Pro

儲存時,您的檔案頭部註解需要更新時,Fileheader Pro將會自動為您更新。

分享一個好用的VSCode頭部註解外掛:Fileheader Pro

自訂模板

儘管自帶的模板能滿足大部分場景。但自訂模板的強大與整活能力,也值得為它去專門配置。

分享一個好用的VSCode頭部註解外掛:Fileheader Pro

別忘了將你的範本提交到git上,並且讓與你一起開發的同學也安裝Fileheader Pro

首先我們需要建立一個模板。在您VSCode的指令面板中,執行這樣的指令: Fileheader Pro: Generate Custom Fileheader Template;

分享一個好用的VSCode頭部註解外掛:Fileheader Pro

此時在專案的根目錄下的.vscode/fileheader.template.js。 請修改類別CustomLanguageProvider。特別是它的getTemplate方法。它的回傳值,就決定了您的文件頭部註釋最後的模樣。另外,languages將會決定,在那些語言的文件中它可以被使用。

請務必將所有返回的字串使用tpl進行模板字串函數的調用,否則可能會出現一些奇怪的問題

分享一個好用的VSCode頭部註解外掛:Fileheader Pro

#可以使用variable中的各個字段,對其進行加工處理,放入模板中。 variables的字段有下列這些

##mtime文件被修改時間。取得邏輯同authorName作者名字,會從版本控制工具歷史中尋找,如果這個檔案是新的,那麼它將會使用authorEmail作者的電子郵件信箱,回退機制同 userName使用者的名字。對於git來說,會透過#userEmail使用者的電子郵件信箱,對於git會透過companyName公司名稱。沒有公司的可以去工商局登記成立projectName#目前專案的名稱,也就是VSCode所開啟的資料夾的名稱filePath目前檔案的路徑dirPath目前檔案的目錄路徑fileName目前檔案的檔案名稱
欄位 意義
#birthtime 檔案被建立的時間,如果它被版本控制系統所追蹤那麼會從版本控制系統中獲取創建時間,否則將使用文件在磁碟中創建的時間
birthime不建議使用mtime。因為當一個檔案被多個人修改時,他們關於mtime的註釋,會在程式碼合併時造成衝突!
userName
authorName
git config user.name取得
git config user.email取得
#Fileheader Pro原始程式碼本身就使用了自訂範本來新增頭部註解。

所以它也是一個例子:

fileheader-pro/fileheader.template.js at main · IronLu233/fileheader-pro (github.com)

#配置項目

FileheaderPro.disableFileds

對於預設的模板,其中的各個欄位都可以透過它來停用。禁用的欄位將不會出現在註解之中。 您可以在VSCode的設定介面中,對其進行修改

預設值是

['mtime']不建議啟用mtime。因為當一個檔案被多個人修改時,他們關於mtime的註釋,會在程式碼合併時造成衝突! 分享一個好用的VSCode頭部註解外掛:Fileheader Pro

FileheaderPro.companyName

#您需要在設定中,告訴插件公司的名字,因為無法從任何其它地方得到它!

FileheaderPro.currentUserName和FileheaderPro.currentUserEmail

這兩個欄位可以直接覆寫模板中的

userNameuserEmail變量,也會間接影響authorNameauthorEmail(當檔案並未被版本控制工具追蹤的時候)

FileheaderPro.dateFormat

註解中的日期的格式。請參考:https://momentjs.com/docs/#/displaying/format

FileheaderPro.autoInsertOnCreateFile##是否啟用建立檔案時,自動新增檔案頭部註釋。預設它是開啟的

FileheaderPro.autoUpdateOnSave

#是否儲存時更新fileheader。預設啟用。

Fileheader Pro內部只在需要的時候更新檔案頭部註解。

Q & A

它是怎麼實現的?

使用了ES6的

tagged template

我們可以知道哪一些是固定的字串,哪一些是使用者所使用的變數。接下來請參考這個抽象類別

fileheader-pro/FileheaderLanguageProvider.ts at main · IronLu233/fileheader-pro (github.com)

沒有我支援的語言

目前支援這些語言

Javascript
  • Typescript
  • Python
  • HTML
  • CSS
  • Vue
  • Java 請使用自訂模板,或發起一個
  • issue
  • 。當然,也歡迎提PR來為Fileheader Pro添磚加瓦
  • 更多關於VSCode的相關知識,請造訪:
vscode教學

以上是分享一個好用的VSCode頭部註解外掛:Fileheader Pro的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除