Статьи

Лучшие угловые плагины для возвышенного текста

Ноябрь 28, 2018

В этой статье рассматривается ряд плагинов Angular для текстового редактора Sublime Text.

Независимо от того, являетесь ли вы новичком в разработке на Angular (версия 2+) и хотите начать с ним работать и более тесно интегрировать его с выбранным вами редактором кода, или вы уже давно работаете над разработкой на Angular и пробуете свои силы с Sublime Text в качестве нового редактора, интеграция двух никогда не была проще.

Существует множество опций для плагинов Angular, которые могут облегчить разработку приложений Angular с использованием Sublime Text. Вам нужно настроить менеджер пакетов Sublime Text (называемый «Управление пакетами») до начала работы, а затем вы можете взглянуть на список плагинов здесь и посмотреть, соответствуют ли они вашим потребностям!

Настройка контроля пакетов

Чтобы использовать большинство плагинов Angular, о которых пойдет речь в этой статье, сначала необходимо настроить управление пакетами в Sublime Text. Это довольно безболезненный процесс. Самый простой способ включает в себя копирование кода конфигурации.

  1. Используйте горячую клавишу CTRL + ` или используйте меню View> Show Console для вызова интегрированной консоли Sublime Text.
  2. Вставьте блок кода Python в консоль, которую можно скопировать со страницы установки Package Control и следуйте инструкциям там.
  3. Как только это будет сделано, меню управления пакетами будет настроено! Теперь все, что вам нужно сделать, это найти и установить ваши пакеты.

Установка возвышенного текстового пакета через меню управления пакетами

Использование управления пакетами очень просто. Вам нужно будет открыть Package Control, выбрать меню установки , а затем выбрать и установить пакет:

  1. Используйте сочетание клавиш CMD + Shift + P ( CTRL + Shift + P , в зависимости от ОС), чтобы открыть палитру команд.
  2. Введите install package и нажмите Enter , чтобы перейти к списку доступных пакетов.
  3. Найдите пакет по имени, выберите пакет и нажмите Enter для установки.

Угловой пакет HTML 2

HTML- плагин Angular 2 предоставляет расширенный синтаксис HTML для Sublime Text. Вы сможете использовать угловые атрибуты без нарушения подсветки синтаксиса. Кроме того, части 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 автоматически выделял файлы .component.html с помощью HTML-синтаксиса Angular 2:

  1. Откройте файл .component.html .

  2. Выберите « Просмотр»> «Синтаксис»> «Ngx HTML» .

  3. Перейдите в « Настройки»> «Настройки»> «Синтаксис» . Поскольку ваш текущий файл использует синтаксис Ngx HTML, он должен открыть файл настроек, относящийся к синтаксису для Ngx HTML. Если это так, добавьте запись расширений на панель настроек справа: 

     "extensions": [ "component.html" ]

  4. Перезапустите Sublime Text. Теперь все файлы .component.html должны автоматически использовать плагин Ngx Syntax!

Угловые 2 отрывка

Angular 2 Snippets — это плагин Sublime Text, который предназначен для предоставления пользователям фрагментов и завершения кода для Angular. Он включает в себя большинство функций автозаполнения, которые понадобятся вам для разработки Angular. Автодополнение кода — это проблема, стоящая перед многими разработчиками, которые считают, что это такое же проклятие, как благословение, но, тем не менее, оно может быть чрезвычайно полезным.

На момент написания статьи были доступны следующие фрагменты и категории завершения. (Текущий список или более подробную информацию об элементах в каждой категории см. В GitHub README плагина.)

Угловые плагины: Snippet Категории

  • Компонент
  • директива
  • обслуживание
  • труба
  • RouteConfig
  • маршрут
  • Тестовое задание

Угловые плагины: Завершение Категории

  • Аннотации
  • Декораторы
  • Жизненный цикл
  • Маршрутизация
  • Директивы
  • Атрибуты
  • трубы

Угловой CLI

Плагин Angular CLI отлично подходит для любых разработчиков Angular, позволяя запускать команды Angular CLI из Sublime Text. После установки Angular CLI команды можно найти в палитре команд. Angular CLI может использоваться для различных целей:

  • генерировать компоненты, классы, маршруты и многое другое
  • для тестирования
  • для ворса
  • для запуска сервера разработки

… и многое другое!

Угловые плагины: машинопись

TypeScript обеспечивает типизированный слой поверх стандартного JavaScript и является предпочтительным языком для многих проектов Angular. Он компилируется в допустимый JavaScript, поэтому истинное значение для разработчика. Пакет TypeScript для Sublime Text предлагает улучшенные возможности для пользователей TypeScript в редакторе.

  • Форматирование TypeScript для строки, выделенного кода или всего документа одним нажатием ярлыка.
  • Быстрая навигация по символу или фрагменту текста, легкий просмотр ошибок TypeScript.
  • Обработка проекта — легкий ветер с плагином. Это позволяет создавать новые, настроенные проекты TypeScript. Он также автоматически создает «предполагаемые проекты» при редактировании одного файла TypeScript, извлекая импортированные файлы, чтобы сделать их доступными для вас.

Угловые плагины: Linting

Кому не нужен листинг кода? Когда вы работаете с Angular и TypeScript, вам нужно, чтобы ваш редактор ограничивал ваш код. SublimeLinter-contrib-tslint — это пакет Sublime, который взаимодействует между программным обеспечением tslint и Sublime Text. Чтобы использовать его, вам понадобятся две предварительно установленные вещи:

  1. Установите tslint ( npm install -g tslint ).
  2. Установите плагин SublimeLinter 3 через управление пакетами.
  3. Используйте документацию SublimeLinter . (Выполните шаги «Поиск исполняемого файла linter» через «Проверка вашего пути», чтобы SublimeLinter мог видеть ваш пакет tslint.)
  4. Наконец, установите Sublime Plugin SublimeLinter-contrib-tslint через управление SublimeLinter-contrib-tslint .

Вы все готово. Теперь вам просто нужно настроить свой линтер. Вы можете использовать документы tslint, чтобы получить представление о параметрах конфигурации tslint (которые вы захотите включить в файл tslint.json в своем проекте). Также посмотрите документацию SublimeLinter о настройке специфичных для линтера настроек.

DocBlockr

DocBlockr — это пакет для Sublime Text, который поддерживает JavaScript и различные его разновидности, включая TypeScript. Хотя DocBlockr не является уникальным для TypeScript или Angular, он определенно используется там и предоставляет сервис, который не следует сбрасывать со счетов. DocBlockr — это плагин, который помогает разработчикам в написании докблоков. Он автоматически дополняет синтаксис для докблоков, чтобы сэкономить ваше драгоценное время, и даже заходит так далеко, что автоматически генерирует функции и шаблоны переменных докблоков. Это фантастический способ сэкономить время и гарантировать, что ваш код документируется единообразно.

Вывод

Надеемся, что этот набор плагинов предоставит вам, по крайней мере, некоторые из плагинов Angular, которые необходимы вам для успешной разработки Angular в Sublime. Использовали ли вы что-либо из вышеперечисленного или у вас есть отзывы о плагинах, которые не были упомянуты? Tweet нас @sitepointjs и дайте нам знать!

36
Share: