Web/00-前端工具/01-VS Code的使用.md
2019-04-14 19:06:41 +08:00

203 lines
8.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## 前言
VS Code 本来是前端人员专用,但由于它实在是太好用了,于是,各种开发方向的码农也正在用 VS Code 作为他们的主力编程工具。甚至是一些写作的同学,也把 VS Code 作为 markdown 写作工具。
写下这篇文章,是顺势而为。
### VS Code 的介绍
VS Code 的全称是 Visual Studio Code是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面都做的很不错。
### 编辑器 与 IDE
`IDE`和`编辑器`是有区别的:
- **IDE** :对代码会有较好的智能提示,同时侧重于工程项目,对项目的开发、调试工作有较好的图像化界面的支持,因此比较笨重。比如 Eclipse 的定位就是 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 与 idea
- **哪个更酷**:显然 VS Code 更酷。
- **内存占用情况**根据我的观察VS Code是很占内存的尤其是当你打开多个窗口的时候但如果你的内存条够用的话使用起来是不会有任何卡顿的感觉的。相比之下idea 不仅非常占内存,而且还非常卡顿。
- **使用比例**:当然是 VS Code 更胜一筹。比如说我目前所在的前端团队有100人左右绝大部分前端同学都在用 VS Code妥妥的。
## VS Code 的安装
- VS Code 官网:<https://code.visualstudio.com>
VS Code 的安装很简单,直接去官网下载安装包,然后双击安装即可。
![](http://img.smyhvae.com/20190313_1750_2.png)
上图中,直接点击 download 下载安装即可。
## 命令面板
Mac用户按住快捷键 `Cmd+Shift+P` Windows用户按住快捷键`Ctrl+Shift+P`),可以打开命令面板。效果如下:
![](http://img.smyhvae.com/20190329_1750_2.png)
命令面板有很多强大的功能,这里列举一些。
### 字体设置
如果们需要搜索各种设置项,就可以用到命令面板。比如说,在命令面板输入“字体”,可以进行字体的设置,效果如下:
![](http://img.smyhvae.com/20190329_2110.png)
### 快捷键设置
在命令面板输入“快捷键”,就可以进入快捷键的设置。
### 修改文本的大小写
选中文本后,在命令面板中输入 transfrom就可以修改文本的大小写了。
20190414_1751.png
## 文件对比
VS Code 默认支持**对比两个文件的内容**。选中两个文件,然后右键选择「将已选项进行比较」即可,效果如下:
![](http://img.smyhvae.com/20190329_1756.png)
VS Code自带的对比功能并不够强大我们可以安装插件`compareit`,进行更丰富的对比。比如说,安装完插件`compareit`之后,我们可以将「当前文件」与「剪切板」里的内容进行对比:
![](http://img.smyhvae.com/20190329_1757.png)
## VS Code快捷键
### 移动光标
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
| **Cmd + ←** | | 将光标定位到当前行的最左侧 | 很常用 |
| **Cmd + →**| | 将光标定位到当前行的最右侧 | 很常用 |
| Cmd + ↑ | Ctrl + Home | 将光标定位到文章的第一行| |
| Cmd + ↓ | Ctrl + End | 将光标定位到文章的最后一行 | |
根据上面的快捷键,我们可以举一反三。补充如下:
- 「方向键」:在**单个字符**之间移动光标
- 「option + 左右方向键」:在**单词**之间移动光标 。(很常用)
- 「Cmd + 左右方向键」:在**整行**之间移动光标。(很常用)
- 「Cmd + Shift + \」:在**代码块**之间移动光标。
### 删除操作
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
| **option + delete** | | 删除光标之前的一个单词 | 英文有效,很常用 |
| option + backspace | | 删除光标之后的一个单词 | |
| **Cmd + delete** | | 删除光标之前的整行内容 | 很常用 |
| Cmd + backspace | | 删除光标之后的整行内容 | |
| --- | --- |--- | --- |
| Cmd + shift + K | Ctrl + Shift + K | 删除整行| 按「Cmd + X」也可以删除整行虽然它的作用是剪切 |
备注:上面所讲到的移动光标、删除操作的快捷键,在其他编辑器里,也是同样的操作。
### 编辑操作
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
| **Cmd + Enter** | Ctrl + Enter | 在当前行下面新增一行,然后跳至该行 | 即使光标不在行尾,也能快速向下插入一行 |
| **Option + ↑** | Alt + ↑| 将代码向上移动 | 很常用 |
| **Option + ↓** | Alt + ↓| 将代码向下移动 | 很常用 |
### JS语言相关的快捷键
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
| Cmd + / | Ctrl + / | 添加单行注释 | 很常用 |
| **Option + Shift + F** | Alt + shift + F | 代码格式化 | 很常用 |
| Ctrl + J | | 合并代码行 | Win 用户可以在命令面板索索”合并行“ |
| Cmd + | | | |
| Cmd + U | Ctrl + U | 撤销光标的移动和选择。将光标的移动回退到上一个位置 | |
| | | | |
| | | | |
### 跳转操作
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
| **Ctrl + Tab** | | 在已经打开的文件之间进行跳转 | |
| **Cmd + P** | Ctrl + P | 在当前的项目工程里,**全局**搜索文件 | 很常用 |
| **Ctrl + G** | | 跳转到指定行 | |
| Cmd + Shift + O | Ctrl + shift + O | 在当前文件的各种**方法之间**进行跳转 | |
### 多光标的使用
**技巧1**:按住 「Option」键windows 用户是按住「Alt」键 ,然后在页面中希望中现光标的位置点击鼠标。
**技巧2**:选中某个文本,然后反复按住快捷键「 Cmd + D 」键windows 用户是按住「Ctrl + D」键 即可将全文中与光标当前所在位置的词相同的词逐一加入选择。
**技巧3**选中一堆文本后按住「Option + Shift + i」键windows 用户是按住「Alt + Shift + I」键既可在**每一行的末尾**都创建一个光标。
### 自定义快捷键
按住快捷键「Cmd + Shift + P」弹出命令面板在命令面板中输入“快捷键”可以进入快捷键的设置。
当然,我们也可以选择菜单栏「偏好设置 --> 键盘快捷方式」,进入快捷键的设置:
![](http://img.smyhvae.com/20190329_2120.png)
## VS Code 的常用技巧
### 查找某个函数被在哪些地方被调用了
比如我已经在`a.js`文件里调用了 `foo()`函数。那么,如果我想知道`foo()`函数在其他文件中是否也被调用了,该怎么做呢?
做法如下:在 `a.js` 文件里,选中`foo()`函数(或者将光标放置在`foo()`函数上然后按住快捷键「Shift + F12」就能看到 `foo()`函数在哪些地方被调用了,非常实用。
### 鼠标操作
- 在当前行的位置,鼠标三击,可以选中当前行。
- 用鼠标单击文件的**行号**,可以选中当前行。
- 在某个**行号**的位置,**上下移动鼠标,可以选中多行**。
## 插件扩展 / 插件推荐
VS Code 有一个很强大的功能就是支持插件扩展。我来列举一个常见的插件,这些插件都是装机必备。
### Settings Sync
- 地址:<https://github.com/shanalikhan/code-settings-sync>
- 作用:多台设备之间,同步 VS Code 配置。[荐]
### vscode-syncing
- 地址:<https://github.com/nonoroazoro/vscode-syncing>
- 作用:多台设备之间,同步 VS Code 配置。
## 常见主题推荐
## 参考链接