【项目经验】Vscode添加vue前端注释模板

【背景】

   最近小编在工作中接手的新项目前端部分,也需要给原来的代码补注释,为了能够更加高效的写注释,所以在Vscode里配置了模板。个人感觉使用感觉不错,所以将过程记录下来分享给大家。(并非权威,如有错漏,欢迎指正!不胜感激!

【内容】

注:本注释模板是用于在Vscode里配置的,模板更多的适用于Vue开发的前端代码加注释,还不曾在其他前端代码中实验过,对于其他代码是否适用并不清楚,欢迎大家实验并将结果在评论分享,可以一起交流交流。

一、公共部分配置

1、调出Vscode配置面板,快捷键Ctrl+Shift+P。如果未出现则在输入框里输入“snippets”。

在这里插入图片描述

2、选择“首选项:配置用户代码片段”进入注释模板配置面板

在这里插入图片描述

二、具体某个模块代码注释模板配置

1、Vue文件头注释配置:选择vue.json,对vue文件头注释模板进行配置。

在这里插入图片描述
在这里插入图片描述

(1)Vue文件头注释
"Print to vueTitle": {
		"prefix": "vueTitle",
		"body": [
		  "<!-- ",
		  " * @description: ",
		  " * @fileName: ${TM_FILENAME} ",
		  " * @author: 自己的名字 ",
		  " * @date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
		  " * @version: V1.0.0 ",
		  "!-->"
		],
		"description": "在vue文件开头配置注释"
	  }
(2)用法:

在vue文件头部输入vue选择
在这里插入图片描述

vueTitle效果:

在这里插入图片描述

2、Vue项目HTML模块注释配置:前面按照公共配置操作,选择vue.json,对vue文件头注释模板进行配置。

在这里插入图片描述
在这里插入图片描述

(1)vue-html注释模板:
	"Print to htmlStart":{
		"prefix": "htmlStart",
		"body": [
		  "<!-- $0start @author: 自己的名字 !-->"
		],
		"description": " Start在html区块开始时使用"
	  },
	  "Print to htmlItem":{
		"prefix": "htmlEnd",
		"body": [
		  "<!-- $0end @author: 自己的名字 !-->"
		],
		"description": " End在html区块开始时使用"
	  }
(2)用法:

在template标签内输入html出现下图的提示,根据具体情况进行选择。

注意:

  • Start在html区块开始时使用
  • End在html区块结束时使用

在这里插入图片描述

htmlStart效果:

在这里插入图片描述

htmlEnd效果:

在这里插入图片描述

3、Vue项目HTML模块注释配置:前面按照公共配置操作,选择“javaScript.json”,对JavaScript的注释模板进行配置。

在这里插入图片描述
在这里插入图片描述

(1)JavaScript注释模板:
"Print to jsNoteTitle": {
    "prefix": "jsNoteTitle",
    "body": [
      "/*",
      " * @description:",
      " * @author: 自己的名字 ",
      " * @date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
      " * @version: V1.0.0",
      "*/"
    ],
    "description": " jsNoteTitle对应开始标题注释"
  },
  "Print to jsfn": {
    "prefix": "jsfn",
    "body": [
      "/**",
      " *@functionName: ${TM_CURRENT_LINE}",
      " *@params1: ${1:参数1}",
      " *@params2: ${2:参数2}",
      " *@description:",
      " *@author: 自己的名字 ",
      " *@date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
      " *@version: V1.0.0",
      "*/"
    ],
    "description": " Jsfn对应方法注释"
  },
  "Print to jsModify": {
    "prefix": "jsModify",
    "body": [
      "/**",
      " *@description:",
      " *@modifyContent:",
      " *@author: 自己的名字",
      " *@date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
      "*/"
    ],
    "description": "JsModify对应方法修改注释"
  },
  "Print to jsVariable": {
    "prefix": "jsVariable",
    "body": [
      "//${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND} 自己的名字 ${1:变量1} : ",
    ],
    "description": " JsVariable 对应变量注释"
  },
(2)用法

在script标签内输入js出现如下图提示

注意:

  • jsNoteTitle:开始标题注释
  • Jsfn:方法注释
  • JsModify:方法修改注释
  • JsVariable :变量注释

在这里插入图片描述

jsNoteTitle效果:

在这里插入图片描述

jsfn效果:

在这里插入图片描述

jsModify效果:

在这里插入图片描述

JSVariable效果:

在这里插入图片描述

4、Vue项目HTML模块注释配置:前面按照公共配置操作,CSS代码注释模板配置:

在这里插入图片描述
在这里插入图片描述

(1)CSS注释模板:
	"Print to cssTitle": {
		"prefix": "cssNoteTitle",
		"body": [
		  "/*",
		  " * @description: ",
		  " * @author: 自己的名字 ",
		  " * @date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
		  " * @version V1.0.0 ",
		  "*/"
		],
		"description": " Title对应css注释标题"
	  },
	  "Print to cssItem":{
		"prefix": "cssNoteItem",
		"body": [
		  "/*",
		  " * @description: ",
		  " * @author: 自己的名字 ",
		  " * @date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND} ",
		  "*/"
		],
		"description": "Item对应css类注释"
	  }
(2)用法:

在标签中间,输入css会出现下面的选项

  • cssNoteTitle:css注释标题
  • cssNoteItem:css类注释

注意:使用sass或less等css语言需重新设置less.json和sass.json

在这里插入图片描述

cssNoteTitle效果:

在这里插入图片描述

cssNoteItem效果:

在这里插入图片描述

附录:

参考博客:https://www.pianshen.com/article/3943158434/

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值