VS Code实用技巧和插件分享(一)

2018-10-12 本文已影响313人 Joo222

作为一名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集成的终端, 自动执行命令~

package.json快捷执行命令

三. 文件比较

以前做文件比较的时候常用Beyond Compare工具, 后来发现VS Code也能完成这样的任务.

使用方式: 右键需要比较的第一个文件, 在菜单中选择Select for Compare, 这样它就被选为了目标文件, 再右键第二个文件, 选择Compare with Selected. 然后就可以查阅异同了~

选择第一个文件

选择第二个文件

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

展示比较结果

四. 书签插件

扩展商店搜索Bookmarks.

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

Bookmarks插件快捷键设置

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

给存疑处或未完成处添加书签, 方便以后修改.

Bookmarks使用图示

五. Code Runner插件

在日常开发中经常需要写一些demo看运行结果, 前端开发者执行js的示例代码时通常会打开浏览器, 在控制台里输入. 但如果是很长一段代码的话, 这样是很不方便的, 理想的方式是本地写好js文件, 在终端用node运行. Code Runner插件提供按钮, 可以一键执行, 代替我们完成打开终端输入命令的操作.

如下图, 安装完插件之后重启, 右上角会出现三角形的按钮, 直接点击会执行该文件, 也可以鼠标选中某段代码, 右键点击Run Code, 就只执行选中的部分, 结果会展示在OUTPUT中. (还很友好地输出了执行时间~)

Code Runner使用图示

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

Code Runner各语言的配置默认值

截止本文完成时, VS Code的最新版本1.28.1, 以上介绍也是基于此版本, 供参考.

可能会有后续^_^