乐趣区

关于visual-studio-code:使用好visual-studio-code-用户代码片段snippet推荐一个小工具

jiezi

用户代码片段 (snippet) 是什么

古代 IDE 首先带来的就是智能语法提醒器,vscode 也不例外, 其用户代码片段性能空前的弱小, 每种语言都有很多大家分享的 snippet 插件.

然而, 依然是无奈满足咱们的需要, 比方

1. 集体习惯的
2. 我的项目要求的
3. 多个设施之间代码端的共享
4. 项目组内代码端的共享
5. 我的项目间的用户代码段的切换

等等 …

所以明天介绍一个针对于 vscode 的用户代码段的管理工具

Snippets

VS Code 的代码片段 (snippet) 管理工具
我的项目地址:http://alan0405.gitee.io/snip…

能做什么

治理本机 VS Code 的代码片段 (snippet), 并可通过网络将本机代码片段备份到指定的 FTP 服务器。
通过 FTP 服务器能够在设施之间共享代码片段。

利用场景

  1. 依据集体爱好，自行编写代码片段。
  2. 依据我的项目不同，设计不同的代码片段。
  3. 在项目组对立应用，让代码更标准。

特点

  1. 疾速治理
  2. FTP 备份、复原和共享
  3. 目前只反对 windows

总览

运行环境

1. .net framework 4.6.1
2. chrome,firefox,edge 等 古代浏览器

装置

下载地址

https://snippets-for-vscode-docs.surge.sh/snippets.zip

运行

解压后间接运行 snippets.exe

Snippets

速度是制胜的要害

创立 snippet

Snippets 不能创立代码片段文件，咱们须要在 VS Code 中创立最后的代码段文件。

  1. 点击菜单 文件 -> 首选项 -> 用户片段

  1. 在弹出的选项中找到想要创立的代码段文件，例如 javascript.json 是 js 文件用的用户片段。

    关上 Snippets

  2. 间接运行 snippets.exe，关上如下的页面。

  1. 左侧栏中 javascript.json 即是该代码片段文件，点击它即可开始编辑。

  1. 点击 右侧呈现 New Snippet 开始创立第一个代码片段吧！

  1. 批改题目为 for loop 在上面代码编辑框中输出
for (let i = 0; i < list.length; i++) {const item = list[i];                
}

  1. 选中 i，点击￥{:}, 输出 1，选中 list，点击 ${:}，输出 2，选中 item，点击 ${:}，输出 3，即可将 i，list 和 item 等变量转换成替换我的项目
  2. 点击 Save 按钮，保留代码片段
  3. 试一试在 vscode 中，新建一个 js 文件，并输出 for loop，即可看到弹出的代码段提醒了

VSCode 代码片段根本语法阐明

你能够拜访 vscode 官网地址取得更具体的介绍
https://code.visualstudio.com…

一个例子

    // in file 'Code/User/snippets/javascript.json'
    {
    "For Loop": {"prefix": ["for", "for-const"],
        "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
        "description": "A for loop."
    }
    }
prefix 前缀，emmet 触发条件，例如上述片段，输出 for loop 时会触发 emmet 提醒 

body 片段主体，数组模式 

description 形容，emmet 提醒的显示内容

根本语法

应用 $ 插入用户自定义内容
$number (1-9) 数字的大小示意光标的先后顺序，应用 tab 键挪动光标地位，多个同序号将呈现多个光标，输出雷同的内容
$0 示意光标最终地位
${number: defaultContent} 为插入内容设置默认值
${number|select1,select2|} 为插入内容提供可选项
$name 或 ${name: default} 插入变量值，若变量名未定义则插入变量名
退出移动版