如何在 VSCode 中添加自定义代码段？

是否可以在 VisualStudio 代码中添加自定义代码段？如果是这样，怎么做？VSCode 是基于 Atom 的，所以这应该是可能的。

153774 次浏览
小开

这是目前尚未记录在案的特性，但很快就会出现。有一个文件夹，您可以添加他们，他们将出现，但它可能会改变(其未记录的原因)。

最好的建议是把它添加到用户语音站点，等到最终版本。

小开

VSCode 在版本0.5 看这里中引入了这一点。 代码片段语法遵循 TextMate 片段语法，并且可以在用户首选项中编写。

小开

从 版本0.10.6开始，您可以添加自定义代码片段。 您可以通过将 json 文件放置在 C:\Users\<yourUserName>\AppData\Roaming\Code\User\snippets中来查找/创建自定义代码段。 例如，自定义的 javascript 代码片段将位于 \snippets\javascript.json中

您还可以发布您的代码片段，这也是一个非常优秀的特性。John Papa 创建了一个漂亮的角度 + 脚本代码片段，你可以在 市场中下载作为扩展。

下面是 javascript for 循环文档的一个示例片段:

"For Loop": {
"prefix": "for",
"body": [
"for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
"\tvar ${element} = ${array}[${index}];",
"\t$0",
"}"
],
"description": "For Loop"
},

在哪里

  • For Loop是代码段名称
  • prefix定义 IntelliSense 下拉列表中使用的前缀。
  • body是代码片段内容。 可能的变量是:
    • 标签站1美元，2美元
    • 变量的 ${ id }和 ${ id: label }和 ${1: label }
    • 具有相同 id 的变量是连接的。
  • 中使用的说明 智能感应下降
小开
  1. 按 > shift + command + p键入代码段
  2. 选择 首选项: 配置用户代码段
  3. 选择要为其在 vscode 输入框中添加自定义代码段的语言类型
  4. Vscode 有一些注释来解释如何添加代码片段，如下所述: > < strong > vsdoc 或者你可以按照下一个链接来看一个简短的指南:

比方说，我们想为 GO 语言打开自定义代码片段，然后我们可以这样做:

  1. 点击 > command + p
  2. 键入: go.json + enter，然后在自定义代码片段页面上着陆

代码段以 JSON 格式定义，并以每个用户(language ageId)存储。Json 文件。例如，Markdown 代码片段放在 Markdown.json 文件中。

使用工具:

小开

您可以添加自定义脚本，转到 File --> Preferences --> User Snippets。选择您的首选语言。

如果你选择 Javascript，你可以看到 console.log(' ');的默认自定义脚本如下:

"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
},
小开

如果不想用 JSON 编写代码段，请查看 剪刀手。它允许您像编写代码本身一样编写代码片段——不必将每一行都包装成引号、转义字符、添加元信息等等。

它还可以让你 写一次，在任何地方出版。因此，您可以在 VS Code、 Atom 和 Sublime 中使用代码片段，以后还可以使用更多的编辑器。

小开

选项1-使用 片段生成器扩展。

它支持代码到 JSON 的转换，并提供可选的 scope支持和空间到 \t的转换。

演示:

Demo

选项2-另一个扩展是 片段创造者(不推荐)。

安装完成后，你所要做的就是:

  1. 选择要制作代码段的代码。
  2. 右键单击它并选择“命令调色板”(或 Ctrl + Shift + P)。
  3. 写“创建代码段”。
  4. 选择触发代码段快捷方式所需要监视的文件类型。
  5. 选择代码段快捷方式。
  6. 选择一个代码段名称。

选项3-检查这个 网站。您可以为 vs 代码、升华文本和原子生成代码片段。

在此站点上生成一次代码片段。转到相应 IDE 的代码片段文件并粘贴相同的代码片段文件。例如，对于 VS 代码中的一个 JS 代码片段，进入 File-> ferences-> user nippet，然后它打开 javascript.json 文件，然后粘贴上面网站中的代码片段，然后我们就可以开始了。

小开

有一个名为: 片段创造者的 VSCode 插件(现在不推荐使用)。

安装完成后，你所要做的就是:

  1. 选择要将其作为代码段的代码。
  2. 右键单击它并选择“命令调色板”(或 Ctrl + Shift + P)。
  3. 写“创建代码段”。
  4. 选择需要监视的文件类型，以触发代码段快捷方式。
  5. 选择代码段快捷方式。
  6. 选择一个代码段名称。

仅此而已。

注意: 如果您想编辑代码片段，可以在[ fileType ] . json 中找到它们
示例: Ctrl + P，然后选择“ javascript.json”

小开

你可以看看这个视频来获得一个简短的教程

Https://youtu.be/g1outcfxqsu

转到 文件-> 首选项-> 用户代码段。选择你喜欢的语言。
现在输入以下代码来创建一个 for 循环片段: < br > 

  "Create for loop":{
"prefix": "for",
"body":[
"for(int i = 0; i < 10; i++)",
"{",
"   //code goes here",
"}"
],
"description": "Creates a for loop"
}

你完蛋了。
在编辑器中键入“ for”并使用第一个预测

捷径

  1. 安装 片段创造者扩展(现在已不推荐)。
  2. 突出显示制作代码段所需的代码。
  3. 按下 ctrl + shift + P，在命令面板上键入“ Createnippet”，然后 按回车
  4. 选择要为其创建代码段的语言(例如:-CPP) ，然后键入
    代码段名称，键入代码段快捷方式，然后键入代码段描述。
    你现在可以走了。
    在步骤4输入的编辑器中键入代码片段快捷键，并选择首先出现的 < br > 预测(如果没有预测，请按 ctrl + space)。

希望这对你有帮助:)

注意: goto File-> Preferences-> User Snippets。然后选择用于创建代码片段的语言。您将在那里找到代码片段。 < br >

小开

我尝试在 javascriptreact.json 中添加代码片段，但是没有用。

我试过在全球范围内添加代码片段，效果非常好。

FILE --> Preferences --> User snippets

在这里选择 New Global Snippets File，命名为 javascriptreact.code-snippets。

对于其他语言，您可以将其命名为[ your _ language ] . code-nippet

enter image description here

小开

这可能不是一个真正的答案(正如上面的一些回答) ，但是如果您对为其他人创建自定义代码片段感兴趣，您可以使用 yeoman 和 npm (默认情况下与 NodeJS 一起使用)创建扩展。注意: 这仅用于为其他系统创建代码段。但是对你也有用！只不过整个过程都需要 JS 代码。

小开

关于 MacOS:

  1. 打开 VSCode
  2. 代码 -> 偏好-> < strong > 用户代码段
  3. 搜索“ python”(或任何语言)
  4. 像这样写你的片段:
{
"Write pdb": {
"prefix": "pdb",
"body": [
"import pdb; pdb.set_trace()",
"$2"
],
"description": "Write pdb.set_trace() to debug Python scripts"
}
}
  1. 用 command + S保存文件。
小开

您可以添加自定义脚本，进入文件-> 首选项-> 用户代码段。选择您喜欢的语言。

像我的代码是去，我这样做如下:

"channel code": {
"prefix": "make_",
"body": [
"${1:variable} := make(chan ${2:type}, ${3:channel_length})",
"$4"
]
}

解释: $1将采取您的标签 & 给予提示什么是标签值，我们使它像 ${1:some_variable}可以给我们提示什么是那些

希望能有帮助！


提交答案