vscode中的代码片段代码片段 vue template vue3 html htm js log react rea

代码片段

Manage——>user snippets——>选择语言

\n    换行
\t    缩进1个tab

vue

template

"Print to console": {
		"prefix": "template",
		"body": [
			"<template>\n\t<div$1></div>\n</template>\n<script>\nexport default {\n\tdata(){",
			"\t\treturn{\n\t\t\tmsg:''\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n\r</style>"
		],
		"description": "Log output to console"
	}

"Print to vue3": {
    "prefix": "temp3",
    "body": [
      "<template>\n\t<div$1></div>\n</template>\n<script lang='ts' setup>\nimport {} from 'vue'",
      "</script>\n<style lang='scss' scoped>\n\n</style>\n"
    ],
    "description": "Log output to console"
  }

html

htm

"Print to console": {
  "prefix": "htm",
  "body": [
      "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"UTF-8\">",
      "\t<meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"\t<title>Document</title>\n</head>\n<body>\n\r</body>\n</html>"
        ],
	"description": "Log output to console"
}

js

log

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

react

"Print to console": {
    "prefix": "edc",
    "body": ["export default class $1 extends React.Component{\n\trender(){\n\t\treturn <div>$2</div>\n\t}\n}",],
    "description": "Log output to console"
}

react function

"ts react func": {
	"prefix": "func",
	"body": [
		"import React, { useState, useEffect } from 'react'\n",
		"interface Props {}\n",
		"export default function (props: Props) {\n",
			"\tconst [state, setState] = useState();\n",
			"\tuseEffect(() => {}, []);\n",
			"\treturn <div></div>;\n",
		"}"
	],
	"description": "react函数"
}

模板变量

可以使用$name或者${name:default}的格式

$1 $2 表示光标的位置，按tab键跳转,$0是最后一个

TM_SELECTED_TEXT 当前选中的文本或者空文本

TM_CURRENT_LINE 当前行的内容

TM_CURRENT_WORD 光标之后的文本或者空文本

TM_LINE_INDEX 上一行行号

TM_LINE_NUMBER 当前行号

TM_FILENAME 当前文件名称

TM_FILENAME_BASE 当前文件名称不带后缀

TM_DIRECTORY 当前文件的文件夹

TM_FILEPATH 当前文件的全路径

CLIPBOARD 剪切板内容

#日期变量

CURRENT_YEAR 当前年份

CURRENT_YEAR_SHORT 当前年的最后两个数字

CURRENT_MONTH 当月两个数字 (如 ‘02’)

CURRENT_MONTH_NAME 当月的全称 (如 ‘July’)

CURRENT_MONTH_NAME_SHORT 当月的简称 (如 ‘Jul’)

CURRENT_DATE 当日

CURRENT_DAY_NAME 周几(如 ‘Monday’)

CURRENT_DAY_NAME_SHORT 周几的简称 (如 ‘Mon’)

CURRENT_HOUR 当前24小时的时间

CURRENT_MINUTE 分钟

CURRENT_SECOND 秒