一、前言
相信大部分人在日常 coding 的时候总是会碰到一些效率问题，即总能遇到一些重复繁琐的工作。既然我们是程序员，那么就应该用程序的能力来解决这部分问题。
下面，笔者就来分享一些基于编辑器的常见的能提高编码效率的手段。学会之后，不仅可以提高效率，也可以在其他人面前展示自己装 X 😄。
二、Code Snippets
code snippets 相信很多代码编辑器都是支持的，用的好的话可以让我们节省掉很多时间。
常见的比如说特定文件类型的一些初始化的代码。举个例子：像写 React 的时候，我们可以利用编辑器提供的能力来生成一份特定的 code snippets：
jsx
import * as React from 'react'
export function Test() {
return (
<div></div>
)
}因此，这部分主要分享两个点：
- 如何在主流的代码编辑器中创建自己的
code snippets，如 webstorm 和 vscode - 一些常用的
code snippets分享
1.1、在 webstorm 中创建 code snippets
在 webstorm 中，打开偏好设置或者直接 command + , ，搜索 Live Templates 就可以看到：
webstorm 会默认提供一些常见的 code snippets 来使用，你也可以创建完全由自己定义的 code snippets 。
1.1.1、自定义 code snippets
基于 React 场景，我们要写一个函数的话得花多少时间呢？可以看下面这个视频：
可以发现，速度还是挺慢的，更别说我们日常开发的时候时间很紧，这个速度可以急死人😭
但是如果使用 code snippets 那速度就可以明显提上来了，如下图所示：
我们可以在 Live Templates 下新建一个别名为 usc 的 code snippets ，然后输入我们的 Template text：
jsx
const $HANDLER$ = useCallback(() => {
$STATEMENT$
}, [])其中被 $ 包裹住的变量为占位符，我们在输入关键词之后会让我们依次填充这些位置的内容。废话不多说，我们来看一下具体的效果：
1.1.2、Postfix Completion
上面这种方式就是纯静态的代码生成，只不过我们可以自定义占位符，实际上变量什么的还是得手动输入。如果想要根据变量来生成特定的 code snippets ，那就得用到 Postfix Completion 了。
同样的，在 webstorm 中打开偏好设置或者直接 command + , ，之后搜索 Postfix Completion 可以看到：
同样的 webstorm 内部已经内置了一些默认的 Postfix Completion 。
同样以 React 为例子，如果我们创建一个 Test 组件，正常来说是这样的速度：
看着似乎还行，但是跟自动插入的 code snippets 比就慢太多了：
如下图所示，我们只需要新增一段基于 Postfix Completion 的 code snippets 即可：
其中 $EXPR$ 指的是变量的占位符。
1.2、在 vscode 中创建 Code Snippets
在 vscode 中按住 command + shift + p 并搜索 snippets 可以看到这些选项：
可以选择在已有的 snippets 中新增，也可以创建一个新的 snippets 文件。
1.2.1、自定义 code snippets
配置可以参考：
jsx
{
"try catch finally": {
"scope": "javascript,typescript",
"prefix": "trycf",
"body": [
"try {",
"$1",
"} catch (error) {",
"console.error(error)",
"} finally {",
"$3",
"}"
],
"description": "try catch finally"
}
}其中：
| 关键词 | 功能 / 描述 |
|---|---|
| scope | 生效的类型 |
| prefix | 自定义的前缀，输入之后可以插入 code snippets |
| body | 插入的 code snippets |
| description | 描述这段 code snippets 的作用 |
上面其实已经讲过 snippets 的用法了，所以这里可以重点关注一下 vscode 里 code snippets 的配置格式。
1.2.2、Postfix Completion
虽然 vscode 没有自带这个功能，但是所幸 vscode 有万能的插件，可以去插件市场搜索：
目测功能和 webstorm 大差不差，推荐大伙可以自行去体验一下，这里就不再赘述。
三、常用的快捷键
3.1、前进 / 后退 / 最近编辑的文件 / 最近编辑的代码块
试想一下以下几种在日常 coding 中常见的场景：
- 在同一个文件的不同代码块之间跳转
- 在不同文件之间跳转
- 在上次编辑的文件和当前文件中跳转
如果不使用快捷键的话，我们只能依靠滑动 / 搜索 / 点击 Tab 切换来处理这几个场景，但是用上了快捷键那么就方便多了。
3.1.1、在 webstorm 中使用这类快捷键
前面所说的这几种操作，在 webstorm 中的对应的快捷方式如下：
| 操作类型 | 快捷键 |
|---|---|
| 前进 | command + ] |
| 后退 | command + [ |
| 最近编辑的文件 | command + e |
| 最近编辑的代码块 | command + shift + e |
下面附上一段录屏，演示一下上面所说的这几种操作方式的示范：
3.1.2、在 vscode 中使用这类快捷键
前进 / 后退的快捷键和 webstorm 的一致，但是最近打开过的文件需要下载一个插件才能支持：
3.2、refactor
代码重构是一个高频的操作，包括但不限于：
- 改动变量名
- 改动函数名
- 移动文件 / 函数 / 变量 到另外一个目录下
不过这类属于高危操作，但是如果借助于 ide 的能力来做的话通常就会事半功倍。
3.2.1、在 webstorm 中重构代码
选中需要重构的变量 / 方法，按住 ctrl + t，选择 rename ，webstorm 会高亮出当前文件中所有的相关的变量 / 方法，填入重构后的名字即可全部替换。
3.2.2、在 vscode 中重构代码
按住 shift + F6，如下图所示：
键入需要修改的名字即可。
未完待续......