VS Code 的介绍
VS Code 的全称是 Visual Studio Code
是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面,都做的很不错。
VS Code 本来是前端人员专用,但由于它实在是太好用了,于是,各种开发方向的码农也正在用 VS Code 作为他们的主力编程工具。甚至是一些写作的同学,也把 VS Code 作为 markdown 写作工具。
编辑器 与 IDE
IDE
和编辑器
是有区别的:
-
IDE :对代码会有较好的智能提示,同时侧重于工程项目,对项目的开发、调试工作有较好的图像化界面的支持,因此比较笨重。比如 IntelliJ IDEA 的定位就是 IDE。
-
编辑器:要相对轻量许多,侧重于文本的编辑。比如 Sublime Text 的定位就是编辑器。再比如 Windows 系统自带的「记事本」就是最简单的编辑器。
需要注意的是,VS Code 的定位是编辑器
,而非IDE
。但 VS Code 又比一般的编辑器的功能要丰富许多。
VS Code的一些补充
-
VS Code 的使命,是让开发者在编辑器里拥有 IDE 那样的开发体验,比如代码的智能提示、语法检查、图形化的调试工具、插件扩展、版本管理等。
-
VS Code 的源代码以MIT协议开源。
-
VS Code 自带了 TypeScript 和 Node.js 的支持。也就是说,你在书写 JS 和 TS 时,是自带智能提示的。
-
有一点你可能不知道,VS Code 这个客户端软件是用 js 语言开发出来的(具体请自行查阅关键字
Electron
)。有句话说得好:能用 js 实现的功能,最终一定会用 js 实现。
VS Code 的安装
- VS Code 官网:https://code.visualstudio.com
VS Code 的安装很简单,直接去官网下载安装包,然后双击安装即可。
VS Code 的常用技巧
文件对比
VS Code 默认支持对比两个文件的内容。选中两个文件,然后右键选择「将已选项进行比较」即可,效果如下:
VS Code自带的对比功能并不够强大,我们可以安装插件compareit
,进行更丰富的对比。比如说,安装完插件compareit
之后,我们可以将「当前文件」与「剪切板」里的内容进行对比:
查找某个函数在哪些地方被调用了
比如我已经在a.js
文件里调用了 foo()
函数。那么,如果我想知道foo()
函数在其他文件中是否也被调用了,该怎么做呢?
做法如下:在 a.js
文件里,选中foo()
函数(或者将光标放置在foo()
函数上),然后按住快捷键「Shift + F12」,就能看到 foo()
函数在哪些地方被调用了,比较实用。
重构
重构分很多种,我们来举几个例子。
1、命名重构:
当我们尝试去修改某个函数(或者变量名)时,我们可以把光标放在上面,然后按下「F2」键,那么,这个函数(或者变量名)出现的地方都会被修改。
2、方法重构:
选中某一段代码,这个时候,代码的左侧会出现一个「灯泡图标」,点击这个图标,就可以把这段代码提取为一个单独的函数。
Emmet in VS Code
Emmet
可以极大的提高 html 和 css 的编写效率,它提供了一种非常简练的语法规则。
举个例子,我们在编辑器中输入缩写代码:ul>li*6
,然后按下 Tab 键,即可得到如下代码片段:
<ul->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul->