awesome-copilot/skills/web-coder/references/development-tools.md

Development Tools Reference

Tools and workflows for web development.

Version Control

Git

Distributed version control system.

Basic Commands:

# Initialize repository
git init

# Clone repository
git clone https://github.com/user/repo.git

# Check status
git status

# Stage changes
git add file.js
git add . # All files

# Commit
git commit -m "commit message"

# Push to remote
git push origin main

# Pull from remote
git pull origin main

# Branches
git branch feature-name
git checkout feature-name
git checkout -b feature-name # Create and switch

# Merge
git checkout main
git merge feature-name

# View history
git log
git log --oneline --graph

Best Practices:

• Commit often with meaningful messages
• Use branches for features
• Pull before push
• Review changes before committing
• Use .gitignore for generated files

GitHub/GitLab/Bitbucket

Git hosting platforms with collaboration features:

• Pull requests / Merge requests
• Code review
• Issue tracking
• CI/CD integration
• Project management

Package Managers

npm (Node Package Manager)

# Initialize project
npm init
npm init -y # Skip prompts

# Install dependencies
npm install package-name
npm install -D package-name # Dev dependency
npm install -g package-name # Global

# Update packages
npm update
npm outdated

# Run scripts
npm run build
npm test
npm start

# Audit security
npm audit
npm audit fix

package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js",
    "build": "webpack",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.0"
  },
  "devDependencies": {
    "webpack": "^5.75.0"
  }
}

Yarn

Faster alternative to npm:

yarn add package-name
yarn remove package-name
yarn upgrade
yarn build

pnpm

Efficient package manager (disk space saving):

pnpm install
pnpm add package-name
pnpm remove package-name

Build Tools

Webpack

Module bundler:

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

Vite

Fast modern build tool:

# Create project
npm create vite@latest my-app

# Dev server
npm run dev

# Build
npm run build

Parcel

Zero-config bundler:

parcel index.html
parcel build index.html

Task Runners

npm Scripts

{
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "jest",
    "lint": "eslint src/",
    "format": "prettier --write src/"
  }
}

Testing Frameworks

Jest

JavaScript testing framework:

// sum.test.js
const sum = require('./sum');

describe('sum function', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
  
  test('handles negative numbers', () => {
    expect(sum(-1, -2)).toBe(-3);
  });
});

Vitest

Vite-powered testing (Jest-compatible):

import { describe, test, expect } from 'vitest';

describe('math', () => {
  test('addition', () => {
    expect(1 + 1).toBe(2);
  });
});

Playwright

End-to-end testing:

import { test, expect } from '@playwright/test';

test('homepage has title', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

Linters & Formatters

ESLint

JavaScript linter:

// .eslintrc.js
module.exports = {
  extends: ['eslint:recommended'],
  rules: {
    'no-console': 'warn',
    'no-unused-vars': 'error'
  }
};

Prettier

Code formatter:

// .prettierrc
{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Stylelint

CSS linter:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "color-hex-length": "short"
  }
}

IDEs and Editors

Visual Studio Code

Key Features:

• IntelliSense
• Debugging
• Git integration
• Extensions marketplace
• Terminal integration

Popular Extensions:

• ESLint
• Prettier
• Live Server
• GitLens
• Path Intellisense

WebStorm

Full-featured IDE for web development by JetBrains.

Sublime Text

Lightweight, fast text editor.

Vim/Neovim

Terminal-based editor (steep learning curve).

TypeScript

Typed superset of JavaScript:

// types.ts
interface User {
  id: number;
  name: string;
  email?: string; // Optional
}

function getUser(id: number): User {
  return { id, name: 'John' };
}

// Generics
function identity<T>(arg: T): T {
  return arg;
}

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Continuous Integration (CI/CD)

GitHub Actions

# .github/workflows/test.yml
name: Test
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm test

Other CI/CD Platforms

• GitLab CI
• CircleCI
• Travis CI
• Jenkins

Debugging

Browser DevTools

// Debugging statements
debugger; // Pause execution
console.log('value:', value);
console.error('error:', error);
console.trace(); // Stack trace

Node.js Debugging

# Built-in debugger
node inspect app.js

# Chrome DevTools
node --inspect app.js
node --inspect-brk app.js # Break on start

Performance Profiling

Chrome DevTools Performance

• Record CPU activity
• Analyze flame charts
• Identify bottlenecks

Lighthouse

# CLI
npm install -g lighthouse
lighthouse https://example.com

# DevTools
Open Chrome DevTools > Lighthouse tab

Monitoring

Error Tracking

• Sentry: Error monitoring
• Rollbar: Real-time error tracking
• Bugsnag: Error monitoring

Analytics

• Google Analytics
• Plausible: Privacy-friendly
• Matomo: Self-hosted

RUM (Real User Monitoring)

• SpeedCurve
• New Relic
• Datadog

Developer Workflow

Typical Workflow

1. Setup: Clone repo, install dependencies
2. Develop: Write code, run dev server
3. Test: Run unit/integration tests
4. Lint/Format: Check code quality
5. Commit: Git commit and push
6. CI/CD: Automated tests and deployment
7. Deploy: Push to production

Environment Variables

# .env
DATABASE_URL=postgres://localhost/db
API_KEY=secret-key-here
NODE_ENV=development

// Access in Node.js
const dbUrl = process.env.DATABASE_URL;

Glossary Terms

Key Terms Covered:

• Bun
• Continuous integration
• Deno
• Developer tools
• Fork
• Fuzz testing
• Git
• IDE
• Node.js
• Repo
• Rsync
• SCM
• SDK
• Smoke test
• SVN
• TypeScript

Additional Resources

• Git Documentation
• npm Documentation
• Webpack Guides
• Jest Documentation
• TypeScript Handbook