10 способов суперускорения JavaScript разработки

3
4954
Добавить в избранное

Давно хотели поднять темп JavaScript разработки? Вот ряд подходов и инструментов, которые сделают из вас настоящего Флэша!

Работа с npm

Использование ключей

Потратьте немного времени на изучение наиболее распространенных ключей в работе с npm, и это сэкономит вам время:

  • установка: npm install, ключ: npm i;
  • тестирование: npm test, ключ: npm t;
  • помощь: npm —help, ключ: npm -h;
  • глобальный флаг: —global, ключ: -g;
  • сохранить, как зависимость: —save-dev, ключ: -D;
  • инициализация по умолчанию: npm init —yes или npm init —force, ключ: npm init -y или npm init -f;
  • сохранить, как необязательную зависимость: —save-optional, ключ: ;
  • cохранить версию пакета: —save-exact, ключ: .

JavaScript разработчик часто нуждается в локальном сохранении npm-пакета или получении набора пакетов в одном файле. Для этого можно объединить их вместе с помощью —save-bundle или ключа -B.

Установка инициализации npm по умолчанию

При запуске npm init в начале нового проекта вы, вероятно, делаете одно и то же по нескольку раз. Чтобы сэкономить время, установите значения по умолчанию для таких полей, как:

Чтобы изменить данные значения, используйте npm config edit. Если нужно изменить глобальный npm-параметр, используйте npm config edit -g.

Если что-то пошло не так, и вы не сохранили дефолтный конфиг – поможет следующий скрипт. Первая строка заменяет конфиг пустой строкой, а вторая – заполняет его настройками по умолчанию:

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

Кроссплатформенные скрипты

Любой код, запускаемый в командной строке, имеет проблемы совместимости, между Windows и Unix (включая Mac и Linux). Это решаемо, если JavaScript developer в проекте только вы. Но если речь о проекте с открытым исходным кодом, совместном или учебном проекте, то все должно работать независимо от ОС.

Решение есть – cross-env. Установите его, как зависимость: npm i-D cross-env. Затем вставьте ключевое слово cross-env перед любой переменной среды:

Параллельное выполнение сценариев

Используйте символы && для запуска процессов один за другим. Но как насчет параллельного запуска скриптов? Для этого в процессе JavaScript разработки можно использовать пакет npm.concurrently или npm-run-all.

Установите его как зависимость: npm i-D concurrently и добавляйте в свои скрипты по вкусу:

Работа с React

Приводим несколько полезных инструментов для ускорения JavaScript разработки компонентов и приложений.

Bit

Bit помогает вашей команде находить и совместно использовать компоненты для более быстрого создания.

10 способов суперускорения JavaScript разработки

Вместо повторного создания компонентов с нуля, сохраните в коллекцию, в которой их легко найти и установить.

10 способов суперускорения JavaScript разработки

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

10 способов суперускорения JavaScript разработки

Styleguidist

React Styleguidist – это среда разработки компонентов с hot reloaded dev server и подробным руководством, где перечислены типы компонентов и примеры использования.

10 способов суперускорения JavaScript разработки

Среда поддерживает ES6, Flow и TypeScript, а также Create React App из коробки. Автоматически созданные документы использования могут помочь Styleguidist функционировать как портал с документацией для вашей команды.

React devTools

10 способов суперускорения JavaScript разработки

Это официальное расширение позволяет просматривать иерархии компонентов React в инструментах разработчика Chrome. Расширение доступно и для Firefox.

Продукт позволяет просматривать и редактировать свойства компонента, перемещаясь по дереву иерархии, а также понять, как изменения компонента влияют на “соседей”, чтобы помочь создать правильный UI.

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

10 способов суперускорения JavaScript разработки

Работа с Visual Studio Code

10 способов суперускорения JavaScript разработки

И напоследок подборка расширений для Visual Studio.

Prettier Code Formatter

Используйте Prettier для форматирования HTML/CSS/JS кода по нажатию ⌘ + S. Это позволит избавиться от форматтеров под каждый ЯП.

Bracket Pair Colorizer

Bracket Pair Colorizer раскрашивает попарно все скобки разными цветами, что позволяет быстро увидеть начало и конец каждого блока кода.

GitLens

Софт позволяет:

  • автоматически конвертировать код строки в git-blame аннотацию;
  • просматривать подробную историю при наведении курсора на строку;
  • настраивать пользовательские режимы и быстро переключаться между ними.

Как вы боретесь с черепашьей скоростью разработки? Посоветуйте свои способы 🙂

Хотите получать больше интересных материалов с доставкой?

Подпишитесь на нашу рассылку:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Комментариев: 3

  1. Mikhail Novikov

    ”Язык JavaScript позволяет использовать символы &&»

    Это позволяет не js, а командная строка

    1. Спасибо. Исправлено.

  2. Василий Мельник

    Как называется цветовая схема (тема) со скрина VSCode последнего (после заголовка «Работа с Visual Studio Code)?

Добавить комментарий