VS Code实用技巧和插件分享(一)
作为一名VS Code的忠实粉丝, 每次更新完却很少细看release notes, 确实不应该~ 今天抽空探索了一番, 结合自己过往的使用经验, 做几点简单的分享~
一. 面包屑导航
在选项卡和编辑区域之间插入了面包屑导航栏breadcrumbs, 可以快速地使用键盘来操作文件切换, 也可以定位到选定的类和方法.(感觉这个功能对html文件似乎更实用, 可以清晰展示Dom嵌套结构, 快速地定位到某个标签)
开启方式: 在User Settings中搜索breadcrumbs.enabled属性, 将值改为true
使用方式: 'Ctrl + Shift + . ' 会出现下拉菜单定位到当前光标所在代码段, 再通过'Ctrl + 左右方向键'来切换文件的上下级目录, 左右方向键来展开当前选中的目录或者是方法. 选中后使用回车键定位到该处(当然也可以直接用鼠标点击面包屑, 不过这样做倒不如直接使用侧边栏文件目录了~)

二. 通过package.json执行脚本
一般情况下启动我们的项目, 需要打开终端, 手动输入命令, 比如各种npm run dev~ npm start~ 但实际上VS Code提供了一键启动的方式.
打开项目的package.json文件, 将鼠标悬停在想要执行的操作上, 如下图示例, 将鼠标悬停到start上, VS Code会展示出Run Script的按钮, 点击之后便会打开VS Code集成的终端, 自动执行命令~

三. 文件比较
以前做文件比较的时候常用Beyond Compare工具, 后来发现VS Code也能完成这样的任务.
使用方式: 右键需要比较的第一个文件, 在菜单中选择Select for Compare, 这样它就被选为了目标文件, 再右键第二个文件, 选择Compare with Selected. 然后就可以查阅异同了~


可以直接在展示页面中做编辑, 原文件也会自动更改的.

四. 书签插件
扩展商店搜索Bookmarks.
安装成功后可以在Keyboard Shortcuts中自由定制快捷键. 如图, 我个人设置了添加/删除书签的按键'Ctrl + Alt + B', 在coding的时候就可以通过这样的组合键给光标所在行添加书签.

添加了书签后, 在左侧的侧边栏里有书签的图标, 点击打开书签栏, 可以方便地管理书签, 也可以直接点击跳转到对应的代码书签处.
给存疑处或未完成处添加书签, 方便以后修改.

五. Code Runner插件
在日常开发中经常需要写一些demo看运行结果, 前端开发者执行js的示例代码时通常会打开浏览器, 在控制台里输入. 但如果是很长一段代码的话, 这样是很不方便的, 理想的方式是本地写好js文件, 在终端用node运行. Code Runner插件提供按钮, 可以一键执行, 代替我们完成打开终端输入命令的操作.
如下图, 安装完插件之后重启, 右上角会出现三角形的按钮, 直接点击会执行该文件, 也可以鼠标选中某段代码, 右键点击Run Code, 就只执行选中的部分, 结果会展示在OUTPUT中. (还很友好地输出了执行时间~)

除了JavaScript之外, 还可以执行Python等其他语言的代码. 都需要在Settings中做相应的配置.

截止本文完成时, VS Code的最新版本1.28.1, 以上介绍也是基于此版本, 供参考.
可能会有后续^_^