[阅 #10] 分享几款超实用的 Visual Studio Code 插件

「阅」——JSCourse 旗下栏目，专门推荐我们为大家精心挑选的优质 JavaScript 相关技术内容

大家好，微软开发的 VSC 编辑器相信不用我多做介绍了，很多 JavaScript 工程师都在用。今天小编就给大家推荐几款非常实用的 Visual Studio Code （以下简称 VSC）插件（小编自己也在用）。

Git Blame

**git blame **首先是个 git 命令，简单来说主要作用是查看一个指定的文件中每一行最近一次提交信息（包括：谁改了、什么时候改的、提交 id 多少、提交日志是什么等等）。这个命令在一个多人协作的项目中是很有帮助的，比如：有的时候我们在看一段别人写的代码，看到了几行代码不明白或者发现某一行别人改过的代码有 bug，但是自己又不理解当时为什么这么写，这个时候这个命令就能够让我们找到某行代码修改的具体信息，还能找到当初的作者去了解更多信息（前提是离职哦）。

这里推荐的 Git Blame 插件就是干这个事情的，当你安装好之后，你打开一个文件，光标移动到任意一行，在编辑器底部就会默认显示谁最后一次修改了这行代码、修改的时间是什么时候等信息（当然你可以通过配置来根据自己的需求修改默认的显示），我们来看下效果：

Git Blame 插件效果演示

IntelliSense for CSS class names

你是不是和小编一样有过这样的经历

当你使用了一个 CSS 代码库（比如：bootstrap），这个时候你在 HTML （或者是 JSX 之类的）想要用这个代码库中定义的 classname （比如：btn-primary），是不是还得去文档中或者是源代码中去到这个类名叫什么，然后再写进去！

如果你也有过这样的经历，那么这款插件—— IntelliSense for CSS class names 就非常适合你。它主要干什么呢？就是当你在 HTML 中引入了一个外部的 CSS 或者它检测到你工作区中的 CSS 文件就会对他们的类名做索引，然后你在 HTML 中想用这些定义的 CSS 类名的时候，它会自动给你提示，就像这样：

IntelliSense for CSS class names 插件效果演示

真的非常有用，再也不需要在文档和编辑器或者多文件之间进行切换来查看类名了！赶紧去试试吧！

Code Runner

Code Runner 这个插件 可以让你直接在编辑器中选中某个文件的某一段执行，非常实用。有的时候我们就想测试下一部分代码运行起来是怎么样的，是否和自己理解的一样，就可以直接用这个插件，选中一段，按下快捷键就能运行起来了，来看看效果：

Code Runner 插件效果展示

这个插件会看你系统的 Path 环境变量去找到你要运行的程序（根据文件后缀名），或者你可以通过配置文件告诉它去哪里找相应的执行文件。

Path Intellisense

这个插件很简单，就是会自动给你提示相关的文件路径，比如：当你在 HTML 通过 script 标签要引入一个文件的时候，你直接在 src 中它就会根据你的输入给你提示目录中有的文件名；或者你通过 node require 一个文件的时候也是一样会给你提示，这样你就不用再去记文件名了，也不会因为文件名拼写错误或者路径层级搞错而发生加载失败的问题了，马上来看效果：

Path Intellisense 插件演示效果

好了，以上就是小编要推荐给大家的几款相当实用的 vsc 插件，应该都会对你平时开发有所帮助，不妨去试试！下期见咯，拜拜！

关注「jscourse」微信公众号获取更多 JavaScript 相关的课程和学习资源！