VSCode添加用户代码片段,自定义用户代码片段

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在使用VScode开发中经常会有一些重复使用的代码块，复制粘贴也很麻烦，这时可以在VScode中添加用户代码片段，输入简写即可快捷输入。

VScode中添加用户自定义代码片段很简单。

1.在VScode主界面->点击左下角设置图标->点击用户代码片段

2.在弹出的窗口中选择->新建全局代码片段文件（也可选择项目内的代码片段，使用范围不一样而已）

3.输入文件名-回车 (文件名可自定义)

4.这时就会生成并打开对应的配置文件，注释着相关描述和一个示例

参数描述：

scope：此代码段使用的语言名称列表，例如 "typescript,javascript"（非必填）。

prefix：选择代码片段时要使用的前缀。

body：代码片段内容

description：代码片段描述。

接下来我们就可以在这个大括号里添加我们需要的代码片段了

5.比如我插入一段js注释代码片段然后保存。

{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. 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": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Print to jsNoteTitle": {
"scope": "",
"prefix": "jsNoteTitle",
"body": [
"/****************",
" *@description:",
" *@author: 小明同学",
" *@date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
" *@version: V1.0.0",
"*************************************************************************/"
],
"description": "对应开始标题注释"
},
}

6.在编辑代码时只要输入js就会提示出对应的代码片段，然后回车或者tab就好了~非常的方便哈哈哈~

vue常用模板代码片段

<template>
<div class=''></div>
</template><script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {};
},
//监听属性类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类</style>