前端开发提效工具——用户自定义代码片段

做开发总是会有大量的代码要写，但是有时候某些代码是非常基础但是很多，我们就可以把这一部分整合起来，使用一个很简短的关键字来快速唤出。

如何新建这样的代码段？

1.在VSCode当中找到Snippets，然后点击

2.之后会弹出一个框，选择New Global Snippets file

3.弹出一个小框，你在这里书写该自定义代码片段的名称，记得复制下来

4.然后进入具体的文件，就像下面这样

默认模板如下：

{
	// Place your global 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"
	// }
}

有哪些模板？

自定义axios拦截器并封装

{  
    // 代码片段的名称，这个名称会显示在代码片段列表中  
    "axiost": {  
        "prefix": "axiost", // 触发代码片段的关键字  
        "body": [  
            "import axios, { AxiosInstance, InternalAxiosRequestConfig } from 'axios';",  
            "",  
            "const creatAxios = (config?: InternalAxiosRequestConfig) => {",  
            "\tconsole.log('打印配置信息', import.meta.env);",  
            "\tconst instance: AxiosInstance = axios.create({",  
            "\t\tbaseURL: import.meta.env.VITE_API_BASE_URL,",  
            "\t\ttimeout: import.meta.env.VITE_TIMEOUT,",  
            "\t\twithCredentials: true, // default-false 跨域请求是否需要凭证",  
            "\t\theaders: {",  
            "\t\t\t'Content-Type': 'application/json',",  
            "\t\t\tAccept: 'application/json',",  
            "\t\t},",  
            "\t\t...config,",  
            "\t});",  
            "",  
            "\t// 重写请求拦截器规则",  
            "\tinstance.interceptors.request.use(",  
            "\t\t(config: InternalAxiosRequestConfig) => {",  
            "\t\t\t// 在发送请求之前做些什么",  
            "\t\t\tconsole.log('在发送请求之前做些什么呢？');",  
            "\t\t\treturn config;",  
            "\t\t},",  
            "\t\t(error: any) => {",  
            "\t\t\t// 对请求错误做些什么",  
            "\t\t\tconsole.log('对请求错误做些什么呢？');",  
            "\t\t\treturn Promise.reject(error);",  
            "\t\t},",  
            "\t);",  
            "",  
            "\t// 重写响应拦截器规则",  
            "\tinstance.interceptors.response.use(",  
            "\t\t(response: any) => {",  
            "\t\t\t// 对响应数据做点什么",  
            "\t\t\tconsole.log('对响应数据做点什么呢？', response.data.msg);",  
            "\t\t\tif (response.data.code !== 200) {",  
            "\t\t\t\tconsole.error(response.data.msg);",  
            "\t\t\t} else {",  
            "\t\t\t\tconsole.log(response.data.msg);",  
            "\t\t\t}",  
            "\t\t\treturn response;",  
            "\t\t},",  
            "\t\t(error: any) => {",  
            "\t\t\t// 对响应错误做点什么",  
            "\t\t\tconsole.log('对响应错误做点什么呢？', error);",  
            "\t\t\treturn Promise.reject(error);",  
            "\t\t},",  
            "\t);",  
            "",  
            "\treturn instance;",  
            "};"  
        ],  
        "description": "快速生成一个创建Axios实例的函数"  
    }  
}

在html引入echarts

{
	// Place your global 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:
	"echartsUrl": {
		"scope": "javascript,typescript,html",
		"prefix": "echartsUrl",
		"body": [
			"<script src=\"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js\"></script>"
		],
		"description": "Log output to console"
	}
}

html板子（这个其实你输入感叹号也可以实现）

{  
    // 这里是文件的全局描述，不是必须的，但有助于理解  
    "HTML Templates": {  
        // 定义一个前缀，当在HTML文件中输入此前缀并按下Tab时，将展开此片段  
        "Print to console": {  
            "prefix": "htmlt",  
            // 描述（可选）  
            "description": "Log output to console",  
            // 片段内容  
            "body": [  
                "<!DOCTYPE html>",  
                "<html lang=\"en\">",  
                "<head>",  
                "    <meta charset=\"UTF-8\">",  
                "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",  
                "    <title>Document</title>",  
                "</head>",  
                "<body>",  
                "    <h1>Hello, World!</h1>",  
                "    <!-- Your HTML content goes here -->",  
                "</body>",  
                "</html>"  
            ]  
        }  
    }  
}

html表的模板

{
	// Place your global 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:
	"htmltabelt": {
		"scope": "javascript,typescript,html",
		"prefix": "htmltabelt",
		"body": [
			"<div id=\"root\" style=\"width: 100vw;height: 100vh\">",
			"    <table>",
			"        <thead>",
			"            <tr>",
			"                <th>xxxxx</th>",
			"            </tr>",
			"        </thead>",
			"        <tbody>",
			"            <tr>",
			"                <td><%= value.xxx%></td>",
			"            </tr>",
			"        </tbody>",
			"    </table>",
			"</div>",
		],
		"description": "Log output to console"
	}
}

html表格样式

{
	// Place your global 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:
	"tablestylet": {
		"scope": "javascript,typescript,html",
		"prefix": "tablestylet",
		"body": [
			
		"<style>",
        "@font-face {",
        "    font-family: \"PingFang SC\";",
        "    src: url(\"https://oms-2018-test.oss-cn-hangzhou.aliyuncs.com/template/PingFang_SC_Standard.ttf\");",
        "}",

        "* {",
        "    margin: 0;",
        "    padding: 0;",
        "}",

        "#root {",
        "    font-family: \"PingFang SC\";",
        "    font-size: 32px;",
        "    width: 100%;",
        "}",

        ".redtext {",
        "    color: #e8380d;",
        "}",

        ".yellowtext {",
        "    color: #ffbc3c;",
        "}",

        "table {",
        "    border-collapse: collapse;",
        "    width: 100%;",
        "}",

        "th,",
        "td {",
        "    border: 1px solid #e8e8e8;",
        "    padding: 8px;",
        "    text-align: center;",
        "}",

        "thead tr:first-child th {",
        "    background-color: #eee;",
        "    color: #000;",
        "    text-align: center;",
        "}",

        "tbody tr:last-child td {",
        "    font-weight: bold;",
        "}",
		"</style>",
		],
		"description": "Log output to console"
	}
}

js打印调试语句

{
	// Place your global 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:
	"logs": {
		"scope": "javascript,typescript,vue",
		"prefix": "logs",
		"body": [
			"console.log('xxxxx');",
		],
		"description": "Log output to console"
	}
}

Vue3组合式快速模板

{
	// Place your global 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:
	"vuet": { //快捷输入的时候显示的提示
	"prefix": "vuet",//输入的前缀，就是输入这个会有提示
	"description": "vue3模板",//描述
	"body": [//这个是一个字符串数组，就是会输出的内容，如果内容含有 双引号，需要转义，比如最下面的lang=\"scss\"
		"<template>",
		"  <div></div>",
		"</template>",
		"",
		"<script lang=\"ts\" setup>",
		"",
		"</script>",
		"",
		"<style lang=\"scss\" scoped>",
		"</style>",
		""
	]
},
}

最后想说的

代码片段只是提效的手段，作为程序员应该发挥想象力。我这里只是抛砖引玉，介绍一下我的提效方式，你完全可以根据自身特点利用这个功能来做自己的片段！！！