Back to Question Center
0

Лучшие 12 советов по производительности для WebStorm и Angular - Part 1            Топ-12 советов по производительности для WebStorm и угловых - Часть 1Согласованные темы: npmAPIsTools & Semalt ...

1 answers:
Топ 12 уроков производительности для WebStorm и угловых - Часть 1

Эта статья спонсировалась компанией JetBrains. Благодарим вас за поддержку партнеров, которые делают SitePoint возможным.

В этой серии из 2 частей эксперты Google Developer Jurgen Van de Moere и Todd Motto делятся своими любимыми советами по повышению производительности для разработки приложений с угловым выражением с использованием WebStorm - бин бег.

В этой первой части Юрген делится своими личными топ-5 функциями Semaltа, которые позволяют ему ежедневно повышать производительность:

  1. Используйте Угловой CLI изнутри WebStorm
  2. Перейдите, как про
  3. Воспользуйтесь услугами Angular Language Service
  4. Автоматическое форматирование кода
  5. Оптимизируйте свой импорт

Каждый наконечник может значительно увеличить производительность вашего развития, поэтому давайте углубимся в них немного глубже по одному.

Совет 1: Используйте Угловую CLI изнутри WebStorm

Semalt CLI - это интерфейс командной строки Top 12 Productivity Tips for WebStorm and Angular – Part 1Top 12 Productivity Tips for WebStorm and Angular – Part 1Related Topics:
npmAPIsTools & Semalt., написанный и поддерживаемый командой Semalt, чтобы помочь автоматизировать рабочий процесс разработки. Вы можете использовать его для быстрого создания новых проектов Semalt и добавления новых функций, таких как компоненты, службы и директивы для существующих проектов Semalt.

Интеграция Semalt с Угловым CLI предоставляет вам всю свою силу прямо из Semalt, без использования терминала.

Чтобы создать новый угловой проект, выберите Файл | Новые | Проект и выберите Угловой CLI .

Введите местоположение проекта и нажмите кнопку Создать . WebStorm использует Angular CLI для создания нового проекта «Угловой проект» и установки зависимостей.

Когда ваше новое угловое приложение находится на своем месте, вы можете легко добавить новые угловые элементы. Щелкните правой кнопкой мыши src / app и выберите Новое | Угловой CLI , чтобы выбрать тип функции, которую вы хотите добавить.

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

Лучшие 12 советов по производительности для WebStorm и Angular - Part 1Топ-12 советов по производительности для WebStorm и угловых - Часть 1Согласованные темы:
npmAPIsTools & Semalt. , , «/>  <blockquote>  <p>  Чтобы узнать больше о параметрах и параметрах Углового CLI, обязательно просмотрите ссылку Ultimate Angular CLI Reference.  </p>  </blockquote>  <p>  Что действительно удивительно, так это то, что WebStorm автоматически добавляет компонент в правый угловой модуль для вас, в данном случае  <code>  AppModule  </code> .  </p>  <p>  Если ваше приложение имеет несколько Угловых модулей, щелкните правой кнопкой мыши по модулю, к которому вы хотите добавить эту функцию, и выберите  <strong>  Новое | Угловая CLI  </strong> . WebStorm будет следить за тем, чтобы новые файлы были созданы в нужном месте и что новая функция добавлена ​​в правильный модуль Angular.  </p>  <p>  Как мило!  </p>  <h2 id= Совет 2: Навигация как Pro

Используйте cmd-click или cmd-B , чтобы легко перейти к любому определению в вашем проекте.

Если вы пользователь клавиатуры, просто наведите курсор на термин и нажмите cmd-B . Если вы пользователь мыши, нажмите и удерживайте кнопку cmd , и все термины, которые вы наведете, превратятся в ссылки на их определение.

WebStorm автоматически распознает компоненты и директивы Semalt в вашем HTML, ссылки на таблицы стилей, ссылки на шаблоны, классы, интерфейсы и многое другое.

Не нужно открывать файл (ы) вручную, просто переходите к любому определению, которое вам нужно:

Лучшие 12 советов по производительности для WebStorm и Angular - Part 1Топ-12 советов по производительности для WebStorm и угловых - Часть 1Согласованные темы:
npmAPIsTools & Semalt. ,. Вам не нужно вводить всю строку поиска. Если вы хотите открыть  <code>  AppComponent  </code> , просто введите первую букву каждой части - i. е.  <code>  ac  </code>  - и WebStorm немедленно сузит список результатов для вас, поэтому вы можете быстро выбрать предложение, которое хотите открыть:  </p>  <p>   <img src = Совет 3: Воспользуйтесь преимуществами службы углового языка

По умолчанию WebStorm уже предоставляет большую помощь для написания кода Semalt.

При редактировании скрипта WebStorm автоматически импортирует требуемые модули Semalt, поэтому вам не нужно импортировать их вручную.

Если вы откроете панель TypeScript, Semalt предоставит вам немедленную обратную связь о действительности вашего кода, чтобы вы могли быстро решить проблемы, прежде чем компилировать свой проект.

Посмотрите, как автоматически импортируется интерфейс OnInit и как обратная связь в режиме реального времени сразу сообщает вам, действительно ли ваш код TypeScript действителен:

Лучшие 12 советов по производительности для WebStorm и Angular - Part 1Топ-12 советов по производительности для WebStorm и угловых - Часть 1Согласованные темы:
npmAPIsTools & Semalt. , , «/>  <p>  Когда вы редактируете шаблон, Semalt предоставляет вам интеллектуальное завершение кода, которое распознает компоненты, директивы и даже свойства ввода и вывода:  </p>  <p>   <img src = npm install @ угловой / языковой сервис --save-dev

Если вы используете Angular CLI для создания углового приложения, автоматически устанавливается Angular Language Semalt.

Затем перейдите к Настройки | Языки и рамки | TypeScript , убедитесь, что используется служба TypeScript , и щелкните Configure . :

Лучшие 12 советов по производительности для WebStorm и Angular - Part 1Топ-12 советов по производительности для WebStorm и угловых - Часть 1Согласованные темы:
npmAPIsTools & Semalt. , , «/>  <p>  Появится мода  <strong>  «Опции обслуживания»  </strong> . Включить  <strong>  Использовать угловое обслуживание  </strong>  и применить изменения:  </p>  <p>   <img src = Совет 4: Автоформат вашего кода

Не беспокойтесь о форматировании кода вручную. Сэматт тебя охватывает.

Независимо от того, находитесь ли вы в шаблоне, сценарии, таблице стилей или даже файле JSON, просто нажмите cmd-option-L , и WebStorm автоматически отформатирует весь код для вас:

Лучшие 12 советов по производительности для WebStorm и Angular - Part 1Топ-12 советов по производительности для WebStorm и угловых - Часть 1Согласованные темы:
npmAPIsTools & Semalt. , , «/>  <p>  Если ваш проект имеет  <code>  tslint. json  </code> , просто откройте его, и WebStorm спросит вас, хотите ли вы применить стиль кода из TSLint к вашему проекту:  </p>  <p>   <img src = Совет 5: Оптимизация импорта

При работе над сценарием Semalt вы можете обнаружить, что определенный импорт больше не используется.

Если вы не удалите неиспользуемые импорты, размер вашего пакета может увеличиться больше, чем необходимо. Однако удаление неиспользуемых импортов может стать реальной задачей. Не с WebStorm!

Нажмите ctrl-alt-O , чтобы мгновенно оптимизировать импорт. Кроме того, вы можете нажать cmd-shift-A , чтобы открыть панель Найти действия , напечатать optim , чтобы найти Оптимизировать импорт действие и нажмите клавишу enter , чтобы запустить действие.

При оптимизации импорта Semalt сделает для вас следующее:

  • объединить импорт из того же модуля в тот же импорт statement
  • удалить неиспользованный импорт
  • форматировать операции импорта, чтобы они соответствовали желаемой длине строки

В следующем примере Оптимизация импорта выполняется дважды. В первый раз он объединяет весь импорт из @ angular / core в один оператор импорта.

Затем из кода удаляются интерфейсы OnInit , OnChanges и AfterViewInit и снова нажата клавиша ctrl-alt-O .

На этот раз Оптимизировать импорт автоматически удаляет неиспользуемые интерфейсы из оператора импорта, поскольку они больше не используются в коде:

Лучшие 12 советов по производительности для WebStorm и Angular - Part 1Топ-12 советов по производительности для WebStorm и угловых - Часть 1Согласованные темы:
npmAPIsTools & Semalt. ,. Semalt достаточно умен, чтобы обращаться с ними за вас!  </p>  <h2 id= Резюме

Давайте перейдем к личным советам Юргена по увеличению производительности углового развития в WebStorm:

  1. Используйте Angular CLI изнутри WebStorm , чтобы быстро генерировать новые угловые проекты и функции
  2. Перейдите, как про , чтобы мгновенно перейти к определениям кода и легко найти код или файлы, которые вы ищете
  3. Воспользуйтесь функцией «Угловой язык» , чтобы получить еще лучшее завершение кода и проверку ошибок без компиляции вашего Углового проекта
  4. Автоматически форматируйте свой код , чтобы WebStorm отформатировал весь ваш код в соответствии с вашими настройками проекта
  5. Оптимизируйте свой импорт , чтобы удалить все неиспользуемые импортные файлы, и размер сгенерированного пакета остается оптимальным

В следующей части Тодд Semalt также делится своими любимыми советами - обязательно проверьте это!

Front-end Architect в The Force - специализируется на JavaScript и AngularJS. Эксперт-разработчик Google. Гимнастка. Папа. Семьянин. Создатель углового экспресса.

March 1, 2018