VSCode创建自定义片段（Vue + TypeScript）(Vue)

最新推荐文章于 2024-06-28 22:54:10 发布

7柒丶

最新推荐文章于 2024-06-28 22:54:10 发布

阅读量467

点赞数

分类专栏： # VScode 文章标签： vscode typescript vue.js

本文链接：https://blog.csdn.net/qq_16733389/article/details/120475661

版权

VScode 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在VSCode中自定义Vue和Vue+TypeScript的代码片段模板，通过快捷键和用户代码片段设置，提高开发效率。详细步骤包括唤出控制台输入snippets，创建vue.json文件，并提供了模板代码示例，包含模板的基本结构如template、script和style部分。此外，还列举了可用的变量及其作用，如TM_FILENAME_BASE用于插入当前文件名等。

摘要由CSDN通过智能技术生成

vs code 快速生成vue 模板

使用快捷Ctrl + Shift + P唤出控制台，然后输入snippets并选择。(或文件>首选项>用户代码片断里面，输入 vue.json ，然后回车 )(或 file > Preferences > User Snippets，当弹出搜索框之后，输入 vue.json ，然后回车)

在这里插入图片描述
2. 接着输入vue，vs code自动生成vue.json文件。

在这里插入图片描述
3. 将vue.json文件改为下面得模板（可根据个人需求修改当中的模板内容）

单独Vue自定义片段

{        
	"vue-template": {            
		"prefix": "vue",            
		"body": [                
			"<template>",                
			"  <div>$0</div>",                
			"</template>",                
			"",                
			"<script>",                
			"export default {",                
			"  name: '$TM_FILENAME_BASE',",                
			"  data () {",                
			"    return {",                
			"",                
			"    }",                
			"  },",                
			"  props: {",                
			"",                
			"  },",                
			"  components: {",               
 			"  },",                    
			"  methods: {",       
			"",        
			"  }",       
			" }",        
			"</script>",      
			 "",       
			 "<style scoped>",                               
			"</style>"   ,
			""         
		],         
		"description": "my vue template"  
	}  
}

Vue + TypeScript片段

{
	// Example:
	"Print to console": {
		"prefix": "vueTs",
		"body": [
			"<template>",
			"  <div>$0</div>",
			"</template>",
			"",
			"<script lang=\"ts\">",
			"import { Options, Vue } from 'vue-class-component'",
			"@Options({",
			"  components: {},",
			"  props: {},",
			"  data () {",
			"    return {",
			"    }",
			"  },",
			"  watch: {},",
			"  computed: {},",
			"  methods: {}",
			"})",
			"export default class $TM_FILENAME_BASE extends Vue {",
			"}",
			"</script>",
			"<style lang=\"less\" scoped>",
			"</style>",
			""
		],
		"description": "A vue file template"
	}
}

VSCode官网教程

变量
可以插入变量的值。未设置变量时，将插入其默认值或空字符串。当变量未知（即其名称未定义）时，插入变量的名称并将其转换为占位符。$name${name:default}

可使用以下变量：

TM_SELECTED_TEXT当前选定的文本或空字符串
TM_CURRENT_LINE当前行的内容
TM_CURRENT_WORD光标下或空字符串下的单词内容
TM_LINE_INDEX基于零指数的行号
TM_LINE_NUMBER基于单索引的行号
TM_FILENAME当前文档的文件名
TM_FILENAME_BASE当前文档的文件名，无需扩展
TM_DIRECTORY当前文档的目录
TM_FILEPATH当前文档的完整文件路径
RELATIVE_FILEPATH当前文档的相对（打开的工作空间或文件夹）文件路径
CLIPBOARD剪贴板的内容
WORKSPACE_NAME打开的工作空间或文件夹的名称
WORKSPACE_FOLDER打开的工作空间或文件夹的路径
用于插入当前日期和时间：

CURRENT_YEAR本年度
CURRENT_YEAR_SHORT今年最后两位数字
CURRENT_MONTH当月为两位数（例如"02"）
CURRENT_MONTH_NAME当月的全名（例如"七月"）
CURRENT_MONTH_NAME_SHORT当月的简称（例如"7 月"）
CURRENT_DATE一个月的一天
CURRENT_DAY_NAME日名称（例如"星期一"）
CURRENT_DAY_NAME_SHORT当天的简短名称（例如"星期一"）
CURRENT_HOUR当前小时以 24 小时时钟格式
CURRENT_MINUTE当前分钟
CURRENT_SECOND当前第二个
CURRENT_SECONDS_UNIX自 Unix 时代以来的秒数
用于插入随机值：

RANDOM6 个随机基数-10 位
RANDOM_HEX6 个随机基数-16 位
UUID版本 4 UUID
对于插入行或阻止注释，尊重当前语言：

BLOCK_COMMENT_START示例输出：在 PHP 或 HTML 中/*<!--
BLOCK_COMMENT_END示例输出：在 PHP 或 HTML 中*/-->
LINE_COMMENT示例输出：在 PHP 中//