add:VS Code的常见设置项
This commit is contained in:
qianguyihao
parent
b816ca5100
commit
65a27fd21f
@ -69,10 +69,8 @@ Mac用户按住快捷键 `Cmd+Shift+P` （Windows用户按住快捷键`Ctrl+Shif
|
||||
|
||||
选中文本后，在命令面板中输入 transfrom，就可以修改文本的大小写了。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 文件对比
|
||||
|
||||
VS Code 默认支持**对比两个文件的内容**。选中两个文件，然后右键选择「将已选项进行比较」即可，效果如下：
|
||||
@ -85,7 +83,7 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
|
||||
## VS Code快捷键
|
||||
|
||||
### 移动光标
|
||||
### 快捷键：移动光标
|
||||
|
||||
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|
||||
|:-------------|:-------------|:-----|:-----|
|
||||
@ -104,7 +102,7 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
|
||||
- 「Cmd + Shift + \」：在**代码块**之间移动光标。
|
||||
|
||||
### 删除操作
|
||||
### 快捷键：删除操作
|
||||
|
||||
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|
||||
|:-------------|:-------------|:-----|:-----|
|
||||
@ -117,7 +115,7 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
|
||||
备注：上面所讲到的移动光标、删除操作的快捷键，在其他编辑器里，也是同样的操作。
|
||||
|
||||
### 编辑操作
|
||||
### 快捷键：编辑操作
|
||||
|
||||
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|
||||
|:-------------|:-------------|:-----|:-----|
|
||||
@ -125,7 +123,7 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
| **Option + ↑** | Alt + ↑| 将代码向上移动 | 很常用 |
|
||||
| **Option + ↓** | Alt + ↓| 将代码向下移动 | 很常用 |
|
||||
|
||||
### JS语言相关的快捷键
|
||||
### 快捷键：JS语言相关
|
||||
|
||||
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|
||||
|:-------------|:-------------|:-----|:-----|
|
||||
@ -134,10 +132,8 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
| Ctrl + J | | 将多行代码合并为一行 | Win 用户可在命令面板搜索”合并行“ |
|
||||
| Cmd + | | | |
|
||||
| Cmd + U | Ctrl + U | 将光标的移动回退到上一个位置 | 撤销光标的移动和选择 |
|
||||
| | | | |
|
||||
| | | | |
|
||||
|
||||
### 跳转操作
|
||||
### 快捷键：跳转操作
|
||||
|
||||
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|
||||
|:-------------|:-------------|:-----|:-----|
|
||||
@ -146,7 +142,7 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
| **Ctrl + G** | | 跳转到指定行 | |
|
||||
| Cmd + Shift + O | Ctrl + shift + O | 在当前文件的各种**方法之间**进行跳转 | |
|
||||
|
||||
### 搜索
|
||||
### 快捷键：搜索
|
||||
|
||||
| Mac快捷键 | Win快捷键 | 作用 | 备注 |
|
||||
|:-------------|:-------------|:-----|:-----|
|
||||
@ -155,8 +151,7 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
|
||||
|**Cmd + Shift + F**|Ctrl + Shift +F|全局搜索|很常用|
|
||||
|
||||
|
||||
### 多光标的使用
|
||||
### 快捷键：多光标的使用
|
||||
|
||||
**技巧1**：按住 「Option」键（windows 用户是按住「Alt」键） ，然后在页面中希望中现光标的位置点击鼠标。
|
||||
|
||||
@ -164,7 +159,6 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
|
||||
**技巧3**：选中一堆文本后，按住「Option + Shift + i」键（windows 用户是按住「Alt + Shift + I」键），既可在**每一行的末尾**都创建一个光标。
|
||||
|
||||
|
||||
### 自定义快捷键
|
||||
|
||||
按住快捷键「Cmd + Shift + P」，弹出命令面板，在命令面板中输入“快捷键”，可以进入快捷键的设置。
|
||||
@ -173,6 +167,80 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
|
||||
|
||||
|
||||
## VS Code 的常见设置项
|
||||
|
||||
### 面包屑（Breadcrumb）
|
||||
|
||||
打开 VS Code 的设置项，选择「用户设置 -> 工作台 -> 导航路径」，如下图所示：
|
||||
|
||||
|
||||
|
||||
上图中，将红框部分打钩即可。
|
||||
|
||||
设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。
|
||||
|
||||
|
||||
|
||||
### 是否显示代码的行号
|
||||
|
||||
VS Code 默认显示代码的行号。我们可以在设置项里搜索 `editor.lineNumbers`进行设置，配置项如下：
|
||||
|
||||
20190417_2140.png
|
||||
|
||||
### 右侧是否显示代码的缩略图
|
||||
|
||||
VS Code 会在代码的右侧，默认显示缩略图。我们可以在设置项里搜索 `editor.minimap`进行设置，配置项如下：
|
||||
|
||||
20190417_2156.png
|
||||
|
||||
### 将当前行代码高亮显示
|
||||
|
||||
当我们把光标放在某一行时，这一行的背景色并没有发生变化。如果想**高亮显示**当前行的代码，我们可以在设置项里搜索`editor.renderLineHighlight`进行设置。配置项如下：
|
||||
|
||||
我设置完之后，发现效果不是很明显。有待优化。
|
||||
|
||||
### 空格 or 制表符
|
||||
|
||||
VS Code 会根据你所打开的文件来决定该使用空格还是制表。也就是说，如果你的项目中使用的都是制表符，那么，当你在写新的代码时，按下tab 键后，编辑器就会识别成制表符。
|
||||
|
||||
常见的设置项如下：
|
||||
|
||||
**editor.detectIndentation**：自动检测（默认开启）。截图如下：
|
||||
|
||||
20190417_2205.png
|
||||
|
||||
**editor.insertSpaces**： 。截图如下：
|
||||
|
||||
20190417_2207.png
|
||||
|
||||
**editor.tabSize**。截图如下：
|
||||
|
||||
20190417_2209.png
|
||||
|
||||
### 改完代码后立即保存
|
||||
|
||||
改完代码后，默认不会自动保存。我们可以在设置项里搜索`files.autoSave`，修改配置项如下：
|
||||
|
||||
20190417_2216.png
|
||||
|
||||
上图中，我们将配置项修改为`onFocusChange`之后，那么，当光标离开该文件后，这个文件就会自动保存了。**非常方便**。
|
||||
|
||||
### 保存代码后，是否立即格式化
|
||||
|
||||
保存代码后，默认**不会立即**进行代码的格式化。我们可以在设置项里搜索`editor.formatOnSave`查看该配置项：
|
||||
|
||||
20190417_2213.png
|
||||
|
||||
我觉得这个配置项保持默认就好，不用修改。
|
||||
|
||||
### 新建文件后的默认文件类型
|
||||
|
||||
当我们按下快捷键「Cmd + N」新建文件时，VS Code 默认无法识别这个文件到底是什么类型的。如果你想修改默认的文件类型，可以在设置项里搜索`files.defaultLanguage`，设置项如下：
|
||||
|
||||
20190417_2221.png
|
||||
|
||||
上图中的红框部分，填入你期望的默认文件类型。我填的是`html`类型，你也可以填写成 `javascript` 或者 `markdown`，或者其他的语言类型。
|
||||
|
||||
## VS Code 的常用技巧
|
||||
|
||||
### 查找某个函数被在哪些地方被调用了
|
||||
@ -202,18 +270,6 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
选中某一段代码，这个时候，代码的左侧会出现一个「灯泡图标」，点击这个图标，就可以把这段代码提取为一个单独的函数。
|
||||
|
||||
|
||||
### 面包屑（Breadcrumb）
|
||||
|
||||
打开 VS Code 的设置项，选择「用户设置 -> 工作台 -> 导航路径」，如下图所示：
|
||||
|
||||
|
||||
|
||||
上图中，将红框部分打钩即可。
|
||||
|
||||
设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。
|
||||
|
||||
|
||||
|
||||
### 在当前文件中搜索
|
||||
|
||||
在上面的快捷键列表中，我们已经知道如下快捷键：
|
||||
@ -230,8 +286,7 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
|
||||
「在选定内容中查找」这个功能还是比较实用的。你也可以在设置项里搜索 `editor.find.autoFindInSelection`，勾选该设置项后，那么，当你选中指定内容后，然后按住「Cmd + F」，就可以**自动**只在这些内容里进行查找。该设置项如下图所示：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 全局搜索
|
||||
|
||||
@ -241,10 +296,11 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，我们可以点击红框部分，展开更多的配置项。
|
||||
|
||||
|
||||
|
||||
|
||||
## 插件扩展 / 插件推荐
|
||||
|
||||
VS Code 有一个很强大的功能就是支持插件扩展。我来列举几个常见的插件，这些插件都是装机必备。
|
||||
@ -265,5 +321,3 @@ VS Code 有一个很强大的功能就是支持插件扩展。我来列举几个
|
||||
|
||||
## 参考链接
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user