前言工欲善其事必先利其器,提高程序员的开发效率必须要有一个好的开发工具,当前最好的前端开发工具主要有VS code、sublime Text、Atom、Webstorm、Notepad++。
VS Code 是一款十分强大的代码编辑器,虽然出来时间比较短,但是使用频率和受欢迎率已经远远超过了其他的编辑器,VS code适用于几乎所有的编程与和开发任务,包含了非常丰富的应用插件,非常方便,越来越多的新生代互联网青年正在使用它。
其实VS Code 这款软件本身,是用 JavaScript 语言编写的,是一款基于Electron框架编写的客户端编辑器,如果喜欢研究源码可以去github下载源码进行研究,Electron使用和学习在以后章节中介绍(具体请自行查阅基于 JS 的 PC 客户端开发框架 Electron)。Jeff Atwood 在 2007 年提出了著名的 Atwood 定律:任何能够用 JavaScript 实现的应用系统,最终都必将用 JavaScript 实现。
Jeff Atwood 这个人是谁不重要(他是 Stack Overflow 网站的联合创始人),重要的是这条定律。
前端目前是处在春秋战国时代,各路英雄豪杰成为后浪,各种框架工具层出不穷,VS Code 软件无疑是大前端时代最骄傲的工具。
如果你是做前端开发(JavaScript 编程语言为主),则完全可以将 VS Code 作为「主力开发工具」。这款软件是为前端同学量身定制的。
如果你是做其他语言方向的开发,并且不需要太复杂的集成开发环境,那么,你可以把 VS Code 作为「代码编辑器」来使用,纵享丝滑。
甚至是一些写文档、写作的同学,也经常把 VS Code 作为 markdown 写作工具,毫无违和感。
退而求其次,即便你不属于以上任何范畴,你还可以把 VS Code 当作最简单的文本编辑器来使用,完胜 Windows 系统自带的记事本。
以下是对VS Code基本使用的介绍:
一、VS Code 的介绍
VS Code 的全称是 Visual Studio Code,是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面,都做得很不错。
微软有两种软件:一种是 VS Code,一种是VS IDE。
VS Code是一款开发者的代码编辑器,提供了各种便携的插件使用;VS IDE是微软的重量级IDE工具,里面集成了各种开发环境的编译工具,特别是开发后端服务器编程,提供了完整的C/C++、Java、Python、Go、Android等集成开发工具。类似于Eclipse IDE,只需要一键安装即可。
IDE 与 编辑器的对比
IDE 和编辑器是有区别的:IDE(Integrated Development Environment,集成开发环境):对代码有较好的智能提示和相互跳转,同时侧重于工程项目,对项目的开发、调试工作有较好的图像化界面的支持,因此比较笨重。比如 Eclipse 的定位就是 IDE。还有很多优秀的IDE工具,例如:
Visual Basic 6.0:
Visual C++ 6.0:
Dev C++:
Visual Studio 2015-2019:
QT Creator:
Eclipse:
IDEA:
PyCharm:
编辑器:要相对轻量许多,侧重于文本的编辑。比如 Sublime Text 的定位就是编辑器。再比如 Windows 系统自带的「记事本」就是最简单的编辑器。
需要注意的是,VS Code 的定位是编辑器,而非 IDE ,但 VS Code 又比一般的编辑器的功能要丰富许多。可以这样理解:VS Code 的体量是介于编辑器和 IDE 之间。程序员常用的一些优秀的编辑器例如:
VS Code、Sublime Text、Editplus、Notepad++、vim、Atom、Webstorm、chocolatapp、textpad等等。’
VS Code 的特点VS Code 的使命,是让开发者在编辑器里拥有 IDE 那样的开发体验,比如代码的智能提示、语法检查、图形化的调试工具、插件扩展、版本管理等。
VS Code是一款免费的、开源的、高性能的、跨平台的、轻量级的代码编辑器,同时,在性能,语言支持、开源社区方面也做的很不错!
跨平台支持 MacOS、Windows 和 Linux 等多个平台。
VS Code 的源代码以 MIT 协议开源。
支持第三方插件,功能强大,生态系统完善。
VS Code 自带了 JavaScript、TypeScript 和 Node.js 的支持。也就是说,你在书写 JS 和 TS 时,是自带智能提示的。当然,其他的语言,你可以安装相应的扩展包插件,也会有智能提示。
前端编辑器: VS Code 与 WebStorm、Sublime Text
经常看到这样的问题:哪个编辑器/IDE 好用?是 VS Code 还是 WebStorm (WebStorm 其实是 IntelliJ IDEA 的定制版)?我来做个对比:哪个更酷:显然 VS Code 更酷。
内存占用情况:根据我的观察,VS Code 是很占内存的(尤其是当你打开多个窗口的时候),但如果你的内存条够用,使用起来是不会有任何卡顿的感觉的。相比之下,IntelliJ IDEA 不仅非常占内存,而且还非常卡顿。如果你想换个既轻量级、又不占内存的编辑器,最好还是使用「Sublime Text」编辑器。
使用比例:当然是 VS Code 更胜一筹。先不说别的,我就拿数据说话,我目前所在的研发团队有 200 人左右(120个后台、80个前端),他们绝大部分人都在用 VS Code 编码,妥妥的。如果想快速轻量级开发可以选择sublime Text3. 也有很多丰富的插件可以使用。
所以,首选是VS code,其次是sublime Text3,再其次可以选择其他自己喜欢的编辑器。
VS Code 的安装
VS Code 的安装很简单,直接去官网下载安装包,然后双击安装即可。
上图中,直接点击 download,一键下载安装即可。
二、崭露锋芒:VS Code 快捷键
VS Code 用得熟不熟,首先就看你是否会用快捷键。以下列出的内容,都是常用快捷键,而加粗部分的快捷键,使用频率则非常高。
任何工具,掌握 20%的技能,足矣应对 80% 的工作。既然如此,你可能会问:那就只保留 20% 的特性,不久可以满足 80%的用户了吗?
但我想说的是:那从来都不是同样的 20%,每个人都会用到不同的功能。
掌握下面这些高频核心快捷键,你和你的工具,足矣露出锋芒。
1、工作区快捷键Mac 快捷键Win 快捷键作用备注Cmd + Shift + PCtrl + Shift + P,F1显示命令面板
Cmd + BCtrl + B显示/隐藏侧边栏很实用
Cmd + \Ctrl + \创建多个编辑器【重要】抄代码利器
Cmd + 1、2Ctrl + 1、2聚焦到第 1、第 2 个编辑器同上重要
cmd +/-ctrl +/-将工作区放大/缩小(包括代码字体、左侧导航栏)在投影仪场景经常用到
Cmd + JCtrl + J显示/隐藏控制台
Cmd + Shift + NCtrl + Shift + N重新开一个软件的窗口很常用
Cmd + Shift + WCtrl + Shift + W关闭软件的当前窗口
Cmd + NCtrl + N新建文件
Cmd + WCtrl + W关闭当前文件
2、跳转操作Mac 快捷键Win 快捷键作用备注Cmd + `没有在同一个软件的多个工作区之间切换使用很频繁
Cmd + Option + 左右方向键Ctrl + Pagedown/Pageup在已经打开的多个文件之间进行切换非常实用
Ctrl + TabCtrl + Tab在已经打开的多个文件之间进行跳转不如上面的快捷键快
Cmd + Shift + OCtrl + shift + O在当前文件的各种方法之间进行跳转
Ctrl + GCtrl + G跳转到指定行
Cmd+Shift+\Ctrl+Shift+\跳转到匹配的括号
3、移动光标Mac 快捷键Win 快捷键作用备注方向键方向键在单个字符之间移动光标大家都知道
option + 左右方向键Ctrl + 左右方向键在单词之间移动光标很常用
Cmd + 左右方向键Fn + 左右方向键在整行之间移动光标很常用
Cmd + ←Fn + ←(或 Win + ←)将光标定位到当前行的最左侧很常用
Cmd + →Fn + →(或 Win + →)将光标定位到当前行的最右侧很常用
Cmd + ↑Ctrl + Home将光标定位到文章的第一行