Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

NPX JS: Настройка окружения

В JavaScript существует отдельный класс пакетов-программ, которые связаны с конкретными проектами. То есть они устанавливаются в проект, но запускаются как программы, а не импортируются в код как библиотека. В основном эти программы выполняют различные манипуляции с кодом, начиная от исправления ошибок, до различных преобразований исходного кода например с целью работы на более старых версиях интерпретатора или подготовки кода для работы в браузере.

Одной из таких программ является prettier. Это очень популярный инструмент, автоматически форматирующий код по общепринятым правилам. С его помощью команды придерживаются единого стиля написания без необходимости запоминать эти правила. Посмотреть как работает prettier можно в его песочнице в браузере.

Пример кода до обработки:

const fn   = (a, b) => {

     const c = a + b; return c;
   }

Этот же код после автоматического форматирования:

const fn = (a, b) => {
  const c = a + b;
  return c;
};

Так как prettier это инструмент для написания кода, то он должен устанавливаться как dev зависимость:

npm install --save-dev prettier

Следующим шагом его нужно запустить как обычную консольную утилиту. По документации prettier видно что имя утилиты (имя исполняемого файла) совпадает с именем пакета. Попробуем выполнить запуск:

# Флаг --write означает что мы разрешаем утилите перезаписать файлы проекта
prettier --write .

Если вы до этого не устанавливали prettier глобально, то запуск кода выше приведет к ошибке: command not found: prettier. Почему так происходит?

В отличие от глобальной установки, обычная (локальная) установка помещает содержимое пакета в директорию node_modules текущего проекта. Командные оболочки, например Bash, при запуске утилит ищут их в специальных системных директориях, но они ничего не знают про утилиты, установленные в другие места системы, например, в наш проект. Поэтому для запуска нужно указывать полный путь до файла программы.

Программы устанавливающиеся локально, хранят свои исполняемые файлы в директории node_modules/.bin. Поэтому запуск нужно выполнять там:

node_modules/.bin/prettier --write .

У такого запуска есть два неудобства:

  1. Слишком долго набирать
  2. Идет завязка на конкретную структуру директорий, которая может поменяться

Для упрощения запуска Node.js поставляется вместе с еще одной утилитой – npx. Она помогает запускать программы установленные локально без необходимости указывать полный путь до исполняемого файла:

npx prettier --write .

npx анализирует директорию node_modules/.bin и если находит там нужный файл, то подставляет его. Если файла с нужным именем нет, то npx пытается найти пакет с таким именем и установить.

Как вы увидите дальше, в реальных проектах на JavaScript пакетов-утилит достаточно много. Вот лишь некоторые популярные: Babel, Webpack, Eslint, Gulp. Все это часть экосистемы, с которой сталкиваются все веб разработчики на JavaScript. И для запуска всех этих утилит нужен npx.

Глобальная установка vs Локальная

Prettier можно установить и глобально и локально. В обоих случаях он будет работать. Но лучше всегда подобные пакеты ставить локально. Почему? Локальные зависимости общие. Любой, кто разрабатывает наш проект, автоматически получает все зависимости. Если же prettier установлен глобально, то каждому разработчику придется самостоятельно заботиться о его установке. Вторая проблема связана с версией. У разных разработчиков в конце концов могут оказаться (и окажутся) разные версии prettier, которые могут работать по разному, что будет приводить к разным результатам или даже ошибкам.


Самостоятельная работа

  1. Добавьте prettier в проект hexlet-js
  2. Запустите его через npx, посмотрите какие файлы были изменены
  3. Подключите prettier к своему редактору. В сети довольно много подобных инструкций для всех редакторов
  4. Добавьте все изменения на гитхаб

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

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

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
с нуля
Разработка фронтенд-компонентов для веб-приложений
1 декабря 10 месяцев
Иконка программы Node.js-разработчик
Профессия
с нуля
Разработка бэкенд-компонентов для веб-приложений
1 декабря 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
с нуля
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
1 декабря 16 месяцев
Иконка программы Верстальщик
Профессия
с нуля
Верстка с использованием последних стандартов CSS
в любое время 5 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»