1.首先是Vue组件的代码块配置 这里使用的是Vue2.x

ctrl+shift+p -> 输入snippet -> 首选项：配置用户代码片段 -> 输入vue -> 选择vue.json(vue)、

按照以下代码块进行配置后，即可得到一个简单的vue模板代码块。 

{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Print to console": {
		"prefix": "dvue",
		"body": [
			"<template>",
			"<div></div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  // 组件名称",
			"  name: '请输入组件名称',",
			"  // 组件参数 接收来自父组件的数据",
			"  props: {},",
			"  // 局部注册的组件",
			"  components: {},",
			"  // 组件状态值",
			"  data () {",
			"   return {}",
			"  },",
			"  // 计算属性",
			"  computed: {},",
			"  // 侦听器",
			"  watch: {},",
			"  // 组件方法",
			"  methods: {},",
			"  created () {",
			"  },",
			"  mounted () {",
			"  },",
			"}",
			"</script> ",
			"", 
			"<style scoped>",
			"",
			"</style>",
			"$2"
		],
		"description": "Log output to console"
	}
}

2.团队开发时希望告知组件的编写者，方便团队沟通和维护。

类似于这种头部注释，我不想每次都自己写，所以发现Vscode有插件可以帮助我们自动完成。

插件名 ： koro1FileHeader 

安装和快速上手 · OBKoro1/koro1FileHeader Wiki · GitHub

以下文件是我的Vscode的settings.json

{
    "editor.minimap.enabled": false,
    "oneDarkPro.italic": false,
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    "editor.quickSuggestions": {
        "strings": true
    },
    // 将less文件转换为wxss
    "less.compile": {
        "outExt": ".wxss"
    },
    "workbench.startupEditor": "newUntitledFile",
    "git.enableSmartCommit": true,
    "git.autofetch": true,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "terminal.integrated.shellArgs.windows": [],
    "workbench.iconTheme": "vscode-icons",
    "editor.fontLigatures": null,
    /*  prettier的配置 */
    "prettier.semi": true, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.disableLanguages": [
        "vue"
    ], // 不格式化vue文件，vue文件的格式化单独设置
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
    "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "prettier.tslintIntegration": false,
    "terminal.integrated.allowMnemonics": true,
    "terminal.integrated.automationShell.linux": "",
    "workbench.editor.enablePreview": false,
    "vsicons.dontShowNewVersionMessage": true,
    "files.autoSave": "afterDelay",
    "workbench.editor.untitled.hint": "hidden",
    "security.workspace.trust.untrustedFiles": "open",
    "git.ignoreMissingGitWarning": true,
    "window.zoomLevel": -2,
    "launch": {
        "configurations": [],
        "compounds": []
    }, // 不让prettier使用tslint的代码格式进行校验
    ///报错的话，检查一下有没有用逗号与上一项设置分隔
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_line_length": 900, // 数值越大，一行放的属性越多
            "wrap_attributes": "auto",
            "end_with_newline": false
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "liveServer.settings.port": 0,
    // 从这行开始 是头部注释配置 上方是其他配置 如果你不需要可以删除
    "fileheader.customMade": {
        // 头部注释默认字段
        "Author": "WenBin",
        "Date": "Do not edit", // 设置后默认设置文件生成时间
        "LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间
        "LastEditors": "your name", // 设置后，保存文件更改默认更新最后编辑人
        "Description": "",
        "FilePath": "Do not edit", // 设置后，默认生成文件相对于项目的路径
        "custom_string_obkoro1": "@ascription 3xData"
    },
    // 函数注释
    "fileheader.cursorMode": {
        // 默认字段
        "description": "",
        "param": "",
        "return": ""
    },
    // 插件配置项
    "fileheader.configObj": {
        "autoAdd": true, // 检测文件没有头部注释，自动添加文件头部注释
        "autoAddLine": 300, // 文件超过多少行数 不再自动添加头部注释
        "autoAlready": true, // 只添加插件支持的语言以及用户通过`language`选项自定义的注释
        "supportAutoLanguage": [], // 设置之后，在数组内的文件才支持自动添加
        // 自动添加头部注释黑名单
        "prohibitAutoAdd": [
            "json"
        ],
        "prohibitItemAutoAdd": [
            "项目的全称禁止项目自动添加头部注释, 使用快捷键自行添加"
        ],
        "folderBlacklist": [
            "node_modules"
        ], // 文件夹或文件名禁止自动添加头部注释
        "wideSame": false, // 头部注释等宽设置
        "wideNum": 13, // 头部注释字段长度 默认为13
        "functionWideNum": 0, // 函数注释等宽设置 设为0 即为关闭
        // 头部注释第几行插入
        "headInsertLine": {
            "php": 2 // php文件 插入到第二行
        },
        "beforeAnnotation": {}, // 头部注释之前插入内容
        "afterAnnotation": {}, // 头部注释之后插入内容
        "specialOptions": {}, // 特殊字段自定义
        "switch": {
            "newlineAddAnnotation": true // 默认遇到换行符(\r\n \n \r)添加注释符号
        },
        "moveCursor": true, // 自动移动光标到Description所在行
        "dateFormat": "YYYY-MM-DD HH:mm:ss",
        "atSymbol": [
            "@",
            "@"
        ], // 更改所有文件的自定义注释中的@符号
        "atSymbolObj": {}, //  更改单独语言/文件的@
        "colon": [
            ": ",
            ": "
        ], // 更改所有文件的注释冒号
        "colonObj": {}, //  更改单独语言/文件的冒号
        "filePathColon": "路径分隔符替换", // 默认值： mac: / window是: \
        "showErrorMessage": false, // 是否显示插件错误通知 用于debugger
        "writeLog": false, // 错误日志生成
        "CheckFileChange": false, // 单个文件保存时进行diff检查
        "createHeader": true, // 新建文件自动添加头部注释
        "useWorker": false, // 是否使用工作区设置
        "designAddHead": false, // 添加注释图案时添加头部注释
        "headDesignName": "random", // 图案注释使用哪个图案 
        "headDesign": false, // 是否使用图案注释替换头部注释
        // 自定义配置是否在函数内生成注释 不同文件类型和语言类型
        "cursorModeInternalAll": {}, // 默认为false 在函数外生成函数注释
        "openFunctionParamsCheck": true, // 开启关闭自动提取添加函数参数
        "functionParamsShape": [
            "{",
            "}"
        ], // 函数参数外形自定义 
        // "functionParamsShape": "no type" 函数参数不需要类型
        "functionBlankSpaceAll": {}, // 函数注释空格缩进 默认为空对象 默认值为0 不缩进
        "functionTypeSymbol": "*", // 参数没有类型时的默认值
        "typeParamOrder": "type param", // 参数类型 和 参数的位置自定义
        // 自定义语言注释，自定义取消 head、end 部分
        // 不设置自定义配置language无效 默认都有head、end
        "customHasHeadEnd": {}, // "cancel head and function" | "cancel head" | "cancel function" 
        "throttleTime": 60000, // 对同一个文件 需要过1分钟再次修改文件并保存才会更新注释
        // 自定义语言注释符号，覆盖插件的注释格式
        "language": {
            // js后缀文件
            "js": {
                "head": "/$$",
                "middle": " $ @",
                "end": " $/",
                // 函数自定义注释符号：如果有此配置 会默认使用
                "functionSymbol": {
                    "head": "/******* ", // 统一增加几个*号
                    "middle": " * @",
                    "end": " */"
                },
                "functionParams": "typescript" // 函数注释使用ts语言的解析逻辑
            },
            // 一次匹配多种文件后缀文件 不用重复设置
            "h/hpp/cpp": {
                "head": "/*** ", // 统一增加几个*号
                "middle": " * @",
                "end": " */"
            },
            // 针对有特殊要求的文件如：test.blade.php
            "blade.php": {
                "head": "<!--",
                "middle": " * @",
                "end": "-->",
            }
        },
        // 默认注释  没有匹配到注释符号的时候使用。
        "annotationStr": {
            "head": "/*",
            "middle": " * @",
            "end": " */",
            "use": false
        },
    }
}

这样配置完成后 ，重启Vscode，创建一个新文件之后就会自动头部注释啦，当然这个插件还有其他功能，可以自己挖掘。