组件注释规范

手里的项目越来越多，写的代码也越来越多，时间长了不看的代码自己都快忘了这个组件是用来干嘛的了。再加上接手其他的项目，一点注释都没有，脑壳痛的。所以决定以后自己写的组件，都要加上一段解释说明的注释。

微信小程序中，我习惯写在wxml文件上，vue的话就更不用说了，就一个文件。注释大概长这样：

<!-- 
  @FileDescription:组件说明,
  @params:{参数：类型解释},
  @Date:文件创建时间,
  @LastEditTime:最后修改时间,
  @Author:作者,
 -->
 <view></view>

效果： 具体的参数，除非公司有规定，不然我认为看自己的需求来就可以。

看到这有的同学可能会想了，每次创建组件都得写这一堆，哪怕在CV大法的加持下也麻烦呀，拒绝！！！ 这话怎么说着呢，那我怎么可能让我亲爱的小伙伴们这么麻烦呢？我就不是那样的人！

话不多说，开始操作！

自定义代码片段

以下说明，使用微信小程序开发工具作为实例，不过不要担心，在vscode操作相同。

效果：

操作：

文件——>首选项——>用户代码片段

你可以选择创建全局代码片段，或者本项目的代码片段

输入你要创建的文件名！！！ 微信开发工具中初次打开文件大概是这样的：

巴拉巴拉一大堆英文，不用管他，你就信我的就完事了。

将下面这段代码复制进去

  "notes":{
    "scope": "",
    "prefix": "@note",
    "body": [
      "<!-- "
      "  @FileDescription:$1,"
      "  @params:{$2},
      "  @Date:$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND,"
      "  @Author:ming,"
      " -->"
      "$3"
     ],
     "description": "组件注释说明"
  },

ctrl+s保存，然后就可以使用了。怎么样，是不是so~easy 。

补充

有的小伙伴除了想写注释，还想自定义自己的代码块，那要怎么操作呢？OK，don't worry！接下来时间不赶的小伙伴就可以慢慢看了。

• scope：使用的语言范围，像小程序的wxml，我也不知道是什么语言，那就不写，所有文件都可以生效。
• predix：提示字母，比如我想在输入log的时候，可以打印出console.log(),那这个就设置成log。
• body ：你想自定义的代码块内容，比如console.log().
• description：代码块的描述，这块代码是用来做什么的，这个你开心就好。
• $1 $2 :$1就是代码块出现时，光标的定位，方便你直接操作。$2就是$1操作完成之后，按下tab 键，自动跳转的位置，如果位置比较多，你可以继续$3 $4...
• 注：
  • 代码块中，每一行的内容，都要使用""单独包括起来，内容距离前面"的长度，就是打印出来代码块每行的缩进长度。
  • 在时间中我使用了很多的常量，比如CURRENT_YEAR，是表示哪一年的，这个不需要你自己去编写逻辑，具体的讲解可以看后面的链接，我也没有特别明白，哈哈哈。

参考文档

• 如何在vscode中使用代码片段功能
• vue项目代码注释规范

最后

人要往远看。过了山，眼界就开阔了。