1.3 VScode 下载安装教程

---

---

1.简介

VSCode（全称：Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全（又称 IntelliSense）、代码重构、查看定义功能，并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。

VS Code 使用 Monaco Editor 作为其底层的代码编辑器。

在 2019 年的 Stack Overflow 组织的开发者调查中，Visual Studio Code 被认为是最受开发者欢迎的开发环境。

Visual Studio Code 默认支持非常多的编程语言，包括 JavaScript、TypeScript、CSS 和 HTML；也可以通过下载扩展支持 Python、C/C++、Java 和 Go 在内的其他语言。支持功能包括语法高亮、括号补全、代码折叠和代码片段；对于部分语言，可以使用 IntelliSense。Visual Studio Code 也支持调试 Node.js 程序。和 GitHub 的 Atom一样，Visual Studio Code 也基于 Electron 框架构建。

Visual Studio Code 支持同时打开多个目录，并将信息保存在工作区中以便复用。

作为跨平台的编辑器，Visual Studio Code 允许用户更改文件的代码页、换行符和编程语言。

2.VScode下载

• VScode 官网地址：https://code.visualstudio.com/
• VScode 官方文档地址：https://code.visualstudio.com/docs

我们可以在 VScode 官网首页下载对应系统（支持Windows、Linux、macOS）的软件

点击下拉图标：

你也可以打开下载页面 https://code.visualstudio.com/download，下载想要的格式包：

3.VScode安装

VSCode 安装很简单，macOS 下载 zip 解压后就能使用。

本章节我们以 Windows 为例下载安装包，然后双击打开安装包，点击同意此协议，并点击下一步：

选择安装路径，并选择下一步（也可以使用默认路径，路径中最好不要出现中文，我这里只做演示，所以建立中文文件夹）：

确认快捷方式创建位置，直接点击下一步即可：

建议勾选下列全部选项（我喜欢空无一物的桌面，所以没有创建桌面快捷方式），然后点击下一步：

最后我们点击安装等待其安装完成即可：

4.界面说明

首次进入界面后可以选择你喜欢的主题风格，点击“See More Themes…”可以有更多选择，其界面如下图所示：

之后再次打开程序，将会呈现以下的界面：

上图是常用功能介绍。

5.安装汉化包

VScode 安装汉化包很简单，打开 VScode，点击安装扩展，在搜索框输入 Chinese，然后点 Install 就可以：

安装后重新启动即可。

6.VScode使用

vscode深入大家习惯的原因就是其提供插件的可拓展性很高，其使用体验很大程度决定于你对其的定制化程度。

6.1 常用插件推荐

6.1.1 配置类插件

1. Settings Sync

最好用的插件，没有之一，一台电脑配置好之后，其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了，

使用GitHub Gist同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工作区和扩展。

2. Debugger for Chrome

从VS Code调试在Google Chrome中运行的JavaScript代码。

用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的VS Code扩展。

3. beautify

格式化代码工具

美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码。

4. Atuo Rename Tag

修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改

5. 中文（简体）语言包

Chinese (Simplified) Language Pack for Visual Studio Code

将界面转换为中文，对英语不好的人，非常友好。其包由官方提供，整体稳定性特别强，不会出现其它开发软件的兼容问题。

6. Code Spell Checker

代码拼写检查器

一个与camelCase代码配合良好的基本拼写检查程序。

此拼写检查程序的目标是帮助捕获常见的拼写错误，同时保持误报数量较低。

7. guides

显示代码对齐辅助线，很好用

8. Rainbow Brackets

为圆括号，方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员，当然还有JavaScript和其他程序员特别有用。

效果如下：

9. Bracket Pair Colorizer

用于着色匹配括号

10. Indent-Rainbow

用四种不同颜色交替着色文本前面的缩进

11. filesize

在状态栏中显示当前文件大小，点击后还可以看到详细创建、修改时间

12. Import Cost

对引入的计算大小

13. Path Intellisense

可自动填充文件名。

14. WakaTime

从您的编程活动自动生成的度量标准，见解和时间跟踪。

15. GitLens

git日志查看插件

GitLens 增强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索，历史记录和和查看代码作者身份，还能通过强大的比较命令获得有价值的见解等等

16. REST Client

REST客户端允许您直接发送HTTP请求并在Visual Studio Code中查看响应。

17. Npm Intellisense

用于在 import 语句中自动填充 npm 模块

require 时的包提示（最新版的vscode已经集成此功能）

6.1.2 代码提示类插件

1. HTML Snippets
   完整的HTML代码提示，包括HTML5
   

2. HTML CSS Support
   在 html 标签上写class 智能提示css样式
   

3. jQuery Code Snippets
   jQuery代码提示

超过130个用于JavaScript代码的jQuery代码片段。

只需键入字母’jq’即可获得所有可用jQuery代码片段的列表。

4. HTMLHint
   html代码检测，支持html5
   

6.1.3 语言类插件

1. C＃
   适用于.NET Core的轻量级开发工具。
   伟大的C＃编辑支持，包括语法突出显示，智能感知，转到定义，查找所有引用等。
   调试支持.NET Core（CoreCLR）。注意：不支持单声道调试。桌面CLR调试支持有限。
   支持Windows，macOS和Linux上的project.json和csproj项目。

2. CodeMetrics
   计算TypeScript / JavaScript文件的复杂性。

3. VUE插件

• vetur 　　 语法高亮、智能感知、Emmet、vue提示等
  　　

• VueHelper 　　snippet代码片段
  

6.2 VS code使用入门

使用VS code的第一步就是在你的电脑中新建一个项目文件夹，如果是win10以上的windows电脑，我推荐在OneDrive文件夹下创建，这样可以在所有windows平台同步代码，公司、家里代码同步。例如我新建的vscode文件夹：

下一步就是在VS code中打开项目文件夹，在左上角文件菜单中单击打开文件夹，或按快捷键ctrl+k+o。

这里会弹出信任文件夹的提示，我们选择信任，否则其中的代码可能无法运行。

之后就可以在左边的资源管理器上新建项目子文件夹和代码文件了，我们新建html文件，所以文件名后缀为.html：

接下来就可以正式在vscode中编写代码了。