[L1-1] [a1] VSCode 工具基础

用户8042

2024年9月9日修改

•

Why VSCode?

VSCode（Visual Studio Code）是一个很受欢迎的前端编程 IDE。它具有以下优点：​

1.
开源免费：VSCode 是免费的，并且是开源项目，由微软维护。​

2.
跨平台：支持 Windows、macOS 和 Linux 操作系统。​

3.
强大的扩展性：拥有丰富的插件库，可以根据需求定制开发环境。​

4.
高性能：启动速度快，占用资源少，适合长时间编程使用。​

5.
智能提示：提供代码补全、错误提示等智能功能，提高编程效率。​

市面上适合开发前端代码的 IDE 有很多，但我们没必要全部了解。IDE 只是辅助我们编码的工具，了解和掌握一个优秀的 IDE 就足够了。VSCode 正是这样一个值得深入学习和使用的 IDE。通过学习和掌握 VSCode，可以大大提升开发效率和编码体验。​

安装 VSCode

访问 VSCode 官网，下载适合自己操作系统的安装包。

认识 VSCode

VSCode的界面介绍：

1.
活动栏（Activity Bar）：位于左侧，包括资源管理器、搜索、源代码管理、调试和扩展等功能。​

2.
侧边栏（Side Bar）：显示活动栏中选择的功能的详细信息。​

3.
编辑器区（Editor）：主工作区域，用于编写和编辑代码。​

4.
面板（Panel）：显示终端、输出、调试控制台和问题等信息。​

创建网页文件

•

基础插件 & 基础快捷键

•

最后扩展学习

看官方文档介绍

VSCode官方的文档对于VSCode的介绍是比较详尽的，但是文档是英文的，没有提供中文的版本，建议英文能力比较强的同学可以阅读查询。​

也有一些第三方提供的中文版的文档，但是可能在翻译上不是那么精准，如果遇到奇怪的翻译可以对照一下原版的文档。​

这里提供3篇Vscode入门的文档介绍：

英文版：

中文版：

研究快捷键

掌握 VSCode 的快捷键可以大幅提升编码效率和体验。以下是一些常用的 VSCode 快捷键和它们的功能。（注意在MacOS下，Ctrl换成⌘Command键）​

文件管理

•
快速打开文件：Ctrl + P​

[L1-1] [a1] VSCode 工具基础​