在團(tuán)隊(duì)中進(jìn)行開發(fā)時(shí)，統(tǒng)一注釋格式很重要。以下是記錄如何在VScode中使用koroFileHeader來統(tǒng)一注釋格式

安裝

在插件中查詢插件koroFileHeader，安裝

image.png

配置

快捷鍵shift+ctrl+p，打開快捷搜索配置，輸入setting，選擇Open User Settings

image.png

在settings中搜索Fileheader.cursorMode，點(diǎn)擊編輯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" // 增加此項(xiàng)配置即可
    },
    "fileheader.cursorMode": { // 頭部注釋
        "description": "",
        "param": "params",
        "return": ""
    },
    "fileheader.configObj": {
        "autoAdd": true, // 默認(rèn)開啟自動(dòng)添加頭部注釋，當(dāng)文件沒有設(shè)置頭部注釋時(shí)保存會(huì)自動(dòng)添加
        "autoAlready": true, // 默認(rèn)開啟
        "prohibitAutoAdd": [
            "json",
            "md"
        ], // 禁止.json .md文件，自動(dòng)添加頭部注釋
        "wideSame": false, // 設(shè)置為true開啟
        "wideNum": 13 // 字段長度 默認(rèn)為13
    }
}

增加的配置是：

    "fileheader.customMade": { // 頭部注釋
        "Author": "huangl",
        "Date": "Do not edit",
        "LastEditors": "huangl",
        "LastEditTime": "Do not edit",
        "Description": "file content",
        "FilePath": "Do not edit" // 增加此項(xiàng)配置即可
    },
    "fileheader.cursorMode": { // 函數(shù)注釋
        "description": "",
        "param": "params",
        "return": ""
    },
    "fileheader.configObj": {
        "autoAdd": true, // 默認(rèn)開啟自動(dòng)添加頭部注釋，當(dāng)文件沒有設(shè)置頭部注釋時(shí)保存會(huì)自動(dòng)添加
        "autoAlready": true, // 默認(rèn)開啟
        "prohibitAutoAdd": [
            "json",
            "md"
        ], // 禁止.json .md文件，自動(dòng)添加頭部注釋
        "wideSame": false, // 設(shè)置為true開啟
        "wideNum": 13 // 字段長度 默認(rèn)為13
    }

使用

在文件頭部注釋

1、 主動(dòng)添加
在文件頭行點(diǎn)擊插入光標(biāo)，快捷鍵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、 自動(dòng)添加

在文件沒有添加頭部注釋時(shí)，修改文件，保存時(shí)會(huì)自動(dòng)添加，因?yàn)樵O(shè)置了配置

 "fileheader.configObj": {
        "autoAdd": true, // 默認(rèn)開啟自動(dòng)添加頭部注釋，當(dāng)文件沒有設(shè)置頭部注釋時(shí)保存會(huì)自動(dòng)添加
  }

在函數(shù)頭設(shè)置

函數(shù)沒有自動(dòng)添加，在函數(shù)上一行點(diǎn)擊插入光標(biāo)，快捷鍵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);
  }
}

注意點(diǎn)

團(tuán)隊(duì)使用時(shí)，需要所有人都在vscode上配置一樣的格式，自己的名字，這樣才會(huì)有效使用。

配方妙處

1、從注釋上可以看出是誰創(chuàng)建，誰修改
2、從注釋上可以看出最后修改時(shí)間（保存時(shí)會(huì)自動(dòng)更新）

詳細(xì)配置：koroFileHeader