vscode中使用 vue+ts 代码片段

最新推荐文章于 2024-06-23 13:02:35 发布

weixin_45700359

最新推荐文章于 2024-06-23 13:02:35 发布

阅读量960

点赞数

分类专栏： vscode 自定义代码块文章标签： typescript vue.js

本文链接：https://blog.csdn.net/weixin_45700359/article/details/113126837

版权

vscode 自定义代码块专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vscode中使用 vue+ts 代码片段

点击vscode设置按钮
选中用户代码片段
新建全局代码片段

然后复制下面json 粘贴到新建的文件里保存

{
	// Place your 全局 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"
	// }
	"Vue Ts": {
		"prefix": "vts",
		"body": [
				"<template>",
				" <div class=\"$1\">",
				" ",
				" </div>",
				"</template>",
				" ",
				"<script lang=\"ts\">",
				"import { Component, Vue, Watch } from 'vue-property-decorator'",
				"@Component({",
				"  name: 'Default' ",
				"})",
				"export default class Default extends Vue {",
				"  @Watch('name')",
				"  getWatchValue(newVal: string, oldVal: string) {",
				"    console.log(newVal, oldVal)",
				"  }",
				"  mounted() {",
				"    console.log('mounted')",  
				"  }",
				"}",
				"</script>",
				" ",
				"<style scoped lang=\"scss\">",
				"// @import './index.scss';",
				"</style>"
		],
		"description": "vue文件 ts模板"
	}
}