使用vscode插件定制自己的常用代码块

站长

2024年06月09日 09:35 · 阅读数 39

背景

项目开发过程中，总会遇到一些复用的代码，比如一些常见的css,或者js代码块等等，这些又不足以抽取公用的插件库，又需要自定义里面的参数，很多同学的常规操作是：ctrl + c/v,我不能说这样做不对，只是这样子是不是有点效率太低了，是不是还需要找个这个复用的代码，再去复制粘贴，有时候一不小心还忘记去掉一些参数，导致出现一些意想不到的问题，这时候一个快捷并且常用的工具就该实现一下了，所以接下来就来实现下这个快捷工具吧。

先新建个项目

先直接使用官方提供的yo 脚手架来生成对应的项目

 // 安装需要的包
npm install -g yo generator-code

yo code

上面的俩个包用途如下：

yo模块全局安装后就安装了Yeoman，Yeoman是通用型项目脚手架工具，可以根据一套模板，生成一个对应的项目结构

generator-code模块是VS Code扩展生成器，与yo配合使用才能构建项目。

初始化很简单，一直enter就好了

使用vscode插件定制自己的常用代码块

最重要的在这

怎么开发代码块，才能生效呢，接着往下看

在package.json中

"contributes": {
    "snippets": [
      {
        "language": "vue", // 支持的语言
        "path": "./snippets/vue3.json" // 代码块文件路径
      }
    ]
 }

language的参数有哪些： code.visualstudio.com/docs/langua… 2. 在根目录新建 snippets目录

然后创建一个json文件，可以起名vue3.json

{
    "Print to vue": { // 这里是在使用的时候快捷文案，也可以自己定义成中文，方便知道这个代码块是干嘛的
      "scope": "vue", // 作用于是什么，这里标识只在vue文件  javascript,typescript等等
      "prefix": ["vue3"], // 触发 snippets 的前缀，可以使多个的
      "body": [ // 代码块的主要内容
        "<template>",
        "  <div>",
        "  </div>",
        "</template>",
        "",
        "<script lang="ts" setup name="$1">",
        "import { ref, reactive } from 'vue';",
        "",
        "</script>",
        "",
        "<style lang="less" scoped></style>",
        ""
      ],
      "description": "vue3默认代码片段" // 描述，也是为了查看这代码是干嘛的，自己定义清就行
    }
  }