Лучшие угловые плагины для возвышенного текста
В этой статье рассматривается ряд плагинов Angular для текстового редактора Sublime Text.
Независимо от того, являетесь ли вы новичком в разработке на Angular (версия 2+) и хотите начать с ним работать и более тесно интегрировать его с выбранным вами редактором кода, или вы уже давно работаете над разработкой на Angular и пробуете свои силы с Sublime Text в качестве нового редактора, интеграция двух никогда не была проще.
Существует множество опций для плагинов Angular, которые могут облегчить разработку приложений Angular с использованием Sublime Text. Вам нужно настроить менеджер пакетов Sublime Text (называемый «Управление пакетами») до начала работы, а затем вы можете взглянуть на список плагинов здесь и посмотреть, соответствуют ли они вашим потребностям!
Настройка контроля пакетов
Чтобы использовать большинство плагинов Angular, о которых пойдет речь в этой статье, сначала необходимо настроить управление пакетами в Sublime Text. Это довольно безболезненный процесс. Самый простой способ включает в себя копирование кода конфигурации.
- Используйте горячую клавишу CTRL + ` или используйте меню View> Show Console для вызова интегрированной консоли Sublime Text.
- Вставьте блок кода Python в консоль, которую можно скопировать со страницы установки Package Control и следуйте инструкциям там.
- Как только это будет сделано, меню управления пакетами будет настроено! Теперь все, что вам нужно сделать, это найти и установить ваши пакеты.
Использование управления пакетами очень просто. Вам нужно будет открыть Package Control, выбрать меню установки , а затем выбрать и установить пакет:
- Используйте сочетание клавиш CMD
- Введите
install package
и нажмитеEnter
, чтобы перейти к списку доступных пакетов. - Найдите пакет по имени, выберите пакет и нажмите Enter для установки.
Угловой пакет HTML 2
HTML- плагин Angular 2 предоставляет расширенный синтаксис HTML для Sublime Text. Вы сможете использовать угловые атрибуты без нарушения подсветки синтаксиса. Кроме того, части JavaScript на ваших страницах также будут выделены как JavaScript. Небольшое, но невероятно полезное дополнение для разработчиков Angular.
Установка Angular 2 HTML-пакета
На момент написания этой статьи этот плагин отсутствовал в Package Control, но его можно установить вручную, выполнив следующие действия.
Закройте Sublime Text и перейдите через командную строку к папке Sublime Text 3 «Packages» в вашей установке приложения. В macOS это находится в
/Users/{user}/Library/Application Support/Sublime Text 3/Packages
.Клонируйте репозиторий в вашу папку Packages с помощью следующего:
git clone https://github. com/princemaple/ngx-html-syntax
Снова откройте Sublime Text 3 и проверьте в меню « Вид»> «Синтаксис», чтобы убедиться, что Ngx HTML является опцией.
Кроме того, вы можете сделать так, чтобы Sublime Text автоматически выделял файлы .component.html
с помощью HTML-синтаксиса Angular 2:
Откройте файл
.component.html
.Выберите « Просмотр»> «Синтаксис»> «Ngx HTML» .
Перейдите в « Настройки»> «Настройки»> «Синтаксис» . Поскольку ваш текущий файл использует синтаксис Ngx HTML, он должен открыть файл настроек, относящийся к синтаксису для Ngx HTML. Если это так, добавьте запись расширений на панель настроек справа:
"extensions": [ "component.html" ]
Перезапустите 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. Чтобы использовать его, вам понадобятся две предварительно установленные вещи:
- Установите
tslint
(npm install -g tslint
). - Установите плагин SublimeLinter 3 через управление пакетами.
- Используйте документацию SublimeLinter . (Выполните шаги «Поиск исполняемого файла linter» через «Проверка вашего пути», чтобы SublimeLinter мог видеть ваш пакет tslint.)
- Наконец, установите 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 и дайте нам знать!
DevMag — Журнал разработчика
- Главная страница
Давайте разберем такую ситуацию… Вы блогер, любите писать статьи и делиться ими с людьми. И вы хотите иметь возможность посвящать этому занятию больше времени. А для этого нужно, чтобы это занятие приносило какую-то прибыль. И при этом вы не хотите брать деньги напрямую с читателей. И вы нашли для этого прекрасную возможность — размещение рекламы от Google Adsense и прочие блоки с контекстной рекламой. Но все оказывается не так радужно из-за блокировщиков рекламы…
Бывают случаи, когда нужно добавить свои CSS-стили не только для фронтэнда, но и для админки сайта.
В этой статье я дам небольшую подборку must-have плагинов для WordPress, которые я использую сам и которые рекомендую к использованию другим. Все представленные в списке плагины бесплатны (некоторые имеют премиум-версии, но можно обойтись и без них).
WordPress после установки вполне готов к работе без особых дополнительных настроек. По сравнению с Joomla и Drupal, WordPress из коробки просто идеален. Но некоторые манипуляции после установки (а также в ее процессе) все же не помешает сделать и в WordPress. О них и поговорим в этой статье.
Если вы пишете много текстов в Sublime Text 3, то для вас может быть актуальным вопрос проверки орфографии. Даже если вы вполне грамотный человек, такая возможность может быть полезной, поскольку позволяет моментально выявлять опечатки. Однако «из коробки» Sublime умеет проверять только англоязычные тексты. Исправим эту досадную оплошность.
Раньше я работал с Joomla. Теперь я работаю с WordPress. И в этой статье я буду преимущественно ругать Джумлу и хвалить Вордпресс. Но перед тем хочу прояснить пару моментов…
По умолчанию Joomla добавляет в адреса страниц многоязычных сайтов языковой префикс. Так, русскоязычный контент может находиться по адресу site.com/ru/
, англоязычный — по адресу site.com/en/
и т.п. Все бы хорошо, но обычно основной язык на сайте один, остальные второстепенные. И для основного языка нет особого смысла в добавлении префикса.
Я уже когда-то сокрушался по поводу того, что в стандартной поставке Joomla 1.5 отсутствует капча, в результате чего практически любой сайт на Joomla с открытой регистрацией пользователей начинают атаковать спам-боты. Идут годы, вышла стабильная Joomla 2.5, вот-вот 3-я ветка тоже войдет в стабильное русло, а ситуация все не меняется.
Эта статья является заключительной в серии статей о замечательном редакторе Sublime Text 2.
Помимо общего удобства использования, в Sublime есть множество радующих глаз мелких фишек. Например, сессии, в рамках которых сохраняются не только открытые вкладки, но изменения в несохраненных файлах.
В этой статье я сделаю небольшой обзор полезных плагинов для Sublime Text 2, которые могут оказаться очень полезными в повседневной работе.
Проще всего устанавливать плагины в Sublime Text 2 при помощи менеджера пакетов под названием Package Control. Как установить Package Control в Sublime и как его использовать — я подробно расписал в одной из прошлых статей.
sublime-text-plugin · Темы GitHub · GitHub
Вот 460 публичных репозиториев соответствует этой теме…
фреганте / Призрачный текст
Спонсор Звезда 3ксиндрезорус / редакторconfig-возвышенный
Спонсор Звезда 1,8кэрихард / SublimePHPКомпаньон
Звезда 929возвышенный текст / TrailingSpaces
Звезда 888 дуйдао
/
Текстовая выпечка
Звезда
816Бенмацелби / возвышенное-phpcs
Звезда 812пичиллилоренцо / JavaScriptУлучшения
Звезда 631бодрствование / возвышенное-вакатайм
Звезда 522Дэвидпекхэм / возвышенные-filterlines
Звезда 202ваанвд / Рвение
Звезда 186МэттДмо / Неоновая цветовая схема
Звезда 170никосантанджело / возвышенный глоток
Звезда 155гильермооо / Шесть
Звезда 130Сназа / SublimeDiscordRP
Спонсор Звезда 125ФихтеФолль / ВставитьДату
Спонсор Звезда 120Молнармарк / углеродвозвышенный
Звезда 116mvoidex / ЮникодМатематика
Звезда 114возвышенный текст / MoveTab
Звезда 105мехатронер / возвышенное_радуга_csv
Звезда 98Яворский / Ударяться
Звезда 75Улучшить эту страницу
Добавьте описание, изображение и ссылки на возвышенный-текст-плагин страницу темы, чтобы разработчикам было легче узнать о ней.
Курировать эту тему
Добавьте эту тему в свой репозиторий
Чтобы связать ваш репозиторий с возвышенный-текст-плагин тему, перейдите на целевую страницу репозитория и выберите «управление темами».
Узнать больше
Создание плагинов Sublime Text 3 — Часть 1
Нет, Python — не большая змея, а Sublime Text — не непонятная отсылка к ска-панк-группе 90-х (по крайней мере, не в этом контексте). Скорее приготовьтесь удивляться чудесам разработки плагинов и тому, как заставить программы работать на вас.
Введение
Я пишу эту статью в надежде, что вы (как и я) собираетесь отправиться в благородное путешествие: попытаться создать свой первый плагин Sublime Text 3 (ST3). Позвольте мне предварить эту статью пониманием того, что я ни в коем случае не являюсь мастером-разработчиком плагинов ST3, но я сделаю все возможное, чтобы обозначить ключевые моменты в процессе создания, которые (для меня) были немного нечеткими.
(Для тех из вас, кто не знаком с ST3; это «сложный текстовый редактор для кода, разметки и прозы», который в настоящее время находится в бета-версии и должен заменить ST2. Пожалуйста, посетите http://www.sublimetext.com/ для получения дополнительной информации. )
ST3 имеет документацию, указанную в ссылках ниже, но большая ее часть представляет собой обычный текст, и в начале может быть довольно сложно разобраться. Как и во всем, есть словарный запас, на который вам нужно обратить пристальное внимание, чтобы узнать больше о дополнительных аспектах. Я начал с учебника по подключаемому модулю ST2 (за которым последует этот учебник), но обнаружил, что некоторые из используемых методов устарели и вызывают ошибки при запуске подключаемого модуля. Честно говоря, я многому научился, просто читая документацию по Python 3 и ссылаясь на API, и надеюсь передать это вам.
- Учебное пособие по подключаемому модулю ST2
- API
- Примеры
Шаг 1 — Начало работы
Все плагины начинаются одинаково: «Эй, было бы неплохо, если бы это замечательное приложение…». Именно об этом я подумал, когда говорил с коллегой о форматировании HTML для электронных писем с помощью Premailer. Цель была проста; создайте одноэтапный процесс, который отправляет CSS и HTML в Premailer и возвращает HTML-код со всеми стилями. Это так же просто, как отправить запрос POST и получить ответ. Я был хорошо знаком с тем, как это сделать с помощью cURL в PHP, но не был уверен, как Python обрабатывает такие запросы. Результаты оказались на удивление простыми.
Одна вещь, которую вы должны сделать, когда начинаете — выбрать уникальное, но описательное имя. Если вы планируете отправить это в репозиторий плагинов ST3, вам понадобится что-то, что отображает функцию вашего плагина, но также отличает его от всего остального. В моем примере я использовал имя «cnPremailer».
Шаг 2. Использование плагина ST3 Plugin Creator
Для начала откройте ST3, откройте меню «Инструменты» и выберите «Новый плагин». Это откроет новый шаблон плагина для редактирования.
Перед сохранением вам нужно создать папку для вашего плагина в следующем месте (где «Имя пользователя» — ваше фактическое имя пользователя):
- (OSX): Пользователи\»Имя пользователя»\Библиотека\Поддержка приложений \Sublime Text 3\Пакеты
- (WIN7): C:\Users\»Имя пользователя»\AppData\Roaming\Sublime Text 3\Packages
После того, как вы создали нужную папку, вы можете сохранить новый плагин в виде файла . py (например, cnpremailer.py) в этом месте. Ваш плагин сразу включается как активный (благодаря ссылкам на импорт в начале кода). ST3 также просканирует и проверит ваш плагин. Если есть ошибки, они будут отображаться в консоли. В этот момент вы захотите открыть консоль, чтобы знать, что происходит за кулисами. Вы можете сделать это, открыв меню «вид» и нажав «показать консоль» (или используя встроенную комбинацию клавиш, определенную в меню).
Затем вы увидите консоль в нижней части экрана:
Код плагина по умолчанию выглядит следующим образом (на момент написания):
import sublime, sublime_plugin класс ExampleCommand (sublime_plugin.TextCommand): def run(я, редактировать): self.view.insert(edit, 0, "Hello, World!")
Его функция проста: строка «Hello, World!» добавляется в начало документа, который вы просматриваете. Чтобы увидеть его в действии, вам нужно будет открыть консоль и ввести:
view. run_command('example')
Это выполнит ваш класс и выполнит запрошенное действие. Вы заметите, что ST3 автоматически анализирует имя класса «ExampleCommand» как команду для выполнения, поскольку в конце к нему добавлен текст «Command». Как только ST3 распознает это, он удаляет строку «команды» с конца и берет начало как фактическое имя в нижнем регистре (например: ExampleCommand = example). Несколько заглавных букв приведут к подчеркиванию разделителей между словами. В моем случае cnPremailer становится cn_premailer. Вместо того, чтобы каждый раз вводить символ подчеркивания, я удалил заглавную и вместо этого использовал CnpremailerCommand в качестве имени своего класса. Для моего примера я быстро переименую класс, а затем сохраню так:
импортировать возвышенное, возвышенное_плагин класс CnpremailerCommand (sublime_plugin.TextCommand): def run(я, редактировать): self.view.insert(edit, 0, "Hello, World!")
Независимо от того, как вы решите отформатировать имя класса, вам нужно будет записать его для следующего шага.
Шаг 3 – Создание меню и привязок клавиш
ST3 позволяет очень легко включать ярлыки для запуска плагина через меню или привязки клавиш (например, cmd + shift + p). Первый немного проще, чем второй, поскольку для привязки клавиш требуется настройка для конкретной ОС, но он не слишком сложен и достаточно гибок.
Чтобы создать пункт меню, вам сначала нужно решить, где вы хотите, чтобы он отображался. У вас есть три варианта с соответствующими именами файлов:
- Main.sublime-menu
- Боковая панель.sublime-menu
- Context.sublime-меню
«Главная» — это строка меню ST3, «Боковая панель» — это когда вы щелкаете правой кнопкой мыши документ или папку в левой части приложения (не отображается при открытии отдельных файлов), а «Контекст» — это контекстное меню. над текстовой областью. Все они имеют один и тот же формат, и для добавления записи вам просто нужно добавить следующее в файл, а затем сохранить его с соответствующим именем, указанным выше. Вот пример:
[ { "id": "cnPremailer", "заголовок": "cnPremailer", "команда": "cnpremailer" } ]
Как видите; это базовый массив JSON с некоторыми простыми значениями массива.
- «id» — это основной идентификатор меню для вашей записи
- «заголовок» — отображаемая метка (по умолчанию используется имя команды, если оно не указано)
- «команда» — это чувствительная к регистру команда, полученная из имени вашего класса (упомянутого выше)
Вы также можете создавать элементы подменю, используя запись «дети» следующим образом:
[ { "id": "cnPremailer", "caption": "cnPremailer", "дети": [ { "заголовок": "беги", "команда": "cnpremailer" } ] } ]
Имейте в виду, что это должны быть правильно отформатированные массивы, поэтому, если вы добавите лишнюю запятую (или забудете добавить ее), меню перестанет работать, и ваш плагин выдаст ошибки, когда ST3 автоматически скомпилирует его.
Привязки клавиш аналогичны, но должны иметь следующую структуру, чтобы они работали в соответствующих операционных системах:
- По умолчанию (Windows). sublime-keymap
- По умолчанию (OSX).sublime-keymap
- По умолчанию (Linux).sublime-keymap
Если вы не хотите, чтобы привязки клавиш вашего плагина были доступны для других ОС, или вы просто создаете плагин для личного использования, вам не нужно определять их все. Вы можете просто создать файл, соответствующий используемой вами ОС. Затем достаточно просто добавить строку JSON в файл, чтобы сопоставить соответствующие ключи, которые вы хотите использовать.
Вы можете просмотреть список комбинаций клавиш по умолчанию, чтобы убедиться, что ваша не занята. Он находится в строке меню:
- (OSX) «Sublime Text» > «Настройки» > «Привязки клавиш — по умолчанию» .
- (Windows) «Настройки» > «Привязки клавиш — по умолчанию»
Вы также можете проверить другие установленные вами плагины, чтобы увидеть, какие привязки они используют, чтобы избежать конфликтов. Я использовал следующее для OSX, так как коллега, для которого я разрабатывал это, не использовал Windows или Linux:
[ { "клавиши": ["супер+шифт+с"], "команда": "cnpremailer" } ]
Для OSX «супер» используется для командной клавиши.