VSCode 中使用 Snippets 设置常用代码块

创作时间:

作者:

@小白创作中心

VSCode 中使用 Snippets 设置常用代码块

引用

CSDN

https://blog.csdn.net/weixin_46661464/article/details/145693854

背景

在开发中，有很多代码片段是重复的，例如：vue文件中的模版，react 中的模版，打印的 log 等等，很多很多。对于这些重复性的工作，vscode 官方提供了解决方案-Snippets in Visual Studio Code，以此来提高开发效率。下面就简单介绍下基本的使用方法：

使用步骤

以mac 系统为例（win 也大差不差）。搭配图文描述

找到配置入口（如下图）：
code -> Preferences -> Configure Snippets
进入到选择页面（如下图）。假如是第一次配置的话，是没有序号 1的（我自己正在使用的代码片段）；

第一次配置，可以点击序号 2，配置全局的代码片段，会产生一个
code-Snippets
后缀的文件，这个文件就是存放全局代码片段的文件了。所谓全局，也就是不管什么语言，都可以使用全局的代码片段；
也可以点击序号 3，为正在开发中的项目，配置自定义的代码片段；
还可以选择序号 4，为指定的语言配置自定义代码片段。在书写对应语言的时候，vscode 会检测到语言类型，然后就可以使用配置的代码片段了。

进入到配置页面，以我自己使用的代码片段文件
global-test-snippets.code-snippets
为例：
框起来的这块代码片段，可以实现：在 js 文件中，打印
log
然后选择
Snippets_console
，输出
console.log('$1: ', $2);
然后光标会定位到 $1位置，点击
tab
按键，又定位到 $2，光标的位置会根据序号的次序来移动，但是$0 作为会光标最终的落点。
字段解释：

Snippets_console
：表示代码片段的名字（使用的时候对应序号 2）；
scope
：代码片段的作用域，我这边限制了js、ts、jsx、tsx 可以触发这个代码片段。（对应新手来说，该值可以就填个空字符串，表示任何语言都可以使用该代码片段）；
prefix
: 触发代码片段的快捷单词（使用的时候对应序号 1）
body
: 自定义代码片段，一般用数组包裹;
description
: 代码片段的描述文案。

结尾

本篇文章只是初步介绍了在 vscode 中使用代码片段的基本使用方法和语法，官网中还提供了更加详细的内容，比如变量的使用、默认值的使用等。如果想要了解的更加深入，可以看文章末尾的参考内容。因为我也是近期才发现这个东西的，就想着写篇文章记录、分享一下。如有不足之处，烦请指出，共同进步进步。
下面是我自己使用的一些代码片段：

{
  // congsole.log 输出到控制台, 提供变量
  "Snippets_console": {
    "scope": "javascript, javascriptreact, typescript, typescriptreact",
    "prefix": "log",
    "body": [
      "console.log('$1: ', $2);",
      "",
      "$0"
    ],
    "description": "Log output to console"
  },
  // congsole.log 输出到控制台, 不提供变量
  "Snippets_console1": {
    "scope": "",
    "prefix": "log1",
    "body": [
      "console.log('调试一下');",
      "",
      "$0"
    ],
    "description": "Log output to console1"
  },
  // react 类组件代码片段
  "Snippets_react类组件": {
    "scope": "",
    "prefix": "rcc",
    "body": [
      "import React, { Component } from 'react';",
      "",
      "class ${1:ReactComponent} extends Component {",
      "  render() {",
      "    return (",
      "      <div>",
      "        $2",
      "      </div>",
      "    );",
      "  }",
      "}",
      "",
      "export default ${1:ReactComponent};",
      "",
    ],
    "description": "React Class Component"
  },
  // react 函数组件代码片段
  "Snippets_react函数式组件": {
    "scope": "",
    "prefix": "rfc",
    "body": [
      "import React, { useState } from 'react';",
      "",
      "export default function ${1:ReactComponent}() {",
      "  return (",
      "    <div>",
      "      $2",
      "    </div>",
      "  );",
      "}",
      "",
    ],
    "description": "React Function Component"
  },
  "JSDoc for API Function": {
    "prefix": "jsdoc-api",
    "body": [
      "/**",
      " * ${1:接口描述：}",
      " *",
      " * @param {any} params - 请求参数",
      " * @returns {Promise<any>} 返回数据",
      " */"
    ],
    "description": "API 请求函数的 JSDoc 注释模板"
  }
}