用于Sublime Text的顶级Angular插件

本文介绍了许多Sublime Text文本编辑器的Angular插件。

无论您是不熟悉Angular（版本2+）开发，并希望开始使用它并将其与您选择的代码编辑器更紧密地集成在一起，还是您在Angular开发中很老套，并且正在尝试通过将Sublime Text作为新的编辑器，将这两个部分集成在一起从未如此简单。

Angular插件有很多选项，可以简化您使用Sublime Text开发Angular应用程序的方式。 开始之前，您需要设置Sublime Text软件包管理器（称为“软件包控制”），然后可以在此处查看插件列表，看看是否有满足您需求的插件！

设置程序包控制

为了使用本文将要讨论的大多数Angular插件，您首先需要在Sublime Text中设置Package Control。 这是一个相当轻松的过程。 最简单的方法涉及复制粘贴配置代码。

1. 使用热键CTRL + `或使用“ 视图”>“显示控制台”菜单打开集成的Sublime Text控制台。
2. 将Python代码块粘贴到控制台中，可以从“ 程序包控制安装”页面复制该代码并按照那里的说明进行操作。
3. 完成后，将设置Package Control菜单！ 现在，您需要做的就是找到并安装软件包。

通过程序包控制菜单安装Sublime文本程序包

使用包控制很容易。 您需要打开Package Control，选择安装菜单，然后选择并安装软件包：

1. 使用快捷方式CMD + Shift + P （ CTRL + Shift + P ，取决于操作系统）打开命令面板。
2. Enter install package ，然后按Enter ，将您带到可用软件包列表。
3. 按名称搜索软件包，选择软件包，然后按Enter键进行安装。

Angular 2 HTML包

Angular 2 HTML插件为Sublime Text提供了增强的HTML语法。 您将能够使用Angular属性，而不会突出显示语法。 此外，页面的JavaScript部分也将突出显示为JavaScript。 对于Angular开发人员而言，这是一个很小但非常有用的功能。

Angular 2 HTML软件包设置

在撰写本文时，此插件尚未出现在Package Control中，但可以通过以下步骤手动安装。

1. 关闭Sublime Text，然后通过命令行导航到应用程序安装中的Sublime Text 3“ Packages”文件夹。 在macOS中，这位于/Users/{user}/Library/Application Support/Sublime Text 3/Packages 。

2. 使用以下命令将存储库克隆到您的Packages文件夹中：

   git clone https://github.com/princemaple/ngx-html-syntax
   

3. 重新打开Sublime Text 3，然后查看“ 视图”>“语法”菜单，以确保可以使用Ngx HTML。

此外，您可以让Sublime Text使用Angular 2 HTML语法自动突出显示.component.html文件：

1. 打开一个.component.html文件。

2. 选择“ 视图>语法> Ngx HTML” 。

3. 转到首选项>设置>特定于语法 。 因为您当前的文件正在使用Ngx HTML语法，所以它应该为Ngx HTML打开特定于语法的设置文件。 如果是这样，请将扩展项添加到右侧的设置面板中：

   "extensions":
   [
     "component.html"
   ]
   

4. 重新启动Sublime Text。 现在，所有.component.html文件都应自动使用Ngx语法插件！

Angular 2代码段

Angular 2代码片段是Sublime Text插件，旨在为用户提供Angular的代码片段和代码完成。 它带有Angular开发所需的大多数自动完成功能。 对于许多开发人员来说，代码自动完成是一个温床问题，他们认为这既是一种祝福，又是一种诅咒，但是，它却非常有用。

在撰写本文时，以下片段和完成类别可用。 （有关当前列表，或有关每个类别中项目的更多详细信息，请参阅插件的GitHub README 。）

Angular插件：片段类别

• 零件
• 指示
• 服务
• 管
• 路由配置
• 路线
• 测试

Angular插件：完成类别

• 注解
• 装饰工
• 生命周期
• 路由
• 指令
• 属性
• 管子

角度CLI

Angular CLI插件对于那里的所有Angular开发人员来说都是很棒的，它允许在Sublime Text中运行Angular CLI命令。 安装后，可以从命令面板中找到Angular CLI命令。 Angular CLI可以用于多种用途：

• 生成组件，类，路由等
• 用于检测
• 用于棉绒
• 用于启动开发服务器

… 以及更多！

Angular插件：打字稿

TypeScript在标准JavaScript上提供了一个有类型的层，并且是许多Angular项目的首选语言。 它可以编译为有效的JavaScript，因此真正的价值在于开发人员。 Sublime Text的TypeScript包为编辑器中的TypeScript用户提供了更好的体验。

• 单击快捷键，即可为一行，一部分代码或整个文档使用TypeScript格式。
• 快速导航到符号或文本，轻松查看TypeScript错误。
• 插件使项目处理变得轻而易举。 它允许创建新的，已配置的TypeScript项目。 在编辑单个TypeScript文件时，它还将自动创建“推断的项目”，并提取导入的文件以使您可以使用它们。

Angular插件：Linting

谁不需要代码清单？ 当您使用Angular和TypeScript时，您将希望您的编辑器为您的代码加绒。 SublimeLinter-contrib-tslint是Sublime软件包，可在tslint软件和Sublime Text之间建立接口。 为了使用它，您需要预先安装两件事：

1. 安装tslint （ npm install -g tslint ）。
2. 通过Package Control安装SublimeLinter 3插件。
3. 使用SublimeLinter文档 。 （遵循“查找linter可执行文件”到“验证路径”的步骤，以确保SublimeLinter可以看到您的tslint软件包。）
4. 最后，通过Package Control安装Sublime插件SublimeLinter-contrib-tslint 。

你们都准备好了 现在，您只需要配置您的linter。 您可以使用tslint文档获取tslint配置选项的句柄（您希望将其包含在项目的tslint.json文件中）。 另请参阅SublimeLinter文档，了解有关设置特定于linter的设置的信息。

DocBlockr

DocBlockr是Sublime Text的软件包，该软件包支持JavaScript及其各种样式，包括TypeScript。 尽管DocBlockr并不是TypeScript或Angular所独有的，但它绝对可以在其中使用，并且提供了不应打折的服务。 DocBlockr是一个插件，可帮助开发人员编写docblock。 它可以自动完成docblock的语法以节省您的宝贵时间，甚至可以自动生成函数和可变docblock模板。 这是一种既节省时间又可以确保您的代码以统一的方式记录下来的绝妙方法。

结论

希望这组插件将至少为您提供一些使Sublime的Angular开发工作成功所需的Angular插件。 您是否使用过上述任何方法，或者对未提及的插件有任何反馈？ 向我们发送@sitepointjs并通知我们！

From: https://www.sitepoint.com/top-angular-plugins-sublime-text/