AngularJs Sublime Text 2 Bundle

此软件包提供了所有可用的AngularJS API调用的代码片段。代码片段在HTML和CoffeeScript中均可激活。

这是对代码片段系统的重大改变吗？在某种程度上，是的。

这更加像是一个穷人的Intellisense，而不是一系列代码片段。代码片段有意重叠，这样只需记住少量的简单助记符，而无需记住数百个。

使用这种方法，不仅提供类似于xyz，TAB样式的代码片段扩展，xyz，TAB会在上下文相关的Sublime完成覆盖中加载，可以使用箭头键和一个额外的TAB来选择适当的代码片段。例如，在HTML标签中使用ng，TAB将显示所有可用的ng-*属性。这与通常的代码片段方法相比稍慢，但降低了API表面的学习曲线。请注意，Sublime似乎有不同的条件来显示完成覆盖。在CoffeeScript文档中简单地键入ng将显示完成菜单，而在HTML中则需要按TAB。（这可能与安装的其他软件包有关）

安装

自动安装

请确保您已根据这些说明安装了Sublime Package Control

使用Ctrl + Shift + P打开Sublime命令面板，键入/选择“Package Control: Install Package”，然后从包控制列表中，键入/选择“AngularJS（CoffeeScript）”

请注意，软件包会自动更新，因此当有新的修改时，它们将自动安装。

手动调整包控制

这不是推荐的做法，但包控制可以直接指向此GitHub存储库，而不是使用注册表。添加到Packages\User\Package Control.sublime-settings下面JSON配置文件中的相应键

该文件可以通过Sublime菜单打开： 首选项 -> 包设置 -> 包控制 -> 设置 -- 用户

{
  "installed_packages":
  [
    "AngularJS (CoffeeScript)"
  ],
  "package_name_map":
  {
    "Sublime-AngularJS-Coffee-Completions": "AngularJS (CoffeeScript)"
  },
  "repositories":
  [
    "https://github.com/EastPoint/Sublime-AngularJS-Coffee-Completions"
  ]
}

快捷键

Sublime中的代码片段触发器实际上是隐式快捷键，它们始终映射到一系列字符 + TAB。或者，您可以通过在Ctrl + Shift + P菜单中键入Ang来过滤列表，找到它们。

还建议添加类似于以下内容的快捷键，以便通过单个键组合访问所有当前可用的代码片段。

[
  { "keys": ["shift+f3"], "command": "show_overlay",
    "args": {"overlay": "command_palette", "text": "Angular"} }
]

为了允许$字符自动触发菜单，必须在Preferences.sublime-settings文件中添加以下内容。可以通过首选项 -> 设置 -- 用户菜单项来打开此文件。

{
    "auto_complete_triggers":
    [
        {
            "characters": "$",
            "selector": "source.coffee, source.js, source.js.embedded.html"
        }
    ]
}

如果您希望在完成时禁用重复显示的$，则必须在同一用户 Preferences.sublime-settings中更改默认的word_separators到以下内容：

{
    "word_separators": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?"
}

注意：auto_complete_triggers和word_separators在同一个JSON配置对象中是同胞。

咖啡脚本

选取的快捷键不会与标准的CoffeeScript快捷键冲突，即=、-、cla、log、elif、el、if、ifel、#、forof、forx、fori、forin、req、swi、ter、try或unl。

Sublime错误

遗憾的是，目前Sublime存在一些问题，阻止它执行帮助我们的一些操作

• 当涉及到$字符时，在完成覆盖层内进行过滤无法正常工作。

• 无法像对代码片段那样为完成项添加名称，因此Ctrl + Space覆盖层仅显示标识符。

• Sublime的Tab触发器系统不支持正则表达式。因此，当处理类似于scope.$watch的成员函数时，当按下.$时，无法在列表中减少噪声。我们看到所有以$开头的完成项，而不是只有以.$开头的，使列表变长。

• 找不到限制ng-*属性作用域仅限于它们有效的HTML标签的方法（例如，ng-csp仅属于html）。我们能做到最好的是区分属性与标签的代码片段。

• Sublime在代码片段中没有可选参数/块的约定。这在第一个TAB上突出显示块是伪造的，以便可以删除它，并且如果块被保留，则允许后续的TAB更改块中的特定值。然而，Sublime在块被删除后仍然尊重块内的制表符。在实用意义上，这意味着可能需要在删除optional块后进行额外的制表符点击，将光标移动到下一个替换点。

如果您想看到这些问题得到解决，请对问题124225和124217进行投票！

希望Sublime的未来版本将解决这些问题，但暂时有一些解决方案。

当前的解决方案是为顶级服务（如$filter）提供占位符代码片段。

此工作流程如下

`$`, `TAB`
  -> select Angular filter from the menu with `TAB`
  -> `$filter` is inserted into document
  -> `TAB` brings up completions against `$filter`
  -> select specific filter from the menu with `TAB` (such as currency)
  -> `$filter('currency') currency, 'symbol-eg-USD$'` is inserted into document
  and supports `TAB` completion (or chunk deletion)

Tab触发

故意将tab触发器的数量限制在一小部分，以增加可发现性。按照惯例，大多数参数都使用了表示应该替换的值的占位符。对于接受多个可能参数的函数，已按惯例使用|，即true|false。

tl;dr版本

以下是唯一使用的触发器 - $，.$，ng，for，is，mod，dir，fil，mock，$cookieStore，$filter.，$http.，$httpBackend.，$injector.，$interpolate.，$location.，$log.，$provide.，$q.，$route.，$routeProvider.，.error，.expect，.other，.success 和 .when … 哎呀

指令

所有基于 HTML 的指令均基于 ng，TAB 绑定。

模块

作用域

控制器

涵盖 FormController 和 NgModelController

资源

过滤器

全局 API

HTTP

HttpBackend

请注意，.expect和.when是为了链式调用而设计的，因此我们不绑定到$httpBackend

Q

Route

Cookie

Location

Log

Mock

Injector

Interpolate

Provide

其他服务

未来改进

• 如果能通过SublimeCodeIntel提供类似的在线文档，那就太好了，类似于为jQuery提供的那些文档。

• SublimeErl也提供了一些非常酷的功能，值得整合。

贡献

• 在编辑.sublime-snippets文件时，始终使用真实制表符进行换行后的缩进。如果您的用户设置指定了缩进的空间，Sublime将自动插入空格。

• 编写将通过coffeelint通过的CoffeeScript代码

谢谢

原始灵感来源于AngularJS tmbundle，它针对JavaScript和一小组常见操作的记忆技巧。这个设计更为全面。