From 65a27fd21f3d7dfb15b743d39f2ed8cd550b0049 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Wed, 17 Apr 2019 22:27:14 +0800 Subject: [PATCH] =?UTF-8?q?add:VS=20Code=E7=9A=84=E5=B8=B8=E8=A7=81?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 00-前端工具/01-VS Code的使用.md | 114 +++++++++++++----- .../{03-Git的使用.md => 02-Git的使用.md} | 0 README.md | 2 +- 3 files changed, 85 insertions(+), 31 deletions(-) rename 00-前端工具/{03-Git的使用.md => 02-Git的使用.md} (100%) diff --git a/00-前端工具/01-VS Code的使用.md b/00-前端工具/01-VS Code的使用.md index 93bb573..7106ae8 100644 --- a/00-前端工具/01-VS Code的使用.md +++ b/00-前端工具/01-VS Code的使用.md @@ -69,10 +69,8 @@ Mac用户按住快捷键 `Cmd+Shift+P` （Windows用户按住快捷键`Ctrl+Shif 选中文本后，在命令面板中输入 transfrom，就可以修改文本的大小写了。 - ![](http://img.smyhvae.com/20190414_1751.png) - ## 文件对比 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 ![](http://img.smyhvae.com/20190329_2120.png) +## VS Code 的常见设置项 + +### 面包屑（Breadcrumb） + +打开 VS Code 的设置项，选择「用户设置 -> 工作台 -> 导航路径」，如下图所示： + +![](http://img.smyhvae.com/20190415_2005.png) + +上图中，将红框部分打钩即可。 + +设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。 + +![](http://img.smyhvae.com/20190415_2009.png) + +### 是否显示代码的行号 + +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 的设置项，选择「用户设置 -> 工作台 -> 导航路径」，如下图所示： - -![](http://img.smyhvae.com/20190415_2005.png) - -上图中，将红框部分打钩即可。 - -设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。 - -![](http://img.smyhvae.com/20190415_2009.png) - ### 在当前文件中搜索 在上面的快捷键列表中，我们已经知道如下快捷键： @@ -230,8 +286,7 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit 「在选定内容中查找」这个功能还是比较实用的。你也可以在设置项里搜索 `editor.find.autoFindInSelection`，勾选该设置项后，那么，当你选中指定内容后，然后按住「Cmd + F」，就可以**自动**只在这些内容里进行查找。该设置项如下图所示： -![](http://img.smyhvae.com/20190415_2050.png) - +![](http://img.smyhvae.com/20190415_2116.png) ### 全局搜索 @@ -241,10 +296,11 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit ![](http://img.smyhvae.com/20190415_2107.png) - 上图中，我们可以点击红框部分，展开更多的配置项。 + + ## 插件扩展 / 插件推荐 VS Code 有一个很强大的功能就是支持插件扩展。我来列举几个常见的插件，这些插件都是装机必备。 @@ -265,5 +321,3 @@ VS Code 有一个很强大的功能就是支持插件扩展。我来列举几个 ## 参考链接 - - diff --git a/00-前端工具/03-Git的使用.md b/00-前端工具/02-Git的使用.md similarity index 100% rename from 00-前端工具/03-Git的使用.md rename to 00-前端工具/02-Git的使用.md diff --git a/README.md b/README.md index c6faec9..85b9c37 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ - 进群暗号：前端学习 -- 进群要求：少提问，多分享。希望你是发自内心地热爱分享，而不是为了索取（长期潜水的，就不必了） +- 进群要求：少提问，多分享。希望你是发自内心地热爱分享，而不是为了索取（长期潜水的，就不必了）。 你也可以关注微信公众号「**千古壹号**」，学习代码之外的技能。 \ No newline at end of file