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

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中文網其他相關文章!

陳述
本文轉載於:掘金社区。如有侵權,請聯絡admin@php.cn刪除
使用Visual Studio:跨平台開發軟件使用Visual Studio:跨平台開發軟件Apr 17, 2025 am 12:13 AM

使用VisualStudio進行跨平台開發是可行的,通過支持.NETCore和Xamarin等框架,開發者可以編寫一次代碼並在多個操作系統上運行。 1)創建.NETCore項目並使用其跨平台能力,2)使用Xamarin進行移動應用開發,3)利用異步編程和代碼重用來優化性能,確保應用的高效運行和可維護性。

vscode如何格式化jsonvscode如何格式化jsonApr 16, 2025 am 07:54 AM

在 VS Code 中格式化 JSON 的方法有:1. 使用快捷鍵 (Windows/Linux:Ctrl Shift I;macOS:Cmd Shift I);2. 通過菜單(“編輯” > “格式化文檔”);3. 安裝 JSON 格式化程序擴展(如 Prettier);4. 手動格式化(使用快捷鍵縮進/縮出塊或添加花括號和分號);5. 使用外部工具(如 JSONLint 和 JSON Formatter)。

vscode如何編譯vscode如何編譯Apr 16, 2025 am 07:51 AM

在 VSCode 中編譯代碼分 5 步:安裝 C 擴展;在項目文件夾中創建 "main.cpp" 文件;配置編譯器(如 MinGW);使用快捷鍵("Ctrl Shift B")或 "Build" 按鈕編譯代碼;使用快捷鍵("F5")或 "Run" 按鈕運行編譯後的程序。

vscode如何安裝vscode如何安裝Apr 16, 2025 am 07:48 AM

要安裝 Visual Studio Code,請按以下步驟操作:訪問官方網站 https://code.visualstudio.com/;根據操作系統下載安裝程序;運行安裝程序;接受許可協議並選擇安裝路徑;安裝完成後,VSCode 將自動啟動。

vscode如何放大字體vscode如何放大字體Apr 16, 2025 am 07:45 AM

在 Visual Studio Code 中放大字體的方法有:打開設置面板(Ctrl , 或 Cmd ,)。搜索並調整“Font Size”。選擇具有適合大小的“Font Family”。安裝或選擇提供合適大小的主題。使用鍵盤快捷鍵(Ctrl 或 Cmd )放大字體。

vscode如何連接遠程服務器vscode如何連接遠程服務器Apr 16, 2025 am 07:42 AM

如何通過 VSCode 連接遠程服務器?安裝 Remote - SSH 擴展配置 SSH在 VSCode 中創建連接輸入連接信息:主機、用戶名、端口、SSH 密鑰在 Remote Explorer 中雙擊已保存的連接

vscode如何運行vuevscode如何運行vueApr 16, 2025 am 07:39 AM

在 VSCode 中運行 Vue 項目需要以下步驟:1. 安裝 Vue CLI;2. 創建 Vue 項目;3. 切換到項目目錄;4. 安裝項目依賴;5. 運行開發服務器;6. 打開瀏覽器訪問 http://localhost:8080。

vscode如何比較兩個文件vscode如何比較兩個文件Apr 16, 2025 am 07:36 AM

VSCode 中比較文件的方法:1. 打開兩個文件,2. 啟用“差異”視圖(“視圖”菜單),3. 查看差異(新增綠色、刪除紅色、修改紫色),4. 使用箭頭鍵導航,5. 接受或拒絕更改。附加功能包括合併更改、複製更改、查看詳細信息和編輯差異。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具