VSCode配置vue模板\react模板

公共步骤:

在这里插入图片描述
接下来:
选择
接下来:
在这里插入图片描述
然后我们会得到这样一个文件:
在这里插入图片描述

vue模板

它注释的那些东西可以全部删掉了,一样直接复制粘贴到你的.code-snippets文件里面就可以啦.当然,如果觉得我的模板代码用的不顺手,自己在body里面删删改改都是很方便的.
\n表示换行,\t表示空格
使用的时候输入vue-demo,然后回车即可

{
"Create vue demo template": {
        "prefix": "vue-demo",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "<head>",
            "<meta charset=\"UTF-8\">",
            "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "<title>Demo</title>",
            "</head>",
            "<body>",
            "<div id="app">\n",
            "<div/>"
            "<script src=\"./vue.js\">\n",
            "</script>",
            "</body>",
            "</html>"
        ],
        "description": "Create vue demo template"
    }
}

React 模板

一样直接复制粘贴到你的.code-snippets文件里面就可以啦.
使用的时候输入vue-demo,然后回车即可

{
	// 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"
	// }
	"reactDemo":{
		"prefix": "!rea",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"<head>",
			"<meta charset=\"UTF-8\">",
			"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"<title>Title</title>",
			"</head>",
			"<body>",
			"<div id=\"app\">\n</div>",
			"<script crossorigin src=\"https://unpkg.com/react@16/umd/react.production.min.js\">",
			"</script>",
			"<script crossorigin src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\">",
			"</script>",
			"<script crossorigin src=\"https://unpkg.com/@babel/standalone/babel.min.js\">",
			"</script>",
			"<script type=\"text/babel\">",
      "//coding here:\n",
			"</script>",
			"</body>",
			"</html>"


		],
		"description": "react demo create by qingfeng"
	}
}
发布了20 篇原创文章 · 获赞 1 · 访问量 269

猜你喜欢

转载自blog.csdn.net/weixin_45743297/article/details/103874042
今日推荐