一、Visual Studio Code 安裝

VS Code 下载地址：https://code.visualstudio.com/

windows系统的快速下载地址：https://vscode.cdn.azure.cn/stable/441438abd1ac652551dbe4d408dfcec8a499b8bf/VSCodeUserSetup-x64-1.75.1.exe

macOS系统的快速下载地址：https://vscode.cdn.azure.cn/stable/441438abd1ac652551dbe4d408dfcec8a499b8bf/VSCode-darwin-universal.zip
 

链接：https://pan.baidu.com/s/1fXYMzqN-KlMB4VZqOSoVOQ?pwd=8nn0 
提取码：8nn0

二、插件安裝

1. 安装浏览器插件，用于访问html页面，在 扩展栏 的搜索框中输入 open in browser

使用 Alt + B 使用默认浏览器打开当前 html 页面，或 Shift + Alt + B 选择其他浏览器
2. 安装 volar 插件，它提供了 Vue 单文件组件中的 TypeScript 支持，有语法高亮、智能感知等特性（如果之前安装了vue2的插件Vetur，一定要禁用掉）

TypeScript Vue Plugin 用于支持在 TS 中 import *.vue 文件。

Auto Rename Tag —— 自动完成另一侧标签的同步修改

Path Intellisense —— 自动路径补全

HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式，安装后有快捷提示

Element Plus Snippets —— 饿了么发布的Vue 3组件库

Chinese (Simplified) —— 汉化 VSCode

三、常用快捷键

官方快捷键：https://code.visualstudio.com/docs/getstarted/keybindings

快捷键pdf文档：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

快捷键 作用

Ctrl + Shit + F 会激活这个工具栏的全局搜索功能

Ctrl + F 局部搜索, 搜索当前文件中的内容

Ctrl + G 输入行号可以跳转到指定的行

! + Tab 空白html文件里输入一个英文感叹号 ！ ，然后按 Tab 键会生成html模板页面 元素或属性名+Tab 会自动生成

Shift + Alt + F 格式化代码

ctrl+/ 单行注释

shift+alt+A 多行注释

alt+up/down 移动行

shift + alt +up/down 复制当前行

ctrl + b 显示/隐藏左侧工具栏

shift + ctrl + k 删除当前行

ctrl + x 剪切当前行或剪切选中内容

ctrl + ~ 控制台终端显示与隐藏

F2 重命名文件名