让编码效率翻倍，这招你学废了吗？

前端

2023-12-24 07:18:26

今天下午我在使用 VSCode 开发小程序时，发现代码片段库实在太少了，这极大地影响了我的开发效率。作为一个每天都需要用到代码片段的人，我开始思考为什么 VSCode 商店里提供的代码片段这么少，以及我是否可以自定义自己的代码片段。

于是我查阅了一些资料，惊喜地发现 VSCode 自带了代码片段自定义功能（虽然藏得有点深）。这就意味着我可以创建自己需要的代码片段，极大地提高我的编码效率。

下面我将详细介绍如何使用 VSCode 自定义代码片段。

步骤：

打开 VSCode，点击菜单栏的“文件”->“首选项”->“用户代码片段”。
在左侧边栏中选择要创建代码片段的语言，然后点击右侧的“新建片段”按钮。
在“名称”字段中输入代码片段的名称，在“前缀”字段中输入触发代码片段的快捷键（例如，my-snippet）。
在“正文”字段中输入代码片段的内容。可以是单行代码，也可以是多行代码。
点击“保存”按钮即可创建代码片段。

示例：

比如，我创建了一个用于在 React 中创建函数组件的代码片段：

{
  "Name": "React Function Component",
  "Scope": "javascript,typescript",
  "Prefix": "rfc",
  "Body": [
    "import React from 'react';",
    "",
    "const ${1:componentName} = () => {",
    "  return (",
    "    <div>",
    "      Hello, ${1:componentName}!",
    "    </div>",
    "  );",
    "};",
    "",
    "export default ${1:componentName};"
  ],
  "Description": "Creates a React function component."
}