前端Visual Studio Code的正确使用姿势

Visual Studio Code自微软发布以来广受程序员们的好评，到目前为止已经登顶世界第一开发工具的荣耀。今天我们就来讲一下VSCode在前端的正确使用姿势。

插件安装

我们在开发前端项目时，一定会用到像React、Vue这类前端框架，为了让VSCode准确识别这且框架的排版语法，我们通常会安装相关框架的辅助插件，比如Vue高亮格式化插件Vetur，经过简单的配置就可以达到方便阅读的效果。

不仅如此，VSCode插件商城存在成千上万个插件，你总能在里面找到合适你项目的辅助插件，他们可以让开发效率达到一个事半功倍的效果。

图中标红区域为插件市场

项目命令快捷入口

VSCode可以自动识别我们的工程项目类型，这里以前端项目为例，当我们导入工程后，在资源管理器的最底部通常会显示npm项目的所有命令，我们可以一键运行相关命令。如下图：

图中标红位置为项目的npm命令

预览大纲

当我们点击某个代码文件时，VSCode会自动识别当前文件内的所有代码，并归类罗列到资源管理器的大纲里面，我们可以通过大纲快速的定位到具体的代码，非常方便，阅读代码的利器。

图中标红位置为右侧代码的预览大纲

Todo

Todo并不是VSCode的原始功能，它需要安装一个插件才能使用，VSCode Store中有很多Todo相关的插件，可以根据自己的要求安装一个。当我们在项目中通过Fixed、Todo等标签给某个代码块进行标记后，Todo插件会把我们的任务罗列出来，方便开发者清楚地知道哪里的代码待处理，哪里的代码不是最优解决方案。

图中标红为当前项目的所有Todo任务

工作区

工作区在VSCode中是一个很重要的功能，它可以把我们不用位置的项目集中在一个工作区里面（不会移动原有代码），方便我们快速查看项目，你可以把它理解成一个虚拟的归纳器。

项目使用过程中，我们可以把常用的工作区保存下来，下次使用时只需要选择需要加载的工作区配置文件，即可得到上次的工作区。

图中标红区域为一个临时的工作区

以上内容，你学到了么？