0.引言

本篇文章主要讲解vscode安装和测试,主要是利用vscode可以模拟本地服务器,可以直接写一些简单的前端demo,便于演示。

1.vscode安装

vscode官网连接地址:

https://code.visualstudio.com/

vscode主界面如下:

c4a71effb291a33eccbace940a5afd44.png

vscode下载链接:

https://vscode.cdn.azure.cn/stable/1b8e8302e405050205e69b59abb3559592bb9e60/VSCodeUserSetup-x64-1.31.1.exe

安装步骤:

一直都是点击下一步安装,如下:

4c61b29de1090dfa08d5f0553d5b5f92.png
84ec5976c1a2fa03e2c2aca77a9ccd82.png
5a035819d2d3732331bf0e084045ecb1.png
1a42937ff474f149b9b4bc8b696effa9.png
97a3c79ce8f5ff86f7eefbe14a1f29da.png

2.安装成功后

安装后的vscode主界面:

8a889c337287f9e552a63b67f84ff5bb.png

3.安装插件

Prettier - Code formatter:
使用 Prettier 来统一代码风格,当保存 HTML/CSS/JavaScript 文件时,它会自动调整代码格式。

点击如下红色框内的图标。

81ae26bc725be0c049013e12ca6d6aa1.png
e8a0e268e076721a339eeede4e756220.png

安装Live Server

在本地开发环境中,实时重新加载(reload)页面。如下界面:

316f5eb5e28a5284a161a4301ec98a93.png

安装完成后,这里会变成如下:

fd38344ea0f07d013aab4dc057e58ef0.png

4.创建文件和测试

选择工具栏上的file->Open Folder,创建目录,然后在该目录下创建一个html网页。创建一个New File为first_html。

9ea7433f35df639d0c393c05a3e2f2bd.png
faf830e33b7e5531dfd5cb302e43a496.png

直接找到源文件,使用浏览器打开。如下:

722bf788dfe757a591ca204f7d06c3f9.png

还有一种方法就是本地模拟一个服务器。点击鼠标右键,然后选择Open with Live Server。可以运行当前源码。

b75807d5a149054a13bbcb31190fb492.png
            

标题1

第一个段落

我的第一个HTML页面

这就是前面的那个插件起作用了。

0a5c71e9d432afbaf8343f57daa5b523.png

推荐一个HTML入门学习教程:

https://www.runoob.com/html/html-tutorial.html

aab4397e2a251d7cc696b93394ebe4ae.png

JavaScript入门学习教程:https://www.runoob.com/js/js-tutorial.html

9cf072022ebb5a207fc98ab470982365.png
      

Body中的javaScript

一个段落

试一试
83b034639d1f09ebee525629015fa7be.png

运行结果:

42340c094de5a74020f7dbc97f8ac6b3.png

5.总结

本篇安装是主要讲解vscode安装和测试,能够快速学习如何使用vscode。关于vscode还有更多功能,欢迎评论区回复。欢迎关注,收藏,转发,分享。

后期关于项目知识,也会更新在微信公众号“记录世界 from antonio”,欢迎关注

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐