VS Code 中设置代码片段

codersjj
834 阅读2分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

有些代码片段是需要经常写的，所以为了提高效率，减少重复工作，我们可以在 VS Code 中设置代码片段，通过自定义的触发条件快速生成对应的代码片段（亲，建议对自己已经熟练掌握了的代码使用代码片段哦）。

怎么设置呢？

在 VS Code 编辑器界面，我们可以依次选择 File（Mac 电脑是 Code） -> Preferences -> User Snippets（或者使用快捷键 Ctrl + Shift + P 打开命令面板，然后输入 Preferences: Configure User Snippets 后回车），接着选择你想创建的目标语言的代码片段（就是你准备给哪种语言创建代码片段），比如我们这里想要创建 html 的代码片段，那就选择 html（如果你之前已经创建过 html 的代码片段，则可以选择 html.json 文件），然后在打开的文件的最外层的对象中按照文件头部给出的案例格式，编写代码片段的名称、前缀（触发的关键词）、代码片段的内容、描述就可以了。

可以看到，VS Code 中设置代码片段有固定的格式，你可以按照格式一行一行地去编写，但那样有点麻烦，所以我们可以借助一个在线工具来生成代码片段的配置代码，然后进行配置使用，步骤如下：

  1. 复制需要生成代码片段的代码；

  • 比如我们这里想要直接生成一整个 html 文档的内容：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>

  <template id="my-app">
    <h2>{{ message }}</h2>
  </template>

  <script src="./js/vue.js"></script>
  <script>
    const App = {
      data() {
        return {
          message: '你好啊'
        }
      },
      template: '#my-app'
    };

    Vue.createApp(App).mount('#app');
  </script>
</body>
</html>

    那就复制整个文档的内容；

  1. 打开 snippet-generator.app/ 网站，在其中生成设置代码片段的代码：

image-20210716125116407.png

填写 Description、Tab trigger，把刚才复制的代码拷贝进 Your snippet 一栏：

image-20210717070147388.png

然后点击右下角的 Copy snippet 按钮复制生成的设置代码片段的代码；

  1. 在 VS Code 中配置代码片段：

code.png

这样，一个代码片段就设置好了（记得保存文件哦，或者开启 VS Code 自动保存功能：File -> 勾选 Auto Save），那么我们编写代码时只要输入了前缀（prefix）的内容，就可以选择自动生成 body 对应的代码片段了。如果还想设置别的 html 代码片段，还是按照之前的步骤，最后把设置代码放到这个配置文件中，每个代码片段之间用 , 分隔即可；

  1. 现在就可以新建一个空白的 html 文件，在其中输入 vue3app 后就可以选择自动生成对应的代码片段了：

image-20210717073220880.png

avatar
文章
阅读
粉丝