Vscode好用的一些前端自定义代码推荐

更新时间：2024年11月29日 10:24:42 作者：SOLOMEER

这篇文章主要介绍了如何在VSCode中自定义代码片段和快捷键,以提高前端开发效率,推荐了几个常用的自定义代码片段,还提供了这些代码片段的详细示例和使用方法,需要的朋友可以参考下

设置自定义代码文件（snippets）

通过vscode个人设置的Snippets选项选择或者创建一个自定义snippets文件。

snippets的文件格式类似JSON，文件中key的含义如下：

prefix：设置自定义代码对应的快捷键。

body：自定义代码片段主体，为数组形式，具体可参考后续代码。

description：对该段自定义代码片段的描述。

推荐自定义代码片段

let：通过自定义let代码可以更加方便的定义变量。

// ${2:key为占位符，默认为key，输入完后按Tab跳转到value处。
"let": {
		"prefix": "let", //自定义快捷键
		"body": [
			"let ${2:key} = ${3:value};"
		],
		"description": "let声明变量"
},

实际效果：

logs：在实际开发过程中，console.log是常用的调试方法之一，通过自定义代码片段能够快速的生成调试代码

//$1 $1 为两个同名占位符，触发自定义代码段后两个占位符同时出现光标
"logs": {
    "prefix": "logs",
    "body": [
        "console.log('！！！这是$1', $1);"
    ],
    "description": "控制台打印变量"
},

实际效果：

logg：或者采取下列方法，复制想要打印的变量名，随后logg触发自定义代码片段即可。！！！强烈推荐

//$CLIPBOARD$1能够自动识别剪切板的内容，强烈推荐！！！
"paste to log": {
		"prefix": "logg",
		"body": [
			"console.log('！！！这是$CLIPBOARD$1', $CLIPBOARD$1);"
		],
		"description": "打印出剪切板内容"
	},

实际效果：

vue3：设置该快捷键可以一键生成vue文件的基础框架

"vue3": {
		"prefix": "vue3",
		"body": [
			"<template>",
			"    <div>",
			"$1",
			"    </div>",
			"</template>\n",
			"<script lang=\"ts\" setup>",
			"import { ref } from \"vue\" ",
			"$2",
			"</script>\n",
			"<style lang=\"less\" scoped>",
			"$3",
			"</style>"
		],
		"description": "vue3"
	},

实际效果：

完整代码

为了方便铁铁们的使用和调试，因此贴出完整代码，如下所示（好使的话点个赞和收藏吧，球球了）：

{
	"vue3": {
		"prefix": "vue3",
		"body": [
			"<template>",
			"    <div>",
			"$1",
			"    </div>",
			"</template>\n",
			"<script lang=\"ts\" setup>",
			"import { ref } from \"vue\" ",
			"$2",
			"</script>\n",
			"<style lang=\"less\" scoped>",
			"$3",
			"</style>"
		],
		"description": "vue3"
	},
	"logs": {
		"prefix": "logs",
		"body": [
			"console.log('！！！这是$1', $1);"
		],
		"description": "控制台打印变量"
	},
	"let": {
		"prefix": "let",
		"body": [
			"let ${2:key} = ${3:value};"
		],
		"description": "let声明变量"
	},
	"paste to log": {
		"prefix": "logg",
		"body": [
			"console.log('！！！这是$CLIPBOARD$1', $CLIPBOARD$1);"
		],
		"description": "打印出剪切板内容"
	},
}

总结

到此这篇关于Vscode好用的一些前端自定义代码的文章就介绍到这了,更多相关Vscode前端自定义代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vscode中快速创建自定义代码模板的方法

VScode 隐藏大量无用的文件比如在看Linux kernel或boot时候
这篇文章主要介绍了VScode 隐藏大量无用的文件比如在看Linux kernel或boot时候,VScode 工程创建先在 Ubuntu 下编译一下 uboot，然后将编译后的 uboot 文件夹复制到 windows 下，并创建VScode 工程，需要的朋友可以参考下
2022-10-10
Git 教程之创建仓库详解
本文主要介绍Git 创建仓库的知识，这里整理了相关资料及简单示例代码，帮助大家学习理解此部分的知识，有兴趣的小伙伴可以参考下
2016-09-09
为什么使用框架使用框架的优缺点
我们是由于效率和易用性的考虑才产生框架。框架能节省开发时间。框架强制使用公共的约定，因此它能有效地解决一些共有的问题，比如页面渲染，assert判断，安全或者应用配置等
2012-09-09
htaccess语法教程
前些天不小心删除了原来的博客系统，问过godaddy的客服，恢复数据需要150美元，另外还需要提供不少信息，我于是放弃，注册了这个nunumick.me，打算从头再来。
2011-09-09
git中commit和push的区别及说明
这篇文章主要介绍了git中commit和push的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
如何设计一个几十万在线用户弹幕系统需求方案
这篇文章主要介绍了为大家如何设计一个几十万在线用户弹幕系统的需求实现方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
2023-05-05
解决Git Revert 再次合代码无效问题
这篇文章主要为大家介绍了解决Git Revert 再次合代码无效问题，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
分享10个免费超棒的编程用等宽字体
本文介绍 10 个适合在编程时使用的等宽字体，它们都是免费的，效果很好
2013-07-07
关于代码阅读问题的小技巧脚本之家原创(适合所有网站)不定时更新
因为很多网站为了网站的安全，特将一些字符替换成中文字符，导致很多情况下，代码无法运行，或复制内容的适合都是一行显示，这里将会为大家整理一些。
2011-01-01
GIT如何修改账号密码重新登录和保存密码
这篇文章主要介绍了GIT如何修改账号密码重新登录和保存密码问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05