GGistDev

Tooling for JavaScript

Use modern tooling to install dependencies, run scripts, lint/format code, and build for production.

Package managers

Install and manage dependencies.

npm init -y
npm install lodash
# or
pnpm add lodash
# or
yarn add lodash

package.json scripts

Define repeatable tasks.

{
  "name": "app",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "format": "prettier -w .",
    "test": "vitest"
  }
}

Run with npm run dev (or pnpm/yarn). Use npx to run binaries without installing globally.

Linting and formatting

npm install -D eslint prettier
npx eslint --init
  • ESLint: code quality; configure rules and plugins
  • Prettier: opinionated formatting (run via script or editor integration)

Transpilers and bundlers

  • Babel/SWC/ESBuild: transpile syntax for target environments
  • Vite/Webpack/Rollup/Parcel: dev server + bundling + optimizations

Vite example:

npm create vite@latest myapp -- --template vanilla
cd myapp && npm install && npm run dev

Environment variables

Inject at build time and guard usage.

const API_URL = import.meta.env.VITE_API_URL || '/api'
if (!API_URL) throw new Error('Missing API_URL')

TypeScript (optional)

Add types for better DX and safety.

npm install -D typescript @types/node
npx tsc --init

Use ts-node/tsx for running TS directly in dev; configure ESLint with @typescript-eslint.

Testing

Pick a test runner (Jest/Vitest) and assertion library. See the Testing section for details.

Summary

  • Use npm/pnpm/yarn and scripts to orchestrate tasks
  • Lint/format with ESLint + Prettier
  • Develop with Vite/Webpack; adopt TypeScript when helpful
←PreviousStorage
NextPerformance→