星球狂想战队|前端Visual Studio Code的正确使用姿势

Visual Studio Code自微软发布以来广受程序员们的好评 , 到目前为止已经登顶世界第一开发工具的荣耀 。 今天我们就来讲一下VSCode在前端的正确使用姿势 。
插件安装
我们在开发前端项目时 , 一定会用到像React、Vue这类前端框架 , 为了让VSCode准确识别这且框架的排版语法 , 我们通常会安装相关框架的辅助插件 , 比如Vue高亮格式化插件Vetur , 经过简单的配置就可以达到方便阅读的效果 。
不仅如此 , VSCode插件商城存在成千上万个插件 , 你总能在里面找到合适你项目的辅助插件 , 他们可以让开发效率达到一个事半功倍的效果 。
星球狂想战队|前端Visual Studio Code的正确使用姿势图中标红区域为插件市场
项目命令快捷入口
VSCode可以自动识别我们的工程项目类型 , 这里以前端项目为例 , 当我们导入工程后 , 在资源管理器的最底部通常会显示npm项目的所有命令 , 我们可以一键运行相关命令 。 如下图:
星球狂想战队|前端Visual Studio Code的正确使用姿势图中标红位置为项目的npm命令
预览大纲
当我们点击某个代码文件时 , VSCode会自动识别当前文件内的所有代码 , 并归类罗列到资源管理器的大纲里面 , 我们可以通过大纲快速的定位到具体的代码 , 非常方便 , 阅读代码的利器 。
星球狂想战队|前端Visual Studio Code的正确使用姿势图中标红位置为右侧代码的预览大纲
Todo
Todo并不是VSCode的原始功能 , 它需要安装一个插件才能使用 , VSCode Store中有很多Todo相关的插件 , 可以根据自己的要求安装一个 。 当我们在项目中通过Fixed、Todo等标签给某个代码块进行标记后 , Todo插件会把我们的任务罗列出来 , 方便开发者清楚地知道哪里的代码待处理 , 哪里的代码不是最优解决方案 。
星球狂想战队|前端Visual Studio Code的正确使用姿势图中标红为当前项目的所有Todo任务
工作区
工作区在VSCode中是一个很重要的功能 , 它可以把我们不用位置的项目集中在一个工作区里面(不会移动原有代码) , 方便我们快速查看项目 , 你可以把它理解成一个虚拟的归纳器 。
项目使用过程中 , 我们可以把常用的工作区保存下来 , 下次使用时只需要选择需要加载的工作区配置文件 , 即可得到上次的工作区 。
星球狂想战队|前端Visual Studio Code的正确使用姿势【星球狂想战队|前端Visual Studio Code的正确使用姿势】图中标红区域为一个临时的工作区
以上内容 , 你学到了么?