add:VS Code的常用快捷键
This commit is contained in:
qianguyihao
parent
932affd36c
commit
d2e74b882a
@ -1,5 +1,4 @@
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
VS Code 本来是前端人员专用，但由于它实在是太好用了，于是，各种开发方向的码农也正在用 VS Code 作为他们的主力编程工具。甚至是一些写作的同学，也把 VS Code 作为 markdown 写作工具。
|
||||
@ -8,7 +7,7 @@ VS Code 本来是前端人员专用，但由于它实在是太好用了，于
|
||||
|
||||
### VS Code 的介绍
|
||||
|
||||
VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的\高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做的很不错。
|
||||
VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做的很不错。
|
||||
|
||||
### 编辑器 与 IDE
|
||||
|
||||
@ -48,26 +47,31 @@ VS Code 的安装很简单，直接去官网下载安装包，然后双击安装
|
||||
|
||||
上图中，直接点击 download 下载安装即可。
|
||||
|
||||
## VS Code的基本功能
|
||||
|
||||
### 命令面板
|
||||
## 命令面板
|
||||
|
||||
Mac用户按住快捷键 `Cmd+Shift+P` （Windows用户按住快捷键`Ctrl+Shift+P`），可以打开命令面板。效果如下：
|
||||
|
||||
|
||||
|
||||
命令面板有很多强大的功能，这里列举一些。
|
||||
|
||||
### 字体设置
|
||||
|
||||
如果们需要搜索各种设置项，就可以用到命令面板。比如说，在命令面板输入“字体”，可以进行字体的设置，效果如下：
|
||||
|
||||
|
||||
|
||||
再比如说，在命令面板输入“快捷键”，就可以进入快捷键的设置。
|
||||
### 快捷键设置
|
||||
|
||||
### 插件扩展
|
||||
在命令面板输入“快捷键”，就可以进入快捷键的设置。
|
||||
|
||||
VS Code 有一个很强大的功能就是支持插件扩展。我来列举一个常见的插件，这些插件都是装机必备。
|
||||
### 修改文本的大小写
|
||||
|
||||
选中文本后，在命令面板中输入 transfrom，就可以修改文本的大小写了。
|
||||
|
||||
### 文件对比
|
||||
20190414_1751.png
|
||||
|
||||
## 文件对比
|
||||
|
||||
VS Code 默认支持**对比两个文件的内容**。选中两个文件，然后右键选择「将已选项进行比较」即可，效果如下：
|
||||
|
||||
@ -83,8 +87,8 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
|
||||
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|
||||
|:-------------|:-------------|:-----|:-----|
|
||||
| Cmd + ← | | 将光标定位到当前行的最左侧 | |
|
||||
| Cmd + → | | 将光标定位到当前行的最右侧 | |
|
||||
| **Cmd + ←** | | 将光标定位到当前行的最左侧 | 很常用 |
|
||||
| **Cmd + →**| | 将光标定位到当前行的最右侧 | 很常用 |
|
||||
| Cmd + ↑ | Ctrl + Home | 将光标定位到文章的第一行| |
|
||||
| Cmd + ↓ | Ctrl + End | 将光标定位到文章的最后一行 | |
|
||||
|
||||
@ -92,9 +96,9 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
|
||||
- 「方向键」：在**单个字符**之间移动光标
|
||||
|
||||
- 「option + 左右方向键」：在**单词**之间移动光标
|
||||
- 「option + 左右方向键」：在**单词**之间移动光标 。（很常用）
|
||||
|
||||
- 「Cmd + 左右方向键」：在**整行**之间移动光标。
|
||||
- 「Cmd + 左右方向键」：在**整行**之间移动光标。（很常用）
|
||||
|
||||
- 「Cmd + Shift + \」：在**代码块**之间移动光标。
|
||||
|
||||
@ -102,13 +106,52 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
|
||||
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|
||||
|:-------------|:-------------|:-----|:-----|
|
||||
| **option + delete** | | 删除光标之前的一个单词 | 英文有效 |
|
||||
| **option + delete** | | 删除光标之前的一个单词 | 英文有效，很常用 |
|
||||
| option + backspace | | 删除光标之后的一个单词 | |
|
||||
| **Cmd + delete** | | 删除光标之前的整行内容 | |
|
||||
| **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」，弹出命令面板，在命令面板中输入“快捷键”，可以进入快捷键的设置。
|
||||
@ -117,7 +160,27 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
|
||||
|
||||
|
||||
## 常用插件推荐
|
||||
## VS Code 的常用技巧
|
||||
|
||||
### 查找某个函数被在哪些地方被调用了
|
||||
|
||||
比如我已经在`a.js`文件里调用了 `foo()`函数。那么，如果我想知道`foo()`函数在其他文件中是否也被调用了，该怎么做呢？
|
||||
|
||||
做法如下：在 `a.js` 文件里，选中`foo()`函数（或者将光标放置在`foo()`函数上），然后按住快捷键「Shift + F12」，就能看到 `foo()`函数在哪些地方被调用了，非常实用。
|
||||
|
||||
|
||||
### 鼠标操作
|
||||
|
||||
- 在当前行的位置，鼠标三击，可以选中当前行。
|
||||
|
||||
- 用鼠标单击文件的**行号**，可以选中当前行。
|
||||
|
||||
- 在某个**行号**的位置，**上下移动鼠标，可以选中多行**。
|
||||
|
||||
|
||||
## 插件扩展 / 插件推荐
|
||||
|
||||
VS Code 有一个很强大的功能就是支持插件扩展。我来列举一个常见的插件，这些插件都是装机必备。
|
||||
|
||||
### Settings Sync
|
||||
|
||||
@ -126,7 +189,7 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
- 作用：多台设备之间，同步 VS Code 配置。[荐]
|
||||
|
||||
### vscode-syncing
|
||||
--
|
||||
|
||||
- 地址：<https://github.com/nonoroazoro/vscode-syncing>
|
||||
|
||||
- 作用：多台设备之间，同步 VS Code 配置。
|
||||
@ -137,5 +200,3 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -60,10 +60,6 @@
|
||||
|
||||
你的项目要是能上 GitHub trending，绝对火得一塌糊涂。
|
||||
|
||||
## 学习资源
|
||||
|
||||
- 慕课网：<https://www.imooc.com/>
|
||||
|
||||
## 资讯
|
||||
|
||||
- 虎嗅网：<https://www.huxiu.com/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user