vscode使用技巧--代码模板、本地服务器

最新推荐文章于 2024-05-24 07:42:43 发布

weixin_34067980

最新推荐文章于 2024-05-24 07:42:43 发布

阅读量365

点赞数

文章标签：开发工具

原文链接：https://juejin.im/post/5c90547a5188252d8c7d51f1

版权

代码模板

文件-》设置-》用户首选项，输入html，在弹出的界面中填入：

"h5 sample": { 
	"prefix": "h", 
	"body": [ 
		"<!DOCTYPE html>", 
		"<html lang=\"zh-CN\">\n", 
		"<head>", 
		"\t<meta charset=\"UTF-8\">", 
		"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios\">", 
		"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">", "\t<title>Document</title>",
		"\t<link rel=\"stylesheet\" href=\"$1\">", 
		"\t<script src=\"$2\"></script>", 
		"</head>\n", 
		"<body>\n$3", 
		"</body>\n", 
		"</html>" 
	], 
	"description": "The full sample code - html5." }
复制代码

其中：

h是自定义的快捷代码，这里输入h就会出现快速生成代码提示，然后输入tab键补全，也可以自定义其他字段。
$n代码光标位置，即模板外需要填入的部分

搭建本地服务器

当html中使用ajax时，不能使用文本协议打开，所以需要搭建一个本地服务器。
原文地址：www.jianshu.com/p/f65f2fefa…

打开VsCode的插件安装功能，在左侧的最底部位置

接着在输入框中搜索【live Server】
找到同名插件，第一个就是啦，点击【安装】

安装完成后重新启动VScode后，你会发现在软件的右下角的状态栏中出现了【Go Live】这个就是启动刚刚安装的插件开关啦。
注意：必须是在打开文件夹的页面下才会显示Go Live,如果只是打开一个文件则不会显示

点击启动服务器，会自动运行系统默认的浏览器，如图
到这里说明服务器以及能跑起来了，初始页面默认是index.html，如果没有index.html文件，默认是显示项目中所有的文件和文件夹回到VsCode再次点击即可关闭服务器。

转载于:https://juejin.im/post/5c90547a5188252d8c7d51f1

weixin_34067980

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vscode使用技巧--代码模板、本地服务器

代码模板文件-》设置-》用户首选项，输入html，在弹出的界面中填入："h5 sample": { "prefix": "h", "body": [ "<!DOCTYPE html>", "<html lang=\"zh-CN\">\n", "<head>", "\t<meta charset=\"UTF-8\">...
复制链接

扫一扫