快捷導(dǎo)航

Vscode好用的一些前端自定義代碼推薦

更新時(shí)間：2024年11月29日 10:24:42 作者：SOLOMEER

這篇文章主要介紹了如何在VSCode中自定義代碼片段和快捷鍵,以提高前端開(kāi)發(fā)效率,推薦了幾個(gè)常用的自定義代碼片段,還提供了這些代碼片段的詳細(xì)示例和使用方法,需要的朋友可以參考下

在vscode中用戶可以通過(guò)自定義代碼模板和設(shè)置自定義代碼快捷鍵。在前端開(kāi)發(fā)領(lǐng)域，一些好的自定義代碼能夠加快我們的開(kāi)發(fā)進(jìn)度，提升開(kāi)發(fā)效率。下面推薦一些常用的自定義代碼片段。

設(shè)置自定義代碼文件（snippets）

通過(guò)vscode個(gè)人設(shè)置的Snippets選項(xiàng)選擇或者創(chuàng)建一個(gè)自定義snippets文件。

snippets的文件格式類似JSON，文件中key的含義如下：

prefix：設(shè)置自定義代碼對(duì)應(yīng)的快捷鍵。

body：自定義代碼片段主體，為數(shù)組形式，具體可參考后續(xù)代碼。

description：對(duì)該段自定義代碼片段的描述。

推薦自定義代碼片段

let：通過(guò)自定義let代碼可以更加方便的定義變量。

// ${2:key為占位符，默認(rèn)為key，輸入完后按Tab跳轉(zhuǎn)到value處。
"let": {
		"prefix": "let", //自定義快捷鍵
		"body": [
			"let ${2:key} = ${3:value};"
		],
		"description": "let聲明變量"
},

實(shí)際效果：

logs：在實(shí)際開(kāi)發(fā)過(guò)程中，console.log是常用的調(diào)試方法之一，通過(guò)自定義代碼片段能夠快速的生成調(diào)試代碼

//$1 $1 為兩個(gè)同名占位符，觸發(fā)自定義代碼段后兩個(gè)占位符同時(shí)出現(xiàn)光標(biāo)
"logs": {
    "prefix": "logs",
    "body": [
        "console.log('?。?！這是$1', $1);"
    ],
    "description": "控制臺(tái)打印變量"
},

實(shí)際效果：

logg：或者采取下列方法，復(fù)制想要打印的變量名，隨后logg觸發(fā)自定義代碼片段即可。?。?！強(qiáng)烈推薦

//$CLIPBOARD$1能夠自動(dòng)識(shí)別剪切板的內(nèi)容，強(qiáng)烈推薦?。?！
"paste to log": {
		"prefix": "logg",
		"body": [
			"console.log('?。?！這是$CLIPBOARD$1', $CLIPBOARD$1);"
		],
		"description": "打印出剪切板內(nèi)容"
	},

實(shí)際效果：

vue3：設(shè)置該快捷鍵可以一鍵生成vue文件的基礎(chǔ)框架

"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"
	},

實(shí)際效果：

完整代碼

為了方便鐵鐵們的使用和調(diào)試，因此貼出完整代碼，如下所示（好使的話點(diǎn)個(gè)贊和收藏吧，球球了）：

{
	"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": "控制臺(tái)打印變量"
	},
	"let": {
		"prefix": "let",
		"body": [
			"let ${2:key} = ${3:value};"
		],
		"description": "let聲明變量"
	},
	"paste to log": {
		"prefix": "logg",
		"body": [
			"console.log('?。?！這是$CLIPBOARD$1', $CLIPBOARD$1);"
		],
		"description": "打印出剪切板內(nèi)容"
	},
}