VSCode Snippets 使用和管理

老是写重复代码？用一个实例教你如何使用 VSCode Snippets 解放生产力 - 前端西瓜哥的个人博客 (fstars.wang)

1. 可以通过vscode 左下角的菜单直接 生成 snippets 模板代码
2. snippets可以是全局的也可以是归属到当前项目的，生成的配置在.vscode 目录下

扩展思维

方法1

0. 整理出要抽象成的snippets 代码片段
1. 使用vscode 自带的 configurte User Snippets 生成全局或者项目级别的 snippets，项目级别的会在项目的 .vscode 目录下生成 prefix 相应的code-snippet 文件，添加到git后，方便其他同事使用
2. 复制整理过的 snippets代码片段 在工具： snippet generator (snippet-generator.app) 配置生成相应的vscode snippet，复制到 .vscode 相应的文件中

方法2

0. 安装插件vscode 插件 Easy Snippet - Visual Studio Marketplace

   

1. 在左侧的sideBar 就有改插件的icon，可以浏览已有的snippets，通过snippet 的scope 分组管理

2. 新加snippets： 选中已经整理好的snippet，使用vscode 的command调用 Easy Snippet : Create Snippet from Selection，设置prefix就可以生成相应的snippet了

   

3. 优点是UI 容易查看使用已有的snippet，缺点是不是标准的snippets写法，不能同步协同其他人使用

Feature

可以改进个vscode extension 结合两个项目的优点来使用，这样开启vscode sync可以不同电脑间同步了

Reference

0. VSCode中snippets（代码模板）的使用凶鸡的博客-CSDN博客snippets

1. Snippets in Visual Studio Code 英文官网指导

2. Easy Snippet - vscode最好的snippet代码片段管理器 - 知乎 (zhihu.com)

3. pawelgrzybek/snippet-generator: Snippet generator for Visual Studio Code, Sublime Text and Atom (github.com)

   online： snippet generator (snippet-generator.app)

本文由博客一文多发平台 OpenWrite 发布！