龙空技术网

vscode代码片段快速生成Vue代码

信息技术专栏 291

前言:

现在我们对“php打印html”大体比较着重,小伙伴们都需要知道一些“php打印html”的相关文章。那么小编在网上网罗了一些有关“php打印html””的相关资讯,希望咱们能喜欢,咱们一起来学习一下吧!

明确需求

思考:创建vm对象前 都要复制cdn地址 然后每次都要写 new Vue麻烦不麻烦?

我们可以使用vscode 的代码片段来快速生成

打开vscode 设置

打开用户代码片段有两种方式

1.使用快捷键ctrl+shift+p

输入“代码片段”

然后按回车键 选中出现

图2

2.打开设置选择代码片段

点击用户代码片段

新建代码片段

在图2中我们可以做如下操作:

1.可以直接打开现有代码片段

2.可以选择创建全局代码片段

3.可以选择创建当前文件夹的代码片段

新建完成的代码片段有默认参考例子

输入新建的代码段的名称“vue”

打开后默认参考例子内容如下:

这个是取消注释后

新建一个html 文件,然后在文件中输入log

注意:因为有scope 参数限制了使用语言,所以必须在script 标签内写log 才会出现代码片段的名称

代码片段json说明

snippet语法

"Print to console": {		"scope": "javascript,typescript",		"prefix": "log",		"body": [			"console.log('$1');",			"$2"		],		"description": "Log output to console"	}

参数说明:

Print to console 代码片段名称 【当输入参数指令时,提示内容】

scope 使用的语言范围

prefix 触发当前的 snippt 片段

body 代码片段的具体内容

description 代码片段的描述

片段语法

body 片段里面可以使用特殊的结构来控制插入的光标和文字。

1.占位符

使用 $ 符号作为占位符,当输入代码片段的 prefix 后按 tab 键可以生成代码片段,然后再按 tab 键可以调到下一个占位符。占位符一般从 $1 开始,依次增加。

$0 用于设置最终光标的位置,设置了 $0 之后,再往后设置其他占位符则不会生效, $0 终止了 TAB键 的光标跳转操作。

2.常用变量

1. 文档相关: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 打开的工作区或文件夹的路径2. 日期和时间相关:CURRENT_YEAR 本年度CURRENT_YEAR_SHORT 当前年份的最后两位数字CURRENT_MONTH 月份为两位数(例如“02”)CURRENT_MONTH_NAME 月份的全名(例如“七月”)CURRENT_MONTH_NAME_SHORT 月份的简称(例如“Jul”)CURRENT_DATE 一个月中的哪一天CURRENT_DAY_NAME 日期名称(例如“星期一”)CURRENT_DAY_NAME_SHORT 一天的简称(例如“星期一”)CURRENT_HOUR 24 小时制的当前小时CURRENT_MINUTE 当前分钟CURRENT_SECOND 当前秒CURRENT_SECONDS_UNIX 自 Unix 纪元以来的秒数3. 插入随机值:RANDOM 6 位随机 Base-10 数字RANDOM_HEX 6 位随机 Base-16 数字UUID 版本 4 UUID4. 插入注释相关:BLOCK_COMMENT_START示例输出:PHP/*或 HTML<!--BLOCK_COMMENT_END示例输出:PHP*/或 HTML-->LINE_COMMENT 示例输出:在 PHP 中 //
vue 代码片段json
{	"vue代码片段": {		"prefix": "vue",		"body": [			"<!DOCTYPE html>",			"<html lang=\"en\">",			"\t<head>",			"\t\t<title>Vue</title>",			"\t\t<meta charset=\"UTF-8\">",			"\t</head>",						"\t<body>",						"\t\t<div id=\"app\">",						"\t\t</div>",						"\t\t<script src=\"\"></script>",						"\t\t<script>",						"\t\t\tlet vm = new Vue({",						"\t\t\t\tel: '#app',",						"\t\t\t\tdata: {",						"",						"\t\t\t\t}",						"\t\t\t})",						"\t\t</script>",						"\t</body>",			"</html>"		],		"description": "vue - Defines a template for a vue & html5 document"	}}

json 文件配置好后新建文件在文件中输入vue

然后按回车

然后自动生成代码如下:

总结

我们可以使用代码片段生成器生成注释等一系列重复的代码工作。

代码片段生成器:

参考文档:

标签: #php打印html