分享
[L1-1] [a1] VSCode 工具基础
输入“/”快速插入内容
[L1-1] [a1] VSCode 工具基础
用户8042
用户8042
2024年9月9日修改
•
【文章】
拥抱 VSCode:你的前端开发利器!
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):显示终端、输出、调试控制台和问题等信息。
创建网页文件
•
【视频】
黑马教程P10-VSCode工具创建页面
基础插件 & 基础快捷键
•
【视频】
黑马教程P11-VSCode插件安装以及快捷键
最后扩展学习
看官方文档介绍
VSCode官方的文档对于VSCode的介绍是比较详尽的,但是文档是英文的,没有提供中文的版本,建议英文能力比较强的同学可以阅读查询。
也有一些第三方提供的中文版的文档,但是可能在翻译上不是那么精准,如果遇到奇怪的翻译可以对照一下原版的文档。
这里提供3篇Vscode入门的文档介绍:
英文版:
1.
tips-and-tricks
2.
user interface
3.
source control
中文版:
1.
技巧和窍门
2.
用户界面
3.
源代码控制
研究快捷键
掌握 VSCode 的快捷键可以大幅提升编码效率和体验。以下是一些常用的 VSCode 快捷键和它们的功能。(注意在MacOS下,Ctrl换成⌘Command键)
文件管理
•
快速打开文件
:
Ctrl + P