?項目背景

很多時候，我們新建vue文件的時，都需要把重復的代碼結(jié)構(gòu)重新輸入或者copy過來，對開發(fā)效率照成影響。??

可以通過鍵入關(guān)鍵詞 vue3 快速生成代碼片段

構(gòu)建效果

操作步驟

在vscode左下角，點擊設(shè)置按鈕，選擇新建用戶代碼片段：

也可以在 文件 / 首選項 / 配置用戶代碼片段：

在輸入框中輸入 “vue”? 或 “vue.json” ， 然后點擊“vue.json”打開它，進行編輯

?文章來源地址http://www.zghlxwxcb.cn/news/detail-845312.html

這里是我的編輯vue3 template 內(nèi)容，

你也可以根據(jù)自己的開發(fā)需求編寫自己的一套代碼片段:

{
	"Print to console": {
		"prefix": "vue3",
		"body": [
			"<template>",
			"  <div>",
			"",
			"  </div>",
			"</template>",
			"",
			"<script setup lang='ts'>",
			"import { ref, reactive} from 'vue'",
			"",
			"</script>",

			"<style lang='scss' scoped>",
			"",
			"</style>",
		],
		"description": "Log output to console"
	}
}

新建一個 template-demo.vue 文件，輸入 'vue' 或 ‘vue3’?（也就是vue.json定義的 prefix 代碼縮寫）?：

按下回車鍵就可以生成剛剛編寫的代碼片段了：

?

編寫ts代碼片段

當然，我們還可以自定義ts代碼片段

在上述步驟中，輸入 typescript 關(guān)鍵字模糊查詢 ， 點擊 并打開 typescript.json 文件：

默認打開，里面附有說明

說明：

把你要打字的片段放在這里。每個代碼段在代碼段名稱下定義，并具有：前綴(prefix)、主體(body)和描述(description)。

前綴是用來觸發(fā)代碼片段的，代碼體將被展開和插入。

可能的變量有:$1， $2表示制表符，$0表示光標的最終位置，${1:label}， ${2:another}表示占位符,連接具有相同id的占位符。

這里示例代碼：

{
	// Place your snippets for typescript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. 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:
	"Create TS template": {
		"prefix": "ts",
		"body": [
			"class Greeter {",
			"	greeting: string",
			"	constructor(message: string) {",
			"		this.greeting = message;",
			"		$0"
			"	}",
			"	greet() {",
			"		return 'Hello, ' + this.greeting;",
			"	}",
			"}"
		],
		"description": "Create a ts template code snippet"
	}
}

創(chuàng)建ts-template.ts，在空白處輸入 ‘ts’

?

代碼片段生產(chǎn)效果：

?

擴展

當然，不僅僅有vue.json、typescript.json，vscode還有scss.json，javascript.json...等等代碼片段生產(chǎn)：

scss.json

?

javascript.json

?

同步

只要我們 打開過用戶代碼片段，vscode就會自動幫我們創(chuàng)建一個空白模板，存放在

C:\Users\你的用戶名\AppData\Roaming\Code\User\snippets

假如我們需要協(xié)同辦公（共享），或者異地辦公可以將該文件夾打包到gitxx上進行共享/使用??

當然，如果您是vscode開發(fā)者的賬號登錄的??，可以這么操作：

?

到了這里，關(guān)于（實用）如何在vscode設(shè)置自己的代碼片段，提高開發(fā)效率的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！