Microsoft Visual Studio Code

软件介绍

Visual Studio Code（简称“VS Code”）是微软推出的编写现代Web和云应用的跨平台源代码编辑器，可运行在Mac OS、Windows和Linux上。

VSCode安装及配置

Visual Studio Code的安装过程十分简单，按安装提示一步一步操作即可，本文以Windows为例向您介绍Visual Studio Code的详细安装步骤：

1. 双击安装包

2. 勾选我同意此协议，单击下一步。

   

3. 选择安装目录，单击下一步。

   

4. 保持默认，单击下一步。

   

5. 勾选以下几个附加任务，单击下一步。

   

6. 单击安装。

   

7. 等待安装完成。

   

   

   

8. 安装完成后默认是英文的，可以安装简体中文扩展，请参考。

9. 从资源管理器导入我们的项目。

   

   
   

10. 可以看到导入文件夹的话会将文件夹和其下的html文件一块导入进来。
    

11. 单击html文件即可进行编辑

    

12. 作为一款强大的编辑器，VSCode支持编辑html文件的同时看到网页样式，该功能由扩展（插件）Live Server实现，请参考。

Visual Studio Code配置

推荐插件安装

Chinese (Simplified) ：Visual Studio Code简体中文扩展

Visual Studio Code安装完成默认是英文界面，对于不是很擅长英文的同学可以选择安装中文扩展：

1. 打开VS Code左边栏的扩展按钮，搜索Chinese，单击Install。

   

2. 安装完成之后，需要重启VS Code生效，单击右下角的Restart。

   

   

Live Server：实时加载动静态页面

功能：VSCode通过安装Live Server扩展，可以实现保存代码后浏览器自动同步刷新，即时查看网页效果。

1. 打开VSCode左侧扩展栏，搜索找到Live Server，单击安装即可。

   

2. 安装完成后，打开html文件，在代码编辑处单击鼠标右键，可以看到有一个选项：Open with Live Server，单击。

   

3. 可以看到打开的html页面是以一个服务器地址的形式打开的（区别于从本地磁盘打开的html页面）。

   

   

4. 测试下VSCode安装了Live Server扩展后的效果。

   输入一行代码，Ctrl+S保存后，即可实时看到页面效果：

   

5. 但这种情况貌似还是有点麻烦，每次修改完代码后仍然需要手动保存，能不能实现编辑完代码的同时就能看到HTML页面效果呢？答案是可以的，需要通过VSCode来进行设置：

   1. 打开文件 > 首选项 > 设置。

      

   2. 将Files:Auto Save设置为afterDelay，表示在一定延迟后自动保存HTML代码。

      

   3. 此时可以看到，一边写代码可以同时看到HTML网页效果。

      

Microsoft Visual Studio Code（VSCode）安装程序不能创建目录？

1. 学习前端的同学，都会用到微软开发的工具visual studio code，然而在安装第一步就遇到了麻烦，安装时提示：安装程序不能创建目录"D:\Program Files\vscode\Microsoft VS Code"。错误5：拒绝访问。

   

2. 出现这个问题的原因是VS安装程序没有权限在指定磁盘创建目录，需要找到安装程序，右键选择以管理员身份运行：

   

3. 单击确定即可。