VSCode中怎么快速进行头部注释?下面本篇文章给大家分享一个好用的VSCode头部注释插件:Fileheader Pro,开箱即用又能完全自定义的Fileheader插件您会喜欢么? 总之,非常好用就对了。 添加头部注释的事情就交给它吧!

分享一个好用的VSCode头部注释插件:Fileheader Pro-LMLPHP

【推荐学习:《vscode入门教程》】

有时候需要在代码头部添加像这样的一段注释。这段注释包括了作者、代码版权许可等信息。每次重复添加都会让您觉得非常麻烦。作为开发者的您,时间是自然非常。那么这个插件,就是为这个场景而生,替你无感地默默做完这件事。如果您想要在代码头部添加一些类似这样的ASCII Art。它也能满足您的需求。

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

 * @author        IronLu233 <[email protected]>
 * @date          2022-06-12 22:33:53
 */
登录后复制

安装与使用

如何获得它

让它默默添加头部注释

安装后,默认的模板将能复合大部分的使用场景。

当你新建一个文件后,将会自动地为你添加Fileheader。因此大部分情况下您不需要下文中的手动添加

分享一个好用的VSCode头部注释插件:Fileheader Pro-LMLPHP

如您需要手动添加到已有代码,打开一个文件后,在您的命令面板里【您可以使用Ctrl(Mac下是Command) + Shift + P】,输入Fileheader Pro: Add Fileheader并按下回车,就能见到文件注释恰如其分地加入到了您巧夺天工的代码头部。

分享一个好用的VSCode头部注释插件:Fileheader Pro-LMLPHP

保存时,您的文件头部注释需要更新时,Fileheader Pro将会自动为您更新。

分享一个好用的VSCode头部注释插件:Fileheader Pro-LMLPHP

自定义模板

尽管自带的模板能满足大部分场景。但自定义模板的强大与整活能力,也值得为它去专门配置。

分享一个好用的VSCode头部注释插件:Fileheader Pro-LMLPHP

首先我们需要创建一个模板。在您VSCode的命令面板中,执行这样的命令: Fileheader Pro: Generate Custom Fileheader Template;

分享一个好用的VSCode头部注释插件:Fileheader Pro-LMLPHP

此时在项目的根目录下的.vscode/fileheader.template.js。请修改类CustomLanguageProvider。特别是它的getTemplate方法。它的返回值,就决定了您的文件头部注释最后的模样。另外,languages将会决定,在那些语言的文件中它可以被使用。

分享一个好用的VSCode头部注释插件:Fileheader Pro-LMLPHP

可以使用variable中的各个字段,对其进行加工处理,放入模板之中。variables的字段有下列这些

birthtime文件被创建的时间,如果它被版本控制系统所追踪那么会从版本控制系统中获取创建时间,否则将使用文件在磁盘中创建的时间
mtime文件被修改时间。获取逻辑同birthime不建议使用mtime。因为当一个文件被多个人修改时,他们关于mtime的注释,会在代码合并时造成冲突!
authorName作者名字,会从版本控制工具历史中寻找,如果这个文件是新的,那么它将会使用userName
authorEmail作者的电子邮箱,回退机制同authorName
userName用户的名字。对于git来说,会通过git config user.name获取
userEmail用户的电子邮箱,对于git会通过git config user.email获取
companyName公司名称。没有公司的可以去工商局登记成立
projectName当前项目的名称,也就是就是VSCode所打开的文件夹的名称
filePath当前文件的路径
dirPath当前文件的目录路径
fileName当前文件的文件名

Fileheader Pro源代码本身就使用了自定义模板添加头部注释。

所以它也是一个例子:

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

配置项

FileheaderPro.disableFileds

对于默认的模板,其中的各个字段都可以通过它来禁用。禁用的字段将不会出现在注释之中。您可以在VSCode的设置界面中,对其进行修改

FileheaderPro.companyName

您需要在设置中,告诉插件公司的名字,因为无法从任何其它地方得到它!

FileheaderPro.currentUserName和FileheaderPro.currentUserEmail

这两个字段可以直接覆盖掉模板中的userNameuserEmail变量,也会间接影响authorNameauthorEmail(当文件并未被版本控制工具追踪的时候)

FileheaderPro.dateFormat

注释中的日期的格式。请参考:https://momentjs.com/docs/#/displaying/format

FileheaderPro.autoInsertOnCreateFile

是否启用创建文件时,自动添加文件头部注释。默认它是开启的

FileheaderPro.autoUpdateOnSave

是否保存时更新fileheader。默认启用。

Q & A

它是怎么实现的?

使用了ES6的tagged template

没有我支持的语言

目前支持这些语言

  • Javascript
  • Typescript
  • Python
  • HTML
  • CSS
  • Vue
  • Java请使用自定义模板,或者发起一个issue。当然,也欢迎提PR来为Fileheader Pro添砖加瓦

更多关于VSCode的相关知识,请访问:vscode教程

以上就是分享一个好用的VSCode头部注释插件:Fileheader Pro的详细内容,更多请关注Work网其它相关文章!

08-29 14:40