vscode全网最详细使用教程

vscode下载地址

官网下载：https://code.visualstudio.com/或者直接点击**我的资源**下载

VScode使用教程

安装教程

鼠标左键双击，即可运行安装程序

一：同意协议

二：选择安装路径

很明显可以看到VSCode的默认安装路径为C:\users\用户名\AppData\Local\Programs\Microsoft VS Code

你可以对其进行修改：

• 点击浏览按钮
• 或者 直接在输入框中删掉默认路径，然后进行填写（注意：请使用英文输入法）

三：在开始菜单文件夹中创建VSCode的快捷方式

• 你可以选择更改开始菜单文件夹名字
• 或者不创建开始菜单文件夹
• 这一步无论你如何选择，实际上几乎不影响你使用VS Code

开始菜单文件夹就是：

安装完成后，键盘上点击 win ，你会明白的

四：一些很有用的设置

这些选项勾选后的效果如下：

• **效果一：**创建桌面快捷方式

桌面上将出现该VSCode的快捷方式

• **效果二：**将“通过Code打开”操作添加到 Windows 资源管理器文件上下文菜单

选中任意文件，点击鼠标右键

可以直接通过VSCode打开该文件

• **效果三：**将“通过Code打开”操作添加到 Windows 资源管理器目录上下文菜单

选中任意文件夹，点击鼠标右键

可以直接通过VSCode打开该文件夹

将VS Code的打开操作添加到文件、文件夹的右键菜单中，会给我们的操作带来极大的方便

• **效果四：**将Code注册为受支持的文件类型的编辑器

对于受支持文件类型的文件，可以右键 > 打开方式 > Visual Studio Code

来用VSCode打开该文件

• **效果五：**添加到PATH

将VSCode添加到环境变量Path中，可以在控制台（cmd或power shell）中输入code打开VS Code

或者输入

code .

将会在VSCode中打开该文件夹（控制台中显示的路径）

五：等待安装完成

六：安装完成

选择是否立即打开VS Code

使用教程

1、创建一个空文件夹，作为项目目录

2、打开vscode，在文件中选择【打开文件夹】，当然，我们也可以直接将文件夹拖进vscode编辑器

3、在左侧的“资源管理器”能看见我们的项目文件夹，右键它，新建一个html文档

4、我们输入半角感叹号 ! ，接着按下tab键，它将自动生成一个html结构

5、可以在body里编写我们自己的代码

安装插件

VSCode汉化

常用插件(安装步骤同汉化)

• Auto Close Tag (自动闭合HTML/XML标签)
• Auto Rename Tag (自动完成另一侧标签的同步修改)
• Beautify (格式化 html ,js,css)
• Bracket Pair Colorizer(给括号加上不同的颜色，便于区分不同的区块)
• HTML CSS Support (智能提示CSS类名以及id)
• HTML Snippets(智能提示HTML标签，以及标签含义)
• open in browser(右键快速在浏览器中打开html文件)
• Path Intellisense(自动提示文件路径)
• Class autocomplete for HTML(智能提示HTML class =“”属性)

点关注，不迷路，安装了vscode如果想深入学习请点击vscode全网最详细使用教程(下)