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>

 vue3:

<!--  -->
<template>

</template>

<script>
import {
ref,
reactive,
toRefs,
computed,
readonly,
watchEffect,
watch,
onMounted,
onBeforeUnmount,
onUpdated,
onUnmounted,
onRenderTracked,
onRenderTriggered,
} from 'vue';
export default {
props: {},
emits: [],
setup(props, { attrs, slots, emit }) {

return {};
},
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

</style>

 

结束：小明是一名前端小白，第一次写博客，也是希望能记录自己的学习过程，和分享一些问题的解决方法，写得不对的地方欢迎大佬们批评指出。让我们一起进步。

 

参考资料：Snippets in Visual Studio Code （官网有详细的使用描述）