VScode | 我的常用代码片段，提升开发速度

系列文章目录

本系列文章主要分享作位前端开发的工具之------VScode的使用分享。

VScode | 我的常用插件分享_vscode 别名跳转-CSDN博客

VScode | 我会设置文件夹右键用VScode打开_vscode右键打开文件夹-CSDN博客

文章目录

目录

系列文章目录

文章目录

前言

版本

具体例子

一、vue2模版初始化

二、vue3模版初始化

三、请求接口的模版

四、快速log的模版

五、快速写函数注释的模版

最后

---

前言

今日分享我的常用代码片段，提升开发速度。也用于记录一下，后续换电脑配置直接CV。

打开vscode，点击文件>首选项>配置代码片段。新建全局代码片段文件…

版本

我用的window10系统。

vscode版本：

版本: 1.91.1 (user setup)
提交: f1e16e1e6214d7c44d078b1f0607b2388f29d729
日期: 2024-07-09T22:06:49.809Z
Electron: 29.4.0
ElectronBuildId: 9728852
Chromium: 122.0.6261.156
Node.js: 20.9.0
V8: 12.2.281.27-electron.0
OS: Windows_NT x64 10.0.19045

具体例子

一、vue2模版初始化

{
"vue2-template": {
      "prefix": "vue2init",
      "body": [
        "<template>",
        "  <div class=\"$1\">",
        "",
        "  </div>",
        "</template>",
        "",
        "<script>",
        "export default {",
        "  name: '$1',",
        "  data() { ",
        "    return {",
        "",
        "    }",
        "  }",
        " }",
        "</script>",
        "",
        "<style lang=\"scss\" scoped>",
        "  .$1{",
        "",
        "  }",
        "</style>"
      ],
      "description": "my vue2 template"
    }
}

二、vue3模版初始化

{
"vue3-template": {
      "prefix": "vue3init",
      "body": [
		"<template>",
		"  <div class='$1'></div>",
		"</template>",
		"",
		"<script setup>",
		"import { ref, onMounted } from 'vue';",
		"import { useRoute, useRouter } from 'vue-router';",
		"const route = useRoute();",
		"const router = useRouter();",
		"onMounted(() => {",
		"",
		"})",
		"</script>",
		"",
		"<style scoped lang='scss'>",
		"  .$1{",
        "",
        "  }",
		"</style>"
      ],
      "description": "my vue3 template"
    }
}

三、请求接口的模版

{
"API init": {
		"prefix": "const-api",
		"body": [
			"const { success, code, message, data } = await this.\\$esl.$1();",
			"if (success) {",
            	"this.\\$message.success(this.\\$t('errorCode.' + code));",
          	"} else {",
            	"this.\\$message.error(message);",
          	"}",
		],
		"description": "const api"
	}
}

四、快速log的模版

{
"Print to console": {
    "prefix": "log",
    "body": ["console.log('$1');", "$2"],
    "description": "Log output to console"
  },
}

五、快速写函数注释的模版

{
"function comment": {
    "prefix": "funccomment",
    "body": [
      "/**",
      " * $1",
      " *",
      " * @param  $3  $4  $5",
      " * @returns $9",
      " */"
    ],
    "description": "Add function comment"
  },
}

最后

如果说

友友们之间的点赞

展现的是相互之间的支持，善意和友情

那么

你对我文章的认真阅读

则是对我的劳动成果的

默默地承认和支持

每一次创文的过程

都是我锻炼自己逻辑思维能力和语言组织能力的过程

也是我

不断深悟生活，思考人生的过程

每一篇文章的形成

都是我心血的结晶

感谢您的阅读

关注我，后续持续分享哦！~