前言

你好，我是云桃桃。

在过去的 10 年里，我一直专注于 web 前端开发领域，积累了丰富的经验和知识。

所以，接下来，我会把自己所学所做给体系化输出，我将持续与你分享关于 HTML、CSS、JavaScript，HTML5，CSS3 以及 Vue 等方面的知识。

在这个系列课程中，我将带你逐步深入了解前端开发的基础核心技术。无论你是零基础入门，还是希望巩固已有知识，我都会尽力以简单易懂的方式来讲解这些概念和技术。

无论你是想转行成为前端开发工程师，还是想提升自己的技能水平，这个系列课程都将为你提供实用的资源。

工欲善其事，必先利其器。​今天主要就聊聊开发工具吧。市面上有很多开发工具，比如，Visual Studio Code (VS Code)，Sublime Text ，notepad++, Hbuilder, WebStorm。

我比较推荐的是 vscode，相比其他 2 者，VS Code 完全免费，具有更低的学习门槛、更丰富的插件生态和更高的灵活性，因此更适合新手入门和个人开发者使用。

那现在，就来跟我一起详细了解一下 vscode 吧。

工具使用

1. 软件安装

官网：https://code.visualstudio.com/，VS Code 是由微软开发的免费、开源的现代化代码编辑器，拥有丰富的功能和强大的生态系统。它有以下 4 点好处：

1）提供了丰富的插件和扩展，可以根据个人需求自定义功能，满足不同开发场景的需求。

2）内置了终端工具，可以在编辑器中直接运行命令，无需额外打开终端窗口，方便进行命令行操作和项目管理。

3）它还支持丰富的主题和定制选项，可以根据个人喜好调整编辑器的外观和行为，使得开发环境更加舒适和个性化。

4）当然，它还支持 Windows、macOS 和 Linux 等多个操作系统。

1. 界面认识

如下图所示。我们当下常用的就是文件资源区，以及插件区了。

• 文件资源区：我们可以在本地新建一个文件夹拖入过来，在此就可以敲代码了。

• 插件区：主要是用来安装一些扩展来提升效率，服务敲代码的。例如添加新的语言支持、自动完成、代码片段、主题、调试器等。

1. 把界面设置成中文

   可能很多英语不太好的同学看到全英文，都有点懵了。不用慌，我们可以设置成中文模式。怎么做呢，通过安装插件。首先，点上图“插件区”的那个图标，然后搜索，找到如图所示的，点击其右侧的 install。安装一下。

   

   等待 n 秒，安装成功以后，右下角会如图所示，点击按钮重启即可。

   

   菜单栏，文件区等，就变成中文的啦。

   所有的 vscode 的插件安装，都可以通过这种形式，这是一种最方便的安装方式。

2. 学会安装插件

   当然，我这里也推荐几个简单的插件，你可以自行搜索试着安装一下：

   • HTML CSS Support：提供 HTML 和 CSS 的智能提示、自动完成和代码片段。

   • Auto close Tag: 在输入 HTML 或 XML 标签时自动闭合标签。

   • Auto Rename Tag：自动重命名 HTML/XML 标签的插件，避免手动修改开始和结束标签。

   • Bracket Pair Colorizer：为代码中的括号添加颜色，帮助快速识别匹配的括号。

   • Color Highlight：可以在代码中直观地显示颜色的实际效果，方便开发者在编写 CSS 或其他样式文件时快速了解颜色的呈现方式。

   • vscode-icons: Visual Studio Code 的图标主题插件，用于为文件和文件夹添加自定义图标以提高可视化效果。

   • github Theme: 可以给 vscode 换肤,有多种明暗模式。

除了在软件内安装，其次，还可以通过 vscode 官网的插件市场，https://marketplace.visualstudio.com/VSCode ，来安装。

ok，以上，就是今天的内容了。