安装 Visual Studio Code ​

Visual Studio Code（简称 VS Code ）是 Microsoft 发布的，针对于编写现代Web和云应用的跨平台源代码编辑器，可运行于 Windows ， macOS 和 Linux 系统。它具有对 JavaScript ， TypeScript 和 Node.js 的内置支持，并具有丰富的其他语言（例如 C++ ， C＃ ， Java ， Python ， PHP ， Go ）和运行时（例如 .NET 和 Unity ）扩展的生态系统。

下载 ​

打开 Visual Studio Code 官网

点击 Download for Windows 按钮，浏览器会自动开始下载安装包

安装 ​

双击下载后的文件 VSCodeUserSetup-x64-*.*.*.exe，开始安装

选择 我同意此协议 后，单击 下一步

此处建议将安装目录修改到非系统盘，修改安装目录后，单击 下一步

单击 下一步

单击 下一步

单击 安装 开始自动安装

等待安装完成后，显示如下界面

单击 完成 结束安装，并启用 Visual Studio Code

设置 ​

启动 Visual Studio Code 后，默认显示 Welcome 个性化设置页

单击 Mark Done 完成设置

设置Tab Size ​

如上图，打开设置页面

键入 tabsize 以筛选并显示 Tab Size 设置信息，将其中的默认值 4 修改为 2，保存后关闭文档即可。

安装常用插件 ​

点击界面左侧扩展面板（或快捷键 Ctrl+Shift+X），打开扩展面板，开始安装常用插件

汉化插件 - Chinese ​

搜索 chinese，单击查询结果的 Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code （一般为第一条）的 install 按钮安装汉化插件

设置启用中文，按Ctrl + Shift + P调出“命令选项板”，然后开始键入 display 以筛选并显示 Configure Display Language 命令。按 Enter 键或点击后，将显示语言列表，选择 中文（简体） ，系统将弹出窗口提示重启软件以切换中文语言。点击 Restart ，软件重启后将显示中文界面。

Vue 2 专用插件 - Vetur ​

Vetur 插件是 Vue 2 专用插件， 实现 .vue 文件的语法高亮、自动提示和自动完成等

搜索 vetur，单击查询结果的 Vetur （一般为第一条）的 安装 按钮安装 Vetur 插件

自动闭合HTML标签 - Auto Close Tag ​

搜索 auto close tag，单击查询结果的 Auto Close Tag （一般为第一条）的 安装 按钮安装 Auto Close Tag 插件

同步修改HTML结束标签 - Auto Rename Tag ​

搜索 auto rename tag，单击查询结果的 Auto Rename Tag （一般为第一条）的 安装 按钮安装 Auto Rename Tag 插件

Element UI 辅助 - VSCode Element Helper ​

搜索 element helper，单击查询结果的 vscode-element-helper （一般为第一条）的 安装 按钮安装 VSCode Element Helper 插件