vscode如何进行代码注释定制（koroFileHeader）

在团队中进行开发时，统一注释格式很重要。以下是记录如何在VScode中使用koroFileHeader来统一注释格式

安装

在插件中查询插件koroFileHeader，安装

image.png

配置

快捷键shift+ctrl+p，打开快捷搜索配置，输入setting，选择Open User Settings

image.png

在settings中搜索Fileheader.cursorMode，点击编辑json

image.png

编辑如下：

{
    "window.zoomLevel": 0,
    "terminal.integrated.rendererType": "dom",
    "editor.formatOnSave": true,
    "eslint.lintTask.enable": true,
    "vetur.validation.template": false,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
    "fileheader.customMade": { // 头部注释
        "Author": "huangl",
        "Date": "Do not edit",
        "LastEditors": "huangl",
        "LastEditTime": "Do not edit",
        "Description": "file content",
        "FilePath": "Do not edit" // 增加此项配置即可
    },
    "fileheader.cursorMode": { // 头部注释
        "description": "",
        "param": "params",
        "return": ""
    },
    "fileheader.configObj": {
        "autoAdd": true, // 默认开启自动添加头部注释，当文件没有设置头部注释时保存会自动添加
        "autoAlready": true, // 默认开启
        "prohibitAutoAdd": [
            "json",
            "md"
        ], // 禁止.json .md文件，自动添加头部注释
        "wideSame": false, // 设置为true开启
        "wideNum": 13 // 字段长度 默认为13
    }
}

增加的配置是：

    "fileheader.customMade": { // 头部注释
        "Author": "huangl",
        "Date": "Do not edit",
        "LastEditors": "huangl",
        "LastEditTime": "Do not edit",
        "Description": "file content",
        "FilePath": "Do not edit" // 增加此项配置即可
    },
    "fileheader.cursorMode": { // 函数注释
        "description": "",
        "param": "params",
        "return": ""
    },
    "fileheader.configObj": {
        "autoAdd": true, // 默认开启自动添加头部注释，当文件没有设置头部注释时保存会自动添加
        "autoAlready": true, // 默认开启
        "prohibitAutoAdd": [
            "json",
            "md"
        ], // 禁止.json .md文件，自动添加头部注释
        "wideSame": false, // 设置为true开启
        "wideNum": 13 // 字段长度 默认为13
    }

使用

在文件头部注释

1、 主动添加
在文件头行点击插入光标，快捷键ctrl+alt+i

/*
 * @Author: huangl
 * @Date: 2020-01-08 14:39:02
 * @LastEditors: huangl
 * @LastEditTime: 2020-01-10 10:05:24
 * @Description: file content
 * @FilePath: \vue_ts_demo\src\mixins\test.ts
 */
import { Vue, Component } from "vue-property-decorator";
@Component
export default class test extends Vue {
  test(str: string) {
    console.log(str);
    console.log(122222);
  }
}

2、 自动添加

在文件没有添加头部注释时，修改文件，保存时会自动添加，因为设置了配置

 "fileheader.configObj": {
        "autoAdd": true, // 默认开启自动添加头部注释，当文件没有设置头部注释时保存会自动添加
  }

在函数头设置

函数没有自动添加，在函数上一行点击插入光标，快捷键ctrl+alt+t

/*
 * @Author: huangl
 * @Date: 2020-01-08 14:39:02
 * @LastEditors: huangl
 * @LastEditTime: 2020-01-10 10:05:24
 * @Description: file content
 * @FilePath: \vue_ts_demo\src\mixins\test.ts
 */
import { Vue, Component } from "vue-property-decorator";

@Component
export default class test extends Vue {
  /**
   * @description: 
   * @param {type} params
   * @return: 
   */
  test(str: string) {
    console.log(str);
    console.log(122222);
  }
}

注意点

团队使用时，需要所有人都在vscode上配置一样的格式，自己的名字，这样才会有效使用。

配方妙处

1、从注释上可以看出是谁创建，谁修改
2、从注释上可以看出最后修改时间（保存时会自动更新）

详细配置：koroFileHeader