快捷搜索:  汽车  科技

vscode安装注意事项(VSCode安装和测试)

vscode安装注意事项(VSCode安装和测试)一直都是点击下一步安装,如下:https://vscode.cdn.azure.cn/stable/1b8e8302e405050205e69b59abb3559592bb9e60/VSCodeUserSetup-x64-1.31.1.exe安装步骤:https://code.visualstudio.com/vscode主界面如下:vscode下载链接:

0.引言

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

1.vscode安装

vscode官网连接地址:

https://code.visualstudio.com/

vscode主界面如下:

vscode安装注意事项(VSCode安装和测试)(1)

vscode下载链接:

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

安装步骤:

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

vscode安装注意事项(VSCode安装和测试)(2)

vscode安装注意事项(VSCode安装和测试)(3)

vscode安装注意事项(VSCode安装和测试)(4)

vscode安装注意事项(VSCode安装和测试)(5)

vscode安装注意事项(VSCode安装和测试)(6)

2.安装成功后

安装后的vscode主界面:

vscode安装注意事项(VSCode安装和测试)(7)

3.安装插件

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

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

vscode安装注意事项(VSCode安装和测试)(8)

vscode安装注意事项(VSCode安装和测试)(9)

安装Live Server

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

vscode安装注意事项(VSCode安装和测试)(10)

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

vscode安装注意事项(VSCode安装和测试)(11)

4.创建文件和测试

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

vscode安装注意事项(VSCode安装和测试)(12)

vscode安装注意事项(VSCode安装和测试)(13)

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

vscode安装注意事项(VSCode安装和测试)(14)

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

vscode安装注意事项(VSCode安装和测试)(15)

<html> <body> <h1>标题1 </h1> <p>第一个段落</p> <p>我的第一个HTML页面</p> </body> </html>

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

vscode安装注意事项(VSCode安装和测试)(16)

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

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

vscode安装注意事项(VSCode安装和测试)(17)

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

vscode安装注意事项(VSCode安装和测试)(18)

<!DOCTYPE html> <html> <body> <h2>Body中的javaScript</h2> <p id="demo">一个段落</p> <button type="button" onclick="myFunction()">试一试</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "段落已被更改"; } </script> </body> </html>

vscode安装注意事项(VSCode安装和测试)(19)

运行结果:

vscode安装注意事项(VSCode安装和测试)(20)

5.总结

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

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

猜您喜欢: