前端编程利器VS Code

前言

先来个icon镇楼 ^_^

前端同学使用的编辑器可选范围非常广泛。

最开始接触到前端的时候,听说了Dreamweaver这么一个强大的软件,但严格意义上讲,这不能算作一个编辑器。后来认识了NotePad++,在当时,这确实是一款非常好用的编辑器,语法高亮的友好度仅次于IDE,而且占用内存小,运行非常流畅。

再然后,有人推荐Sublime。我用的时候,还是Sublime 2,最吸引我的是它的mini map,拖动mini map快速浏览大段大段的代码,比拖动小小的滑块酸爽很多呀。再加上后来安装的各种插件,感觉我进入了一个全新的世界,Sublime才是我最想用的编辑器呀!

工作之后,听说大家都在用webstorm,于是我也安装了一个试试,功能确实强大,特别它自带的git管理以及编辑器内部打开terminal的功能,非常适合前端开发。但是,功能强大的webstorm太过于笨重,每次打开的时候都要等一会儿,占用内存太高,同时开启两个项目的时候,电脑就会特别卡,非常影响写代码的心情,而且,webstorm是收费软件,用了一段时间之后果断放弃。

这时,我尝试了一款觊觎已久的酷炫编辑器 Atom。用了Atom之后,我才知道了什么叫酷炫!Sublime算什么,我再也不要用那个丑丑的Sublime了。基于Electron)(最初以Atom Shell知名)和许可使用Chromium和Node.js的跨平台应用框架,并使用CoffeeScriptLess)编写。Atom不但酷炫而且强大,因为有着活跃的社区,所以插件非常多,除了满足开发的刚需之外,还有很多想都想不到的插件。但是但是,美中不足的是Atom太卡了,而且用的时候偶尔还会崩溃。坚持用了一个月,最后实在受不了,我又换回Sublime了,但是心中很不甘啊!

当时我就想着,如果有一款编辑器可以像Sublime一样流程同时又像Atom一样酷炫该有多好。于是,我遇到了VS Code。VS Code刚刚发布Beta版时我尝试着用过一次,当时还不稳定,社区也不完善,插件更是贫乏,所以没留下好印象。这次重新尝试,是因为听说它和Atom一样,也是通过Electron编写的,我想,至少可以像Atom一样酷炫吧。试用之后才发现,原来这才是我一直苦苦寻找的理想编辑器呀!

特性

我强烈推荐VS Code的原因是它有以下几大特点:

  • 酷炫 和Atom一样采用Electron框架编写,整个软件其实就是一个WebAPP,样式深度定制,酷炫到超乎你想象。如果觉得还不过瘾,可以自己编写theme插件,满足你的各种癖好。
  • 轻量 虽然同样是采用Electron框架编写,但是VS Code和Atom走了不同的路线。Atom从一开始就把插件化架构摆在第一位,所以,Atom中最重要的是灵活而又完备的API,性能则不那么重要。VS Code则是把用户体验放在第一位,高性能、更能丰富才是它的首要目的,所以,一开始VS Code的插件系统很糟糕。但是VS Code的性能绝对高出Atom一个档位。
  • 开源 继承了Electron的良好基因。
  • 跨平台 依然是继承了Electron的良好基因。
  • 丰富的插件 虽然不如Sublime和Atom数量多,但现在已经有越来越多的插件涌入。
  • 活跃的社区 得益于Electron和Atom,VS Code的社区也是非常的活跃,更加快了插件生态的繁荣。

自带功能

Emmet

VS Code不需要安装插件,自身就实现了Emmet,默认就是打开的。

智能感知

VS Code本身自带JS代码提示和自动补全功能,当然,如果你觉得不够用,还可以安装各种intelligence或者snippets插件来满足需求。

JS智能提示

Format Document

对于压缩的代码,或者格式不够规范的代码文件,可以通过这个命令一键格式化代码。当然,这个功能是每个编辑器应该都有的,并不是亮点。

Fromat Document

Auto Save

自动保存功能也是大部分优秀的编辑器应该必备的。我认为VS Code里做的比较人性化的一个点是,它的设置选项里提供了四种自动保存的时机供我们选择:offafterDelayonFocusChange(编辑器失去焦点)、onWindowChange(窗口失去焦点)。如果设置为afterDelay,则可在 files.autoSaveDelay 中配置延迟。我比较喜欢onWindowChange

Auto Save

Terminal

VS Code自带打开Terminal的功能,这是Atom和Sublime所不具备的。这也算是VS Code的一大亮点。

Terminal

插件推荐

接下来,推荐一些我用到过的非常实用的插件,帮助你编程时候事半功倍!

Git History

Git History

可以查看一个文件的所有提交记录,同时还可以调出一个可视化的界面展示文件的提交记录,是git log的强化版。还可以查看某一行的所有提交记录。

Git Peoject Manager

这是一个git项目管理的插件,一共就4个命令:

  • GPM: Open Git Project (Ctrl+Alt+P):打开git项目
  • GPM: Refresh Projects:刷新git项目
  • GPM: Refresh specific project folder:刷新特定路径下的git项目
  • GPM: Open Recent Git Project (Ctrl+Shift+Q):最近打开的git项目列表

Git Project Manager

插件的使用也很简单,找到配置文件中gitProjectManager.baseProjectsFolders把git项目的根目录放进去,就像下边这样:
{ "gitProjectManager.baseProjectsFolders": [ "/home/user/nodeProjects", "/home/user/personal/pocs" ] }

然后cmd + shift + P调出命令栏,并输入GPM,上述的4个命令就被列出来了,选择Refresh Projects,稍等一会儿后,被我们添加到配置文件里的路径下的所有git项目都会被列出来。选择你的工作目录开始Coding吧!

Git Lens

这是一款非常强大的git插件,它提供的每一个功能,都戳中了我们日常开发中的需求痛点。所以,我强烈推荐大家安装并使用这款插件。先目睹一下它的功能概览gif图:

gitlens-preview.gif

Code Lens

在文件的顶部展示代码变更的总的记录,包括左边的最新修改记录以及右边的所有的修改作者数量。

Code Lens

Blame Annotations

点击右边的作者数量可以进入整个文件的Blame Annotations。这里展示了每一行的最后一条修改记录,具体的展示方式可以在设置里自己配置,包括作者、时间和commit信息。

Blame Annotations

Status Bar Blame

这个是指在状态栏里展示当前光标所在行的Git Blame信息。当然这里要展示的信息和格式也是可以配置的。这样,光标所在的行的最新git记录和作者信息完全展示在了状态栏里。

Status Bar Blame

Interactive Blame

这个功能和Status Bar Status类似,只不过,git信息是直接展示在文件中的代码后边。鼠标悬停在git记录上时,会有更详细的git变更气泡弹出。就像下边这样:

Interactive Blame

Quick Menu

快捷键shift + alt + H调出branch history quick pick menu, 这个菜单功能非常强大,我们可以查看之前的commits信息、所有commits信息、根据message/author/filename搜索commits信息、查看一些文件的历史记录等。

Quick Menu

Search by messages

Search by autor 01

Search by autor 02

Search by filename 01

Search by filename 02

通过message查找时,直接在输入框里输入message的关键信息即可。通过author查找时,则是输入@author,类似于图中的@Zeke。而通过filename查找,则需要注意一下,这里应该是: filepath,也就是相对于当前项目根目录的相对路径。类似于图中的:lib/browser/chrome-extension.js。除了这些之外,还可以根据commit id查找,这个用的不多,这里就不再举例了。

Project Manager

项目管理插件,这个功能和Git Project Manager有点类似,只不过,这个不但能管理git项目,还可以管理其他项目。

Project Manager

这个插件一共5个命令:

  • Project Manager: Edit Project Edit 跳转到配置文件 projects.json 进行项目列表目录的配置修改。
  • Project Manager: List Projects 列出已经保存的项目列表。
  • Project Manager: List Projects to Open in New Window 列出已保存的项目列表并在新窗口打开选中的项目。
  • Project Manager: Refresh Projects 刷新项目列表。
  • Project Manager: Save Project 保存当前项目到项目列表。

其他插件

其他的一些插件就不做详细介绍了,这里列出我用过的感觉比较好的,大家自己到github上查阅吧。vscode-iconsvscode-fileheaderDocument ThisCSS PeekFile PeekMarkdown PDFMarkdown Preview EnhancedRegex Railroad Diagrams

如果还有其他比较好用或者有意思的插件,欢迎大家前来留言。一起讨论交流。