一、前言

相信大部分人在日常 coding 的时候总是会碰到一些效率问题，即总能遇到一些重复繁琐的工作。既然我们是程序员，那么就应该用程序的能力来解决这部分问题。

下面，笔者就来分享一些基于编辑器的常见的能提高编码效率的手段。学会之后，不仅可以提高效率，也可以在其他人面前展示自己装 X 😄。

二、Code Snippets

code snippets 相信很多代码编辑器都是支持的，用的好的话可以让我们节省掉很多时间。

常见的比如说特定文件类型的一些初始化的代码。举个例子：像写 React 的时候，我们可以利用编辑器提供的能力来生成一份特定的 code snippets：

import * as React from 'react'

export function Test() {
  return (
    <div></div>
  )
}

因此，这部分主要分享两个点：

1. 如何在主流的代码编辑器中创建自己的 code snippets，如 webstorm 和 vscode
2. 一些常用的 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：

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

配置可以参考：

{
  "try catch finally": {
		"scope": "javascript,typescript",
		"prefix": "trycf",
		"body": [
			"try {",
				"$1",
			"} catch (error) {",
				"console.error(error)",
			"} finally {",
				"$3",
			"}"
		],
		"description": "try catch finally"
	}
}

其中：

上面其实已经讲过 snippets 的用法了，所以这里可以重点关注一下 vscode 里 code snippets 的配置格式。

1.2.2、Postfix Completion

虽然 vscode 没有自带这个功能，但是所幸 vscode 有万能的插件，可以去插件市场搜索：

目测功能和 webstorm 大差不差，推荐大伙可以自行去体验一下，这里就不再赘述。

三、常用的快捷键

3.1、前进 / 后退 / 最近编辑的文件 / 最近编辑的代码块

试想一下以下几种在日常 coding 中常见的场景：

• 在同一个文件的不同代码块之间跳转
• 在不同文件之间跳转
• 在上次编辑的文件和当前文件中跳转

如果不使用快捷键的话，我们只能依靠滑动 / 搜索 / 点击 Tab 切换来处理这几个场景，但是用上了快捷键那么就方便多了。

3.1.1、在 webstorm 中使用这类快捷键

前面所说的这几种操作，在 webstorm 中的对应的快捷方式如下：

下面附上一段录屏，演示一下上面所说的这几种操作方式的示范：

3.1.2、在 vscode 中使用这类快捷键

前进 / 后退的快捷键和 webstorm 的一致，但是最近打开过的文件需要下载一个插件才能支持：

3.2、refactor

代码重构是一个高频的操作，包括但不限于：

• 改动变量名
• 改动函数名
• 移动文件 / 函数 / 变量 到另外一个目录下

不过这类属于高危操作，但是如果借助于 ide 的能力来做的话通常就会事半功倍。

3.2.1、在 webstorm 中重构代码

选中需要重构的变量 / 方法，按住 ctrl + t，选择 rename ，webstorm 会高亮出当前文件中所有的相关的变量 / 方法，填入重构后的名字即可全部替换。

3.2.2、在 vscode 中重构代码

按住 shift + F6，如下图所示：

键入需要修改的名字即可。

未完待续……

原文链接：https://juejin.cn/post/7334882866013683747 作者：Tonychen