在 Sublime Text 2 上修改 HTML <script> 自动完成答案

【问题标题】：Modifying HTML <script> auto complete on Sublime Text 2在 Sublime Text 2 上修改 HTML <script> 自动完成
【发布时间】：2013-03-25 22:59:58
【问题描述】：

在 Sublime Text 2 中，当使用自动完成插入 html 脚本标签时，光标会跳转到标签的末尾。

<script type="text/javascript"></script>*CURSOR HERE*

如何修改 Sublime 中的自动完成功能，以便当我通过制表符完成 html 脚本标签时，会将 src 属性添加到标签中，并且光标会跳转到 src 属性的引号？

我在 Sublime HTML.sublime-completions 文件中找到以下行：

{ "trigger": "script", "contents": "<script type=\"${1:text/javascript}\">$0</script>" }

我尝试将其修改为以下内容：

{ "trigger": "script", "contents": "<script type=\"${1:text/javascript}\" src=\"$1\">$0</script>" }

为此我引用了文件中的html链接标签：

{ "trigger": "link", "contents": "<link rel=\"stylesheet\" type=\"text/css\" href=\"$1\">" }

我尝试安装另一个名为 HTMLAttributes 的包，但这并没有添加我想要的功能。

我也尝试修改脚本标签，我删除了类型，但 Sublime 仍然可以自动完成它。我修改错了吗？还是在错误的文件中？

感谢您的帮助。

【问题讨论】：

标签： autocomplete sublimetext2 sublimetext

【解决方案1】：

请尝试在位于 packages 文件夹的 html_completions.py 中添加以下代码。

("script\tTag", "script type=\"${2:text/javascript}\" src=\"$1\">$0</script>" ),

【讨论】：

我在ST3中没有找到这个文件，上面链接的页面是404。还有什么帮助吗？
PS 不要使用触发 Emmet 的。请改用。

【解决方案2】：

这是我在 Sublime Text 3 中找到的一种使用 ST 的 sn-ps 工具完成此任务的技术。

1) 点击Menubar / Tools / New Snippet…。

2) 在<content><![CDATA[ 之后和]]></content> 文本之前，将Hello, ${1:this} is a ${2:snippet}. 文本替换为script src="$1"></script>（根据需要自定义；$1 表示自动完成后的光标位置）。

3) 取消对 tab-trigger 行的注释，并将 hello 文本更改为 script。

4) 取消注释范围行，并将 source.python 文本更改为 text.html。

5) 将文件保存到~/Library/Application Support/Sublime Text 3/Packages/User 并将其命名为html-script.sublime-snippet 之类的名称（它必须以.sublime-snippet 结尾）。

完整的文件应该类似于：

<!-- ~/Library/Application Support/Sublime Text 3/Packages/User -->
<snippet>
  <content><![CDATA[script src="$1"></script>]]></content>
  <tabTrigger>script</tabTrigger>
  <scope>text.html</scope>
</snippet>

如果写成如上，当你开始输入<script（甚至只是<s），然后你可以按tab或return来自动完成，Sublime将填充<script src=""></script> 并将光标放在两个双引号之间。

文档：

http://docs.sublimetext.info/en/latest/extensibility/snippets.html

http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/extensibility/snippets.html

【讨论】：

这很好。但是是否也可以自动完成 src 属性，在文件系统上导航并获得建议？ Brackets 以一种非常好的方式做到了这一点，但不幸的是，它太慢了，无法在（稍微）大的项目中使用。
@Nighto：我认为您需要硬编码src attr，或者将光标标记放在那里并输入。除非有一些插件可以启用文件浏览（我不知道有一个）。

【解决方案3】：

另外，别忘了如果你安装了Emmet，你也可以使用它的缩写。

例如打字：

script:src<TAB>

将解决：

<script src="|"></script>

对于 CSS 链接：

link<TAB>
link[/path/to/my.css]<TAB>

决议：

<link rel="stylesheet" href="|">
<link rel="stylesheet" href="/path/to/my.css">|

（竖线表示光标位置）

【讨论】：