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，创建一个新文件之后就会自动头部注释啦，当然这个插件还有其他功能，可以自己挖掘。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
