Nodejs sublime snippet疑问

Nodejs sublime snippet疑问

要使trigger在Html内嵌js区域起作用,scope应该如何设置？ 如只在html下面片段中起作用 <script type=“laguage”> </script>

2 回复

当然可以。让我们来探讨如何在Sublime Text中创建一个适用于HTML内的嵌入式JavaScript区域的代码片段（Snippet），并确保它仅在这个特定范围内工作。

问题分析

问题的核心在于如何通过Sublime Text的scope设置来限定一个代码片段仅在HTML中的<script>标签内生效。

解决方案

在Sublime Text中，你可以通过设置特定的scope来限定代码片段的应用范围。对于HTML中的嵌入式JavaScript，你需要使用text.html.embedded和source.js.embedded这两个scope值来确保代码片段仅在HTML的<script>标签内生效。

示例代码片段

假设我们想要创建一个名为log的代码片段，当我们在HTML的<script>标签内输入log并按下Tab键时，自动展开为console.log()。以下是实现该功能的步骤：

  1. 打开Sublime Text。
  2. 进入菜单栏选择 Tools > Developer > New Snippet...。
  3. 在打开的文件中输入以下代码：
<snippet>
    <content><![CDATA[
console.log("$1");
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>log</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html.embedded source.js.embedded</scope>
</snippet>
  1. 保存文件，建议将其命名为log.sublime-snippet，并放置在Packages/User目录下。

解释

  • <content>: 定义了代码片段的内容。$1表示光标将定位到这个位置。
  • <tabTrigger>: 设置了触发代码片段的关键字，这里是log。
  • <scope>: 指定了代码片段的应用范围。这里使用text.html.embedded source.js.embedded确保代码片段仅在HTML的<script>标签内生效。

通过这种方式，你可以在Sublime Text中创建高度定制化的代码片段，使其仅在特定的上下文中生效，从而提高编码效率。


要使Sublime Text的snippet在HTML文件中的<script>标签内生效，你需要确保snippet的scope设置正确。默认情况下，Sublime Text将JavaScript代码块的语法上下文设置为source.js。因此，你的snippet需要在这个上下文中被激活。

示例代码

假设你想创建一个snippet，当你输入mySnippet时，会自动生成一段简单的JavaScript代码。你可以按照以下步骤进行配置：

  1. 打开你的用户目录下的snippets文件夹。通常路径是Packages/User/。
  2. 创建一个新的.sublime-snippet文件，例如javascript_snippet.sublime-snippet。
  3. 在该文件中添加以下内容：
<snippet>
    <content><![CDATA[
function myFunction() {
    console.log('${1:Hello World}');
}
]]></content>
    <tabTrigger>mySnippet</tabTrigger>
    <scope>source.js - meta.attribute-with-value</scope>
    <description>My Custom Snippet</description>
</snippet>

解释

  • <content>：定义了snippet的内容。${1:Hello World}表示插入点，默认值为Hello World。
  • <tabTrigger>：定义了触发snippet的快捷键，这里是mySnippet。
  • <scope>：定义了snippet的作用范围。这里设置为source.js - meta.attribute-with-value，意味着这个snippet仅在JavaScript代码块中生效（不包括属性值）。
  • <description>：描述snippet的功能。

注意事项

  • 确保<scope>设置正确，以避免snippet在不需要的地方触发。
  • 如果你的snippet需要在HTML中的<script>标签内使用，确保其范围设置得当。

通过以上步骤，你应该能够成功地创建一个仅在HTML文件中的<script>标签内生效的snippet。

回到顶部