仓库源文站点原文


title: 用 Code Snippet 提高开发效率 layout: '../../layouts/Post.astro' date: 2020-12-25

tags: blog

写代码的时候总会遇到一些相同的但是反复要写的代码,比方说每次写一个 React Component, 都要这样写一遍:

function App () {
  return (
    <>
    </>
  )
}

export default App

这时候很适合把他写成 Code Snippet, 让编辑器帮我去生成。每个编辑器或 IDE 都有 Snippet 功能,我自己常用 VS Code, 所以我会去写一些 VS Code 的 Snippet 文件。

VS Code code snippet 的配置入口:

VS Code code snippet 配置入口

VS Code code snippet 配置是一个 JSON 文件,按照它的语法, 我可以这样去实现一个上面提到的,用于生成 React Component 代码的 snippet:

{
  "fc": {
    "scope": "javascript,typescript,typescriptreact",
    "description": "React Function Component",
    "body": [
      "function ${componentName} () {",
      "  return (",
      "    <>",
      "    </>",
      "  )",
      "}",
      "",
      "export default ${componentName}"
    ],
    "prefix": "fc"
  }
}

然后我在编辑器里只要输入 fc, 就可以选择这个 snippet:

用 Snippet 很方便,但是编写这个 Snippet 体验非常糟糕,因为需要把代码块一行一行地转换成字符串,空格也要自己加。

我想这也是我身边这么少人用 Snippet 的原因,我自己也深受其害。为了方便管理我的 Snippets 以及方便地导出为 VS Code code-snippets 文件,我写了个程序,可以让我把每个 snippet 写到单独的文件里,然后输出 VS Code code-snippets 格式的 JSON.

用 snp 管理 snippets

目前只适用于 VS Code

这个程序叫 snp, 你可以用 curl 直接安装这个程序:

$ curl -sf https://gobinaries.com/djyde/snp | sh

于是,我现在管理 snippets 非常轻松。创建一个目录,用来存放这些 snippets,

$ mkdir snippets
$ cd snippets

然后我就可以创建我的 snippets, 以触发的词作为文件名,.snp 作为后缀。例如我创建一个输入 fc 就会触发的 snippet:

$ touch fc.snp

.snp 文件里,你可以按照 snippet 语法 直接写你需要生成的代码,然后在文件的头部加上必要的信息:

---
scope: javascript,typescript,typescriptreact
description: React Function Component
---

function ${componentName} () {
  return (
    <>
    </>
  )
}

export default ${componentName}

scope 指定了这个 snippet 在哪个语言环境生效,具体可以参照 VS Code 的文档

然后执行:

$ snp -p

你会看到命令输出了一段 JSON, 你可以把这段 JSON 写入文件里:

$ snp -p > my-snippets.code-snippets

然后手动复制到 VS Code 的 snippets 文件里。

当然,如果你嫌每次更新都要手动复制很麻烦,你可以直接运行:

$ snp -u

这样 snippets 会自动写到 VS Code 的目录里,你不需要手动更新。

这样就可以像我一样,在一个文件夹里统一管理 snippets, 用 snp 同步到 VS Code,还能上传到 GitHub:

我的 snippets 目录

<br />


<br />