Register to get access to 15+ free programming courses with interactive exercises

NPX JS: Setting up environment

There is a separate class of package-programs in JavaScript that are associated with specific projects. I.e., they're installed in the project, but run as programs, and not imported into the code as a library. Basically, these programs perform various modifications to the code, ranging from error correction to various changes to the source code for it to run, for example, on older versions of the interpreter or in a browser.

One such program is prettier. This is a very popular tool that automatically formats code according to commonly accepted rules. With it, teams can adhere to a common writing style without having to memorize the rules. You can see how prettier works in its sandbox in the browser.

Example of code before processing:

const fn   = (a, b) => {

     const c = a + b; return c;
   }

The same code after automatic formatting:

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

Since prettier is a tool for writing code, it must be set as a dev dependency:

npm install --save-dev prettier

The next step is to run it as a normal console utility. You can see from the prettier's documentation that the name of the utility (executable file name) is the same as the name of the package. Let's try running it:

# The --write flag means that we allow the utility to overwrite the project files
prettier --write .

If you have not installed prettier globally before, running the code above will result in an error: command not found: prettier. Why does this happen?

Unlike a global installation, a normal (local) installation puts the contents of the package into the node_modules directory of the current project. When running utilities, command shells such as Bash look for them in special system directories, but they know nothing about utilities installed elsewhere in the system, such as in our project. Therefore, you must specify the full path to the program file in order to start it.

Programs that are installed locally store their executable files in the node_modules/.bin directory. Therefore, you need to launch it there:

node_modules/.bin/prettier --write .

This type of launch has two disadvantages:

  1. It takes too long to type
  2. It links to a specific directory structure, which can change

Node.js comes with another utility, npx, to make it easier to run. It helps to run programs installed locally without having to specify the full path to the executable file:

npx prettier --write .

npx analyzes the directory node_modules/.bin and if it finds the right file there, it substitutes it. If there is no file with the right name, npx tries to find a package with that name and install it.

As you will see later, in real JavaScript projects there are quite a few utility packages. Here are just a few popular ones: Babel, Webpack, Eslint, Gulp. It's all part of the ecosystem that all JavaScript web developers encounter. And you need npx to run all these utilities.

Global installation vs Local installation

Prettier can be installed both globally and locally. In both cases, it'll work. But it's always better to install such packages locally. Why? Local dependencies are common. Anyone who develops our project automatically gets all the dependencies. If prettier is installed globally, then each developer will have to worry about their own installation. The second problem has to do with the version. Different developers may (and will) end up with different versions of prettier, which may work differently, leading to different results or even errors.


Do it yourself

  1. Add prettier in the project hexlet-js
  2. Run it through npx, check the files that have been changed
  3. Install prettier for your code editor. You can find a relevant guide on the web
  4. Push all the changes to GitHub

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

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending the form, you agree to Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From zero to a developer. Refunds in case you won't get a job

Frontend Developer icon
Profession
New
Development of front-end components for web applications
start anytime 10 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending the form, you agree to Personal Policy and Service Conditions

Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.