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

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

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

設置自定義代碼文件（snippets）

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

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

prefix：設置自定義代碼對應的快捷鍵。

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

description：對該段自定義代碼片段的描述。

推薦自定義代碼片段

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

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

實際效果：

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

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

實際效果：

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

//$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": "打印出剪切板內容"
	},
}