JavaScript Tools: npm, Vite, ESLint and Prettier

JavaScript tools like Node.js, npm, Vite, ESLint and Prettier are what professional developers use every day. Learn what each one does and set up a modern project in a few commands.

What are Node.js and npm?

Node.js is a program that runs JavaScript outside the browser, on your computer or a server. Even if you only build websites, you need it, because most developer tools are written in JavaScript and run on Node.js.

npm (Node Package Manager) comes with Node.js. It downloads packages: ready-made code that other people share, from a huge public library at npmjs.com. Think of it like an app store for code.

Install Node.js from nodejs.org (pick the LTS version, which means "long-term support", the stable one). Then check it works in your terminal:

node --version
npm --version

You should see two version numbers, like v24.x.x and 11.x.x. Your numbers may be different, which is fine.

What is package.json?

Every npm project has a package.json file. It is like an ID card for your project: its name, the packages it needs, and handy commands called scripts.

{
  "name": "my-weather-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "format": "prettier . --write"
  },
  "dependencies": {
    "date-fns": "^4.1.0"
  },
  "devDependencies": {
    "vite": "^7.0.0",
    "eslint": "^9.0.0",
    "prettier": "^3.0.0"
  }
}

• "type": "module" means files use import and export (ES modules).
• scripts are shortcuts. npm run dev runs vite, npm run lint runs ESLint.
• dependencies are packages your app needs to work in the browser.
• devDependencies are tools you only need while developing.
• ^4.1.0 means "version 4.1.0 or any newer 4.x version". The version numbers in your own file will probably be newer, and that is fine.

How to install npm packages

npm install date-fns
npm install --save-dev prettier
npm install
npm uninstall date-fns

The first line installs a package and adds it to dependencies. --save-dev (or -D) adds it to devDependencies instead. A plain npm install installs everything listed in package.json, which is what you do after downloading someone else's project.

npm puts the downloaded code in a node_modules folder and writes exact versions to package-lock.json. Commit the lock file to Git so everyone gets the same versions.

Common mistake: Committing the node_modules folder to Git. It is huge and can always be recreated with npm install. Add node_modules to your .gitignore file.

Once installed, you import a package in your code by its name:

import { format } from 'date-fns';

console.log(format(new Date(2026, 9, 1), 'EEEE, d MMMM yyyy'));
// Output: Thursday, 1 October 2026

The browser cannot find 'date-fns' on its own, because it does not know where node_modules is. A build tool like Vite solves this for you.

How to create a Vite project in a few commands

Vite (French for "fast", said like "veet") is a build tool. During development it runs a local server that reloads instantly when you save. For publishing, it bundles your files: it combines and shrinks them so the site loads fast.

npm create vite@latest my-app

It asks a few questions. Choose Vanilla (plain JavaScript, no framework) and then JavaScript. Then:

cd my-app
npm install
npm run dev

The terminal shows an address like http://localhost:5173. Open it and you will see a starter page. Edit main.js, save, and the browser updates right away.

When your site is ready to publish:

npm run build

Vite creates a dist folder with optimized files. You upload that folder to any web host.

Tip: You don't need a build tool for every small project. Plain HTML with <script type="module"> works fine. Reach for Vite when you want npm packages, a fast dev server, or optimized production files.

ESLint and Prettier: catch bugs and format code

ESLint is a linter: it reads your code and warns you about likely bugs, like unused variables, typos in variable names, or using a variable before it exists. Prettier is a formatter: it rewrites your code with consistent spacing, quotes and line breaks, so you never argue about style.

Set up ESLint with its guided command:

npm init @eslint/config@latest

It asks about your project and creates an eslint.config.js file. A simple one for browser code looks like this:

import js from '@eslint/js';
import globals from 'globals';

export default [
  js.configs.recommended,           // the recommended rules
  {
    languageOptions: {
      globals: globals.browser,     // allow window, document, etc.
    },
    rules: {
      'no-unused-vars': 'warn',     // warn instead of error
    },
  },
];

Then add Prettier and run both tools:

npm install --save-dev --save-exact prettier
npx eslint .
npx prettier . --write

npx eslint . checks every file and lists problems with line numbers. npx prettier . --write formats every file in place. Prettier can be configured with a small .prettierrc file, for example { "singleQuote": true }.

Install the ESLint and Prettier extensions in your code editor too. Then you see warnings as you type and your file is formatted every time you save. If both tools disagree on style, add the eslint-config-prettier package, which turns off ESLint's style rules and leaves formatting to Prettier.

A short, honest note about frameworks

Frameworks like React, Vue and Svelte help you build big, interactive apps. Instead of updating the DOM by hand, you describe what the page should look like for the current data, and the framework updates the page for you.

They are useful, and many jobs ask for them, especially React. But every framework is built on the JavaScript you have learned: functions, arrays, objects, modules, events and async code. Developers who know plain JavaScript learn any framework much faster and fix problems more easily.

A good moment to start one is when you can build a small app (like the weather app in the next lesson) without help, and you begin to feel that keeping the page in sync with your data is getting messy. Pick one, build a couple of projects, and don't worry about choosing "the best" one.

Practice exercise

Create a new Vite project with the Vanilla JavaScript template. Install date-fns and show today's date on the page using format(). Then set up ESLint and Prettier, add lint and format scripts to package.json, and run them.

Hint: scripts go inside the "scripts" object, for example "lint": "eslint .", and you run them with npm run lint.

Key takeaways

• Node.js runs JavaScript outside the browser; npm installs packages from the npm registry.
• package.json lists your project's packages and scripts; commit package-lock.json, not node_modules.
• Vite gives you a fast dev server with npm run dev and optimized files with npm run build.
• ESLint finds likely bugs and Prettier formats code; use them together in your editor.
• Learn a framework after you are comfortable with plain JavaScript, not instead of it.