V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
n0thing2tAll
V2EX  ›  Visual Studio Code

csnp,一个 vscode 代码片段生成管理脚本

  •  1
     
  •   n0thing2tAll · 2023-10-07 09:05:29 +08:00 · 1395 次点击
    这是一个创建于 405 天前的主题,其中的信息可能已经有所发展或是发生改变。
    • 具体使用可看 GITHUB 链接 README
    • 觉得好用的话,想要一个小小的 start ~ qaq
    第 1 条附言  ·  2023-10-07 12:17:55 +08:00

    csnp 是一个由 ts 编写的 node 脚本

    基于 VS Code 内置可自定义代码片段的功能(官方文档介绍)

    给予开发者可以快速和方便地创建 VS Code 代码片段的能力

    使用场景

    代码生成的使用场景:

    在 js 文件中,输入指令 -log 回车后生成代码 console.log('-> log', _)( *_ 为光标所处位置*)

    在 VS Code 的 .code-snippet 文件中

    • 指令 -log 代表一个 prefix

    • 代码 console.log('-> log', _) 代表一个 body

    通过 csnp 指令可以快速生成 log.csnp 文件,.csnp 可将这两者通过 markdown 友好的语法进行管理,生成在项目的根路径下

    .vscode/.csnp/js/log.csnp

    此处的 js 在 csnp 中代表一个代码片段的类型,既 csnp type

    快速上手

    # 1. 全局安装
    $ npm i -g csnp
    
    # 2. 初始化 csnp 文件
    $ csnp
    
    # 3. 打开 csnp 文件,编辑属于自己的代码片段
    
    # 4. 生成 code snipepts
    $ csnp push
    

    .csnp 文件

    ---
    name: Log
    prefix: '-log'
    description: log sth
    ---
    console.log('-> log', $1)
    

    log.csnp 通过执行 csnp push 命令转换为 js.code-snippets 文件后,即可使用指令 -log

    .code-snippets 文件

    js.code-snippets 文件是一段 json,VS Code 会自动解析此后缀的文件

    {
      "Log": {
        "prefix": "-log",
        "body": [
          "console.log($1)"
        ],
        "description": "log sth"
      }
    }
    
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2792 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 12:42 · PVG 20:42 · LAX 04:42 · JFK 07:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.