首页 > 其他分享 >VSCode 小技巧 配置代码模版 vscode snippets

VSCode 小技巧 配置代码模版 vscode snippets

时间:2023-10-17 09:13:33浏览次数:26  
标签:body name VSCode snippet vscode prefix scope snippets

  1. 第一步 mac 输入 shift + command + p (windows 输入 ctrl + shift + p), 输入snippets, 点击如下图选项。
  2. 第二步,选中新建全局代码片段文件。
  3. 第三步,输入一个全局配置文件名,例如 snippet.config
  4. 第四步,进行配置

{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"自定义hook函数": {
"prefix": "useHook",

"body": [
  "import { useState, useRef, useEffect } from 'react';",

  "",

  "function $1<T>(initialState: T) {",
  "const [state, setState] = useState<T>(initialState);",
  "}",
  "",
  "export { $1 }"
],

"description": "Create useHook.ts"

},

"Form Fields": {
"prefix": "fields.tsx",

"body": [
  "export const searchFields = [",

  "{",

  "name: 'campaignID',",

  "key: 'campaignId',",

  "},",

  "];",

  "export const tableFields = [",

  "{",

  "name: 'campaignID',",

  "key: 'campaignId',",

  "width: 200,",

  "},",

  "{",

  "name: '操作',",

  "key: 'action',",

  "type: 'action',",

  "width: 120,",

  "fixed: 'right' as FixedPosition,",

  "},",

  "];"
],

"description": "Create useHook.ts"

}
}

标签:body,name,VSCode,snippet,vscode,prefix,scope,snippets
From: https://www.cnblogs.com/honkerzh/p/17768867.html

相关文章

  • 在vscode中将markdown文件导出为pdf
    首先安装插件:然后在md文件中右键,选择如图所示选项跳转到预览界面之后,右键依次选择如图所示选项导出完成,pdf文件与md文件在同一文件目录下。......
  • VSCode 配置C++环境
    MinGW肯定要装的。复制json这篇就够了,但终端会闪掉:VsCode安装和配置c/c++环境(超完整,小白专用)_vscodec++环境-CSDN博客这篇文章配终端:VSCode中C/CPP的完美配置(完成环境搭建、解决终端自动闪退、解决无法调试)-知乎(zhihu.com)......
  • vscode配置git仓库
    本文将详细介绍如何在VSCode中配置Git仓库,以及如何利用这一功能来管理您的代码版本、协作开发和提高工作效率。让我们一起揭开这个主题的神秘面纱,探索编程世界的新奇之处!第一步:安装Git和VSCode在开始之前,您需要确保已经安装了Git和VSCode。Git是一个分布式版本控制系统,而VSCode则是......
  • vscode配置git环境
    在开发过程中,版本控制是一个非常重要的环节。Git作为目前最流行的版本控制工具之一,被广泛应用于各个领域。而VSCode作为一款强大的代码编辑器,也提供了对Git的完整支持。本文将介绍如何在VSCode中配置Git环境,以便更好地管理和控制代码版本。小标题1:安装Git安装Git在开始配置Git环境......
  • vscode修改git用户名和密码
    VSCode是一款由微软开发的轻量级代码编辑器,它具有强大的代码编辑和调试功能,支持多种编程语言。Git是一种分布式版本控制系统,用于跟踪文件的变化并协同开发。在使用VSCode进行代码开发时,经常需要与Git进行交互,包括修改用户名和密码等操作。2.修改Git用户名和密码的原因有时候,我们可......
  • vscode中文搜索乱码或搜索不到
    使用vscode在全局搜索时,代码中的内容无法搜索出来,或者搜索出来是乱码。经验证:与vscode的语言设置无关,设置为中文或英文都是一样的后面猜想到会不会与文件自身的编码有关,因为我们项目中的代码文件大多是GB18030的,而vscode默认的编码应该是UTF-8解决方案经过验证有两2种方法可......
  • xampp+vscode 安装PHP断点调试xdebug
    官网下载地址:https://xdebug.org/download.php 这里需要特别注意,有TS(threadsafe)和NTS区别,我建议不要下载最新的,我一开始使用最新的发现插件没有匹配上,走了好大一段弯路,想想都难过可以使用官方的工具去找到适合自己的工具:https://xdebug.org/wizard.php 下载该版本后......
  • ubuntu安装vscode
    本文章过程在ubuntu20.04版本16.04下安装非常顺利官网:https://code.visualstudio.com/Download#下载链接格式https://update.code.visualstudio.com/{version}/linux-deb-x64/stable#下载版本:1.57.0wgethttps://update.code.visualstudio.com/1.57.0/linux-deb-x64/s......
  • App:基于VsCode的批量Diff工具
    1.效果预览1.1界面图1.2点击操作-Diff2.下载包https://pan.baidu.com/s/1Xe0vjtc-izAXYTXEfuOEcQ?pwd=Tidy3.技术方案3.1技术架构采用本地服务+React。3.2技术清单3.2.1服务框架是TidyHttp3.2.2React组件框架是antd3.2.3开发语言是C#4.其他......
  • folder-alias vscode左侧目录树 起别名 插件
    folder-aliasvscode左侧目录树起别名插件插件效果不足文件路径或目录路径中包含中文会挂不上别名,纯英文路径没问题个人意见我的项目都是纯英文,所以到不用考虑中文问题,还有个小惊喜就是打开的tab会带上别名非常不错......