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

背景

在开发中，有很多代码片段是重复的，例如：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 中使用代码片段的基本使用方法和语法，官网中还提供了更加详细的内容，比如变量的使用、默认值的使用等。如果想要了解的更加深入，可以看文章末尾的参考内容。因为我也是近期才发现这个东西的，就想着写篇文章记录、分享一下。如有不足之处，烦请指出，共同进步进步。

下面是我自己使用的一些代码片段：

javascript">{// 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 注释模板"}
}