VS Code ：下载、安装、常用插件、工作空间概念、运行html

前端开发工具

VSCode
HBuilder
sublime
WebStorm

VS Code

一、介绍

Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。
VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。
VS Code 提供了非常强大的插件库，大大提高了开发效率。
官网： https://code.visualstudio.com

注意事项：

作为一名软件开发工程师，建议以后安装所有与开发相关的软件，尽量安装在一个没有中文，不带空格的目录下。

二、下载

进入VS Code官网：https://code.visualstudio.com，点击 DownLoad for Windows下载windows版本

在这里插入图片描述

当然也可以点击旁边的箭头，下载Windows版本或 Mac OS 版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k7Djm0FM-1687272646500)(assets/image-20220913194235945.png)]

Stable：稳定版
Insiders：内测版

三、安装

在这里插入图片描述
双击安装包，选择我同意此协议，再点击下一步

在这里插入图片描述

选择安装路径，点击下一步 。也可以使用默认值: C:\Users\super\AppData\Local\Programs\Microsoft VS Code

在这里插入图片描述

继续点击下一步

在这里插入图片描述
可以勾选创建桌面快捷方式，如果不想使用vscode作为代码默认打开方式，可以取消将code注册为受支持的文件类型的编辑器，点击下一步

在这里插入图片描述

点击安装，开始安装

在这里插入图片描述

安装完成，运行VS Code。

在这里插入图片描述

四、VS Code插件安装

在这里插入图片描述
VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。

完成前端开发，常见插件介绍：

1、Chinese (Simplified) Language Pack

适用于 VS Code 的中文（简体）语言包

在这里插入图片描述

不想要了可以点击设置进行卸载。

在这里插入图片描述

2、Code Spell Checker

拼写检查器。比如 banana 单词写错成 banane ，会提示你是否修改成 banana ，也可以将 banane 添加至检查器的字典中。

在这里插入图片描述

3、HTML CSS Support

在编写样式表的时候，自动补全功能大大缩减了编写时间。

在这里插入图片描述

4、JavaScript (ES6) code snippets

支持ES6语法提示

在这里插入图片描述

5、Mithril Emmet

一个能大幅度提高前端开发效率的一个工具，用于补全代码

在这里插入图片描述

6、Path Intellisense

路径提示插件

在这里插入图片描述

7、Vue 3 Snippets

在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。

在这里插入图片描述

8、VueHelper

vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码

在这里插入图片描述

9、Auto Close Tag

自动闭合HTML/XML标签

在这里插入图片描述

10、Auto Rename Tag

自动完成另一侧标签的同步修改

在这里插入图片描述

11、Beautify

格式化 html，js，css

在这里插入图片描述

安装过程中, 如果提示是否需要继续安装, 选择 “仍要安装”。

12、Bracket Pair Colorizer

给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

在这里插入图片描述
安装过程中, 如果提示是否需要继续安装, 选择 “仍要安装”。

13、open in browser

vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

在这里插入图片描述

14、Vetur

Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

在这里插入图片描述

15、File Utils

File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。

在这里插入图片描述

16、IntelliJ IDEA Keybindings

安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。

在这里插入图片描述

17、vscode-icons 文件显示图标插件

可以根据你创建文件扩展名的不同，来显示不同文件的小图标

18、Live Server（重要）

实时加载功能的小型服务器
详情解释查看：八-运行项目

五、VS Code 配置（自动保存）

打开配置面板，根据自己的喜好，可以修改字体、背景样式等偏好设置

在这里插入图片描述

设置字体: 齿轮>search>搜索 “字体大小”
设置字体大小可以用滚轮控制: 齿轮>设置>搜索 “Mouse Wheel Zoom”
设置左侧树缩进: 齿轮>设置>搜索 “树缩进”
设置文件夹折叠: 齿轮>设置>搜索 “compact” 取消第一个勾选
设置编码自动保存: 齿轮> 设置> 搜索 “Auto Save” ,选择为"afterDelay"

六、VS Code 快捷键

在这里插入图片描述

七、准备工作空间

1. 创建工作空间

使用VS Code开发代码之前，建议大家不要把VS Code代码在磁盘目录上乱放，应该为VS Code所开发的代码专门准备一个专用的目录。
通常不直接使用这个目录而是在里面在创建一层，因为未来可能做很多不同的项目，每个项目在准备一个单独的子目录，这样的话可以区分的更明确一些。
- atguigu-all：存放学习尚硅谷课程的所有资料。
- heima-all：存放学习黑马课程的所有资料。
直接用vscode打开某个目录即可直接将某个目录作为项目代码存放的根目录
信任此目录
效果

2. 在工作空间下创建目录和文件

创建好的根目录atguigu-all，也不是直接把这些零散的html、css、js文件放在此目录，这样太不利于管理了，可以在这个父目录中创建一个个的子目录来代表一个个单独的前端工程。
在html中，输入" ! " 并回车即可快速出现html的基本结构
- 默认ctrl+s手动保存
- 可以设置为自动保存：查看 VS Code 配置