vscode snippet开发

ggbond
228 阅读3分钟

虽然实际应用场景没有用到过，但是随着以后的开发生活，谁能说得准呢，有备无患，而且，有一个自己开发的vscode，多帅哦。而且vscode的定义范围十分宽广，也可以理解说是功能十分强大。可以到这里康康vscode的一些好插件。 vscode的插件类别有很多，这也是为什么说它功能十分强大，并且拓展性非常强。下面罗列一些我们常见的一些类型。

  1. 普通插件类型
  2. 颜色主题类型
  3. 语言支持类型
  4. 代码补齐
  5. 创建webview实现功能类的等等等等，如有不齐，欢迎指教 接下来我们开始。 vscode已经为我们提供了一套工具了，首先我们暗转yo code命令
npm install -g yo generator-code

安装完成之后，我们直接运行 yo code指令 根据它的提示来往下走。 第一步是选择我们的插件类型 image.png

这里就不一一概述了，插件类型和选择，我看了网上很多篇教程，包括百度了插件类别，都搜不到想要的中文结果，但是 官方api 里有解释，这里也不拓展开了，其实也只是帮我们去初始化项目的一些基本配置和demo，其实不太关键。 我们本次要做的是一个代码补齐功能，也就是Code Snippets，其实真要说的话，也算是重复造轮子了，毕竟这种工具市面上很多，但是，做一套适合自己业务场景的，我觉得还是很有必要，并且有挑战性有意义的一件事情。 选择类型之后的问题就是名字之类的一些常规配置。 这是生成的项目目录 image.png

看下目录就能发现，最重要的文件就是snippets/snippets.code-snippets这个文件了，这个只是官方生成的文件名罢了，并不是指定文件名，可以自行更改，只需要在package.json里面去更改配置就好了，我们改下

// package.json
{
    "name": "react-hook-quick",
    "displayName": "react-hook-quick",
    "description": "generator function component quickly",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.63.0"
    },
    "categories": [
        "Snippets"
    ],
    "contributes": {
        "snippets": [
            {
                "language": "javascript",
                "path": "./snippets/snippets.code-snippets"
            }
        ]
    }
}

// 主文件snippets.code-snippets
{
  "funtionComponent": { // 名字而已，与触发条件无关
    "scope": "javascript", // 作用范围，能指定作用于哪个语言和环境
    "prefix": "rhc", // 生成指令的触发条件
    "body": [ // body数组一个表示一行
      "import React, { useState, useCallback, useEffect } from 'react'",
      "export default () =>{",
      "  return (",
      "    <div className='page'>demo</div>",
      "  )",
      "}"
    ],// 生成的代码
    "description": "生成react方法组件", // 描述
  },
  "useState": {
    "scope": "javascript",
    "prefix": "us",
    "body": [ // $1表示光标刚开始的位置，$2包括之后的槽口，通过tab按钮可以直接跳至
      "const [$1, set$1] = useState($2)",
    ],
    "description": "生成useState方法",
  },
  "useCallback": {
    "scope": "javascript",
    "prefix": "uc",
    "body": [
      "const $1 = useCallback(()=>{",
      "  // your function",
      "},[$2])"
    ],
    "description": "生成useCallback方法",
  },
}

这样子就完事了，然后就开始调试，一般情况下，vscode提供的调试快捷键都是F5，也可以在如下位置去控制 image.png

开启调试之后会新开一个vscode编辑器image.png ，title是这样的，结束调试之后会自动关闭。 image.png

点击之后之后，就生成了代码如下， image.png

至此，我们算是完成了一个简单功能的开发，但是但是，还需要发布，全局使用，这才是最完美的ending，这里vscode官方提供了一个工具 vsce ，可以按照流程走下，中间会碰到一个问题，就是执行命令vsce package的时候，会报个错image.png

我们只需要按照提示加东西就好了，image.png

打包完成生成一个.vsix文件，这个文件能直接安装 image.png ，也能发布发布的过程需要登陆微软开发者账号，比较麻烦，注册和发布地址在这 ，过程比较麻烦，所以我这里只用了本地安装的方式。！注意，安装完之后记得重启vscode，才会有效果。 done

参考：VSCode插件开发全攻略（二）HelloWord vscode官网 你还在一个字一个字敲代码吗？【vscode snippets 入门教程】

avatar
文章
阅读
粉丝