第三章 Visual Studio Code

第三章 Visual Studio Code

3.1 概述

Visual Studio Code 是一个轻量级但功能强大的源代码编辑器，可在桌面上运行，适用于 Windows、macOS 和 Linux。它内置了对 JavaScript、TypeScript 和 Node.js 的支持，并为其他语言和运行时（如 C++、C#、Java、Python、PHP、Go、.NET）提供了丰富的扩展生态系统。

3.2 安装

1. 下载安装程序。

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

   

2. 运行下载的软件，进行安装。

   

   安装时建议选中的三项：

   • 第一项：在桌面上会建立一快捷方式。

   

   • 第二项：在任一文件上，点击鼠标右键，会出现如图所示快捷菜单，点击即可启动 Visual Studio Code 并打开该文件。

   

   • 第三项：在任一文件夹内，点击鼠标右键，会出现如图所示快捷菜单，点击即可启动 Visual Studio Code 并打开该文件夹。

   

3.3 设置

3.3.1 自动保存

开启自动保存文件（不需要手动按 Ctrl + S 保存）。

相当于：

1. 点设置按钮

   

2. 选择 afterDelay 选项

   

   在 files.autoSave 的下拉菜单中有以下几个选项：

   • off：关闭自动保存功能。
   • afterDelay：在固定的延迟时间之后自动保存，在 files.autoSaveDelay 中可以设置延迟时间。
   • onFocusChange：当编辑器失去焦点时自动保存。
   • onWindowChange：当窗口失去焦点时自动保存。

3.3.2 设置默认终端

按图示进行操作

3.3.3 插件安装

• EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

• Prettier 代码格式化工具。

• Auto Rename Tag 修改 html 标签时，自动完成尾部闭合标签的同步修改。

• Auto Close Tag 插入标签时，自动闭合 HTML 标签。

• volar 不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能。

  使用时需禁用 Vetur 插件，Volar 与它会有冲突。

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

• ESLint 检查 javascript 语法错误与提示。

• Open in browser 打开默认浏览器。

• HTML CSS Support 在 HTML 标签上写 class 智能提示当前项目所支持的样式。

• Path Intellisense 自动路径补全。

• Element Plus Snippets Element Plus 代码片段。

• Vscode-icons 让 vscode 资源目录加上图标。

• Rainbow Brackets 彩虹括号。

3.3.4 快捷键

官方快捷键：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	重命名文件名