Verktygs-
kedjan

Köra JavaScript utanför webbläsaren

Node.js. Allt annat i listan är program skrivna i JavaScript, som körs i Node.

Använda andras kod

npm. Installerar paket, håller reda på versioner och kör skript.

Få det att fungera i webbläsaren

Vite. Utvecklingsserver som laddar om direkt, och bygger en färdig version till dist/.

Hålla koden ren

ESLint hittar fel. Prettier formaterar likadant hos alla.

Webbläsaren

document.title;   // fungerar
window.innerWidth; // fungerar
process.version;  // ReferenceError

Node

document.title;   // ReferenceError
process.version;  // 'v22.23.3'
await fetch(url); // fungerar

Installerar paket

npm install date-fns
npm install -D eslint

Håller reda på dem

package.json säger vilka paket och vilka versioner som är okej. package-lock.json säger exakt vilka som installerades.

Kör skript

npm run dev
npm run build
npm run lint

Filen

{
  "name": "vaderappen",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint ."
  },
  "dependencies": {
    "date-fns": "^4.4.0"
  },
  "devDependencies": {
    "vite": "^8.3.5"
  }
}

Det viktiga

scripts: kommandon du kör med npm run. dependencies: behövs när appen körs. devDependencies: behövs bara när du utvecklar, som Vite och ESLint. ^4.4.0: 4.4.0 eller nyare, men inte 5.

Med

package.json och package-lock.json. Med dem kan vem som helst köra npm install och få exakt samma paket.

Inte med

node_modules och dist. De går att återskapa, och node_modules kan vara hundratals megabyte.

Koden

import { format } from 'date-fns';

Felet

TypeError: Failed to resolve module
specifier "date-fns". Relative
references must start with either
"/", "./", or "../".

Skapa

npm create vite@latest 3-vite
# Vanilla → JavaScript

cd 3-vite
npm install
npm run dev

Det du får

index.html i roten, koden i src/, statiska filer i public/, och en package.json med skripten dev, build och preview.

render.js

import { format } from 'date-fns';
import { sv } from 'date-fns/locale';

format(new Date('2026-11-19'),
  'EEEE d MMMM', { locale: sv });
// 'torsdag 19 november'

Bygget

npm run build

dist/index.html
dist/assets/index-BYnw8nEF.css
dist/assets/index-fuh0IRuM.js

ESLint: hittar fel

Variabler som inte används, variabler som inte finns, kod som aldrig körs. Saker som kan vara buggar.

'x' is assigned a value
  but never used  no-unused-vars
'y' is not defined  no-undef

Prettier: formaterar

Indrag, citattecken, radlängd och semikolon. Bara utseendet, aldrig vad koden gör.

const x = 1
// blir
const x = 1;

Installera

npm install -D eslint @eslint/js globals
npm install -D prettier
npm install -D eslint-config-prettier

eslint.config.js

import js from '@eslint/js';
import globals from 'globals';
import prettier from
  'eslint-config-prettier';

export default [
  { ignores: ['dist'] },
  js.configs.recommended,
  { languageOptions:
    { globals: globals.browser } },
  prettier,
];

package.json

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint .",
  "format": "prettier --write .",
  "format:check": "prettier --check .",
  "check":
    "npm run lint && npm run format:check"
}

I VS Code

Installera tilläggen för ESLint och Prettier, och slå på Format on Save. Då ser du felen medan du skriver, och koden formateras när du sparar.

Tid

20 min

Mål

Du kan sätta upp ett Vite-projekt med lint och formattering från början, utan att titta i code-alongen.