add:VS Code的常用技巧

00-前端工具/01-VS Code的使用.md

@@ -124,6 +124,7 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
 | **Option + ↓** |  Alt + ↓| 将代码向下移动 | 很常用 |
 
 ### JS语言相关的快捷键
+
 | Mac快捷键 | Win快捷键 | 作用 | 备注 |
 |:-------------|:-------------|:-----|:-----|
 | Cmd + / |  Ctrl + /  | 添加单行注释 | 很常用 |
@@ -143,6 +144,16 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
 | **Ctrl + G** |   | 跳转到指定行 |  |
 | Cmd + Shift + O |  Ctrl + shift + O | 在当前文件的各种**方法之间**进行跳转 |  |
 
+### 搜索
+
+| Mac快捷键 | Win快捷键 | 作用 | 备注 |
+|:-------------|:-------------|:-----|:-----|
+|Cmd + F|Ctrl + F|在当前文件中搜索，光标在搜索框里||
+|**Cmd + G**|F3|在当前文件中搜索，光标仍在编辑器里|很实用|
+
+|**Cmd + Shift + F**|Ctrl + Shift +F|全局搜索|很常用|
+
+
 ### 多光标的使用
 
 **技巧1**：按住 「Option」键（windows 用户是按住「Alt」键） ，然后在页面中希望中现光标的位置点击鼠标。
@@ -168,7 +179,6 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
 
 做法如下：在 `a.js` 文件里，选中`foo()`函数（或者将光标放置在`foo()`函数上），然后按住快捷键「Shift + F12」，就能看到 `foo()`函数在哪些地方被调用了，比较实用。
 
-
 ### 鼠标操作
 
 - 在当前行的位置，鼠标三击，可以选中当前行。
@@ -177,10 +187,65 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
 
 - 在某个**行号**的位置，**上下移动鼠标，可以选中多行**。
 
+### 重构
+
+重构分很多种，我们来举几个例子。
+
+**1、命名重构**：
+
+当我们尝试去修改某个函数（或者变量名）时，我们可以把光标放在上面，然后按下「F2」键，那么，这个函数（或者变量名）出现的地方都会被修改。
+
+**2、方法重构**：
+
+选中某一段代码，这个时候，代码的左侧会出现一个「灯泡图标」，点击这个图标，就可以把这段代码提取为一个单独的函数。
+
+
+### 面包屑（Breadcrumb）
+
+打开 VS Code 的设置项，选择「用户设置 -> 工作台 -> 导航路径」，如下图所示：
+
+20190415_2005.png
+
+上图中，将红框部分打钩即可。
+
+设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。
+
+20190415_2009.png
+
+### 在当前文件中搜索
+
+在上面的快捷键列表中，我们已经知道如下快捷键：
+
+- Cmd + F：在当前文件中搜索，光标在搜索框里
+
+- Cmd + G：在当前文件中搜索，光标仍在编辑器里
+
+但是，你可能会注意到，搜索框里有很多按钮，每个按钮都对应着不同的功能，如下图所示：
+
+20190415_2052.png
+
+上图中，我们可以通过「Tab」键和「Shift + Tab」键在输入框和替换框之间进行切换。
+
+「在选定内容中查找」这个功能还是比较实用的。你也可以在设置项里搜索 `editor.find.autoFindInSelection`，勾选该设置项后，那么，当你选中指定内容后，然后按住「Cmd + F」，就可以**自动**只在这些内容里进行查找。该设置项如下图所示：
+
+20190415_2050.png
+
+
+### 全局搜索
+
+在上面的快捷键列表中，我们已经知道如下快捷键：
+
+- Cmd + Shift + F（Win用户是Ctrl + Shift +F）：在全局的文件夹中进行搜索。
+
+20190415_2056.png
+
+上图中，我们可以点击红框部分，展开更多的配置项。
+
+
 
 ## 插件扩展 / 插件推荐
 
-VS Code 有一个很强大的功能就是支持插件扩展。我来列举一个常见的插件，这些插件都是装机必备。
+VS Code 有一个很强大的功能就是支持插件扩展。我来列举几个常见的插件，这些插件都是装机必备。
 
 ### Settings Sync
 

13-React基础/09-AntD框架的upload组件上传图片时遇到的一些坑.md

@@ -132,7 +132,7 @@ class PicturesWall extends PureComponent {
           <FormItem label="图片图片" {...formItemLayout}>
             {getFieldDecorator('myImg')(
               <Upload
-                action="//jsonplaceholder.typicode.com/posts/" // 这个是接口请求
+                action="//jsonplaceholder.typicode.com/posts/" // 这个是图片上传的接口请求，实际开发中，要替换成你自己的业务接口
                 data={file => ({ // data里存放的是接口的请求参数
                   param1: myParam1,
                   param2: myParam2,
@@ -448,7 +448,7 @@ class PicturesWall extends PureComponent {
           <FormItem label="图片上传" {...formItemLayout}>
             {getFieldDecorator('myImg')(
               <Upload
-                action="//jsonplaceholder.typicode.com/posts/" // 这个是接口请求
+                action="//jsonplaceholder.typicode.com/posts/" // 这个是图片上传的接口请求，实际开发中，要替换成你自己的业务接口
                 data={file => ({
                   // data里存放的是接口的请求参数
                   param1: myParam1,