VSdode安装使用

1. 下载

1.VScode官网地址: link 2.点击向下箭头,选择自己电脑适配系统,点击下载,(推荐选择稳定版)

vscode安装yarn命令 vscode的安装和使用_前端

3.在文件资源管理器中打开下载好的安装包

vscode安装yarn命令 vscode的安装和使用_vscode安装yarn命令_02


4.双击安装该程序;选择我接收,再点击下一步

vscode安装yarn命令 vscode的安装和使用_html_03

5.安装磁盘推荐D盘;这里可以根据自己的需要选择;再点击下一步;一直等待安装结束;

vscode安装yarn命令 vscode的安装和使用_vscode安装yarn命令_04


6.安装完成之后就可以看到桌面上的快捷方式了

vscode安装yarn命令 vscode的安装和使用_chrome_05


到这里就安装成功了!!!

2.插件安装

1.打开VScode,选择扩展

vscode安装yarn命令 vscode的安装和使用_html_06


2.在输入框中输入Chinese,再选择install,安装插件

vscode安装yarn命令 vscode的安装和使用_html_07

3.安装完成之后会有提示,现在重启;点击重启;就可以看到是中文版

vscode安装yarn命令 vscode的安装和使用_chrome_08


vscode安装yarn命令 vscode的安装和使用_html_09


4.VScode常用插件:

(1) Open in Browser:打开外部浏览器

(2)settings sync:同步所有设置和插件

(3)Auto Rename Tag:自动重命名 HTML或XML 标签

(4)Auto Close Tag:自动添加 HTML/XML 关闭标签

(5)Bracket Pair Colorizer:让括号拥有独立的颜色,易于区分。可以配合任意主题使用

3.使用教程

1.在电脑上首先创建一个文件用来存放自己的项目;

vscode安装yarn命令 vscode的安装和使用_vscode安装yarn命令_10

2.在VScode方法里面打开改文件夹

vscode安装yarn命令 vscode的安装和使用_vscode安装yarn命令_11

vscode安装yarn命令 vscode的安装和使用_chrome_12

vscode安装yarn命令 vscode的安装和使用_html_13

3.新建文件或者文件夹

vscode安装yarn命令 vscode的安装和使用_前端_14

4.我在这里直接给大家演示如何新建文件,并且运用

首先点击新建文件;

vscode安装yarn命令 vscode的安装和使用_html_15


然后命名文件,后缀为**.html**!!!,然后点击回车;

vscode安装yarn命令 vscode的安装和使用_vscode_16


可以看到右边是我们新建好的文档;

vscode安装yarn命令 vscode的安装和使用_vscode_17

在编辑区域输入英文感叹号!点击回车,(注意,一定的是英文感叹号);我们就可以看到创建好的html文档结构

vscode安装yarn命令 vscode的安装和使用_html_18


vscode安装yarn命令 vscode的安装和使用_html_19


4.运行文件

在文档里面输入我们的第一行代码

<div>我是第一个html</div> 代码在body标签中书写

vscode安装yarn命令 vscode的安装和使用_vscode_20

鼠标移动到编辑创建;右键点击;选择在默认浏览器中打开

vscode安装yarn命令 vscode的安装和使用_vscode_21

我们就会看到浏览器打开窗口;运行出出我们刚刚编写的代码

vscode安装yarn命令 vscode的安装和使用_前端_22

到这里我们的笔记就结束啦;欢迎留言!!!