修改Sublime Text 2中的HTML <script>自动完成功能

Question

在Sublime Text 2中，当使用自动完成插入HTML script标签时，光标会跳到标签末尾。

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

如何修改Sublime中的自动完成功能，以便在使用Tab键补全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的软件包，但这并没有添加我想要的功能。

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

感谢任何帮助。

- Chennard

---

注意：（添加于2023年2月17日）本主题中的某些内容可能引用了过时的 SublimeText 文档链接。读者可以通过将 BEFORE http://docs.sublimetext.info/en/latest 替换为 AFTER https://docs.sublimetext.io/guide 来获得更好的结果。也称为：“Sublime Text社区文档”。 - dreftymac

Answer 1

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

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

更多信息： http://docs.sublimetext.info/en/latest/reference/completions.html

- Jair

---

我在ST3中找不到这个文件，上面链接的页面是404。还需要什么帮助吗？ - 2540625

请勿使用触发 Emmet 的 <Tab> 键，而应改用 <Enter> 键。 - kenberkeley

Answer 2

此外，不要忘记如果您已经安装了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">|

I'm sorry, could you please provide the text that needs to be translated?

- skube

Answer 3

下面是我在Sublime Text 3中使用ST的片段工具完成此操作的技术。

1）点击菜单栏/工具/新建代码片段...。

2）在<content><![CDATA[后和]]></content>前，用script src="$1"></script>替换Hello, ${1:this} is a ${2:snippet}.文本（按您的要求自定义;$1表示自动完成后的光标位置）。

3）取消注释选项卡触发器行，并将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

- 2540625

---

那很好。但是是否有可能自动完成src属性，浏览文件系统并获得建议？Brackets以非常好的方式实现了这一点，但不幸的是在稍微大点儿的项目中速度太慢而无法使用。 - Nighto

@Nighto：我认为你需要硬编码src属性，或者在那里放置一个光标标记并输入。除非有一些插件可以启用文件浏览（我不知道有哪些）。 - 2540625