星球狂想战队|前端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中是一个很重要的功能 , 它可以把我们不用位置的项目集中在一个工作区里面(不会移动原有代码) , 方便我们快速查看项目 , 你可以把它理解成一个虚拟的归纳器 。
项目使用过程中 , 我们可以把常用的工作区保存下来 , 下次使用时只需要选择需要加载的工作区配置文件 , 即可得到上次的工作区 。
【星球狂想战队|前端Visual Studio Code的正确使用姿势】图中标红区域为一个临时的工作区
以上内容 , 你学到了么?
- 大河客户端|布局战队,导师各有妙招,《2020中国好声音》收视率蝉联第一
- 周到|“好声音”蝉联省级卫视综艺节目收视第一,首迎抢位战导师布局战队各有妙招
- 通天战队|A股最励志闻泰科技!给华为小米打工到半导体巨头,半年赚17亿
- |《街舞3》火舞台battle开启 钟汉良战队团魂之力势不可挡
- |《这!就是街舞》第三季火舞台热力喷发,队长领衔齐舞大秀燃炸战队之魂
- 时尚狂想曲|巴洛克风格衬衫搭配印花裙,杨紫挑战复古风,网友评价不一
- 时尚狂想曲|迪丽热巴入选亚洲最美面孔,抹胸衫配格纹裤,秀初秋风情
- 巅峰战队|ConcurrentHashMap的部分源码分析
- 环球网|美海军陆战队一架CH-53E紧急迫降 未造成人员伤亡
- “蓝星球”科幻电影周亮相威尼斯电影节