Skip to content

devtools.md

Latest commit

 

History

History
611 lines (521 loc) · 13.2 KB

devtools.md

File metadata and controls

611 lines (521 loc) · 13.2 KB
Raw

Development Tools 🔧

Essential development and build tools for modern web applications.

ESLint

Description: Pluggable JavaScript linter that helps identify and report on patterns in JavaScript code.

Key Features:

  • Configurable rules
  • Plugin system
  • Auto-fixing capabilities
  • IDE integration
  • Custom rules support
  • TypeScript support

Installation:

npm install --save-dev eslint
# For React projects
npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks
# For TypeScript
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

Configuration (.eslintrc.js):

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
    'react-hooks',
    '@typescript-eslint',
  ],
  rules: {
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'no-unused-vars': 'warn',
    'no-console': 'warn',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

Package.json Scripts:

{
  "scripts": {
    "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
    "lint:fix": "eslint src/**/*.{js,jsx,ts,tsx} --fix"
  }
}

Use Cases: Code quality, consistency, error prevention

Prettier

Description: Opinionated code formatter that enforces a consistent style across your codebase.

Key Features:

  • Opinionated formatting
  • Multiple language support
  • IDE integration
  • Configurable options
  • Ignore files support
  • Integration with ESLint

Installation:

npm install --save-dev prettier

Configuration (.prettierrc):

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

Ignore File (.prettierignore):

node_modules
dist
build
coverage
*.min.js
package-lock.json

Package.json Scripts:

{
  "scripts": {
    "format": "prettier --write src/**/*.{js,jsx,ts,tsx,css,md}",
    "format:check": "prettier --check src/**/*.{js,jsx,ts,tsx,css,md}"
  }
}

Integration with ESLint:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier
// .eslintrc.js
module.exports = {
  extends: [
    'prettier', // Disables ESLint rules that conflict with Prettier
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

Use Cases: Code formatting, consistency, team collaboration

Husky

Description: Git hooks made easy for JavaScript projects to ensure code quality before commits and pushes.

Key Features:

  • Git hooks management
  • Pre-commit hooks
  • Pre-push hooks
  • Easy configuration
  • Cross-platform support
  • Integration with other tools

Installation:

npm install --save-dev husky
npx husky install

Setup:

# Add prepare script
npm set-script prepare "husky install"

# Add pre-commit hook
npx husky add .husky/pre-commit "npm run lint"
npx husky add .husky/pre-commit "npm run format:check"
npx husky add .husky/pre-commit "npm test"

# Add pre-push hook
npx husky add .husky/pre-push "npm run build"

Generated Files (.husky/pre-commit):

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint
npm run format:check
npm test

Advanced Configuration:

# Commit message linting
npm install --save-dev @commitlint/cli @commitlint/config-conventional
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'

Use Cases: Code quality enforcement, automated testing, commit message standards

TypeScript

Description: Typed superset of JavaScript that compiles to plain JavaScript with static type checking.

Key Features:

  • Static type checking
  • IntelliSense support
  • Refactoring tools
  • Compile-time error detection
  • Modern JavaScript features
  • Declaration files

Installation:

npm install --save-dev typescript @types/node @types/react @types/react-dom

Configuration (tsconfig.json):

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Basic Usage:

// types/user.ts
export interface User {
  id: number;
  name: string;
  email: string;
  isActive?: boolean;
}

export type UserRole = 'admin' | 'user' | 'guest';

// components/UserCard.tsx
import React from 'react';
import { User, UserRole } from '@/types/user';

interface UserCardProps {
  user: User;
  role: UserRole;
  onEdit: (userId: number) => void;
  onDelete: (userId: number) => void;
}

const UserCard: React.FC<UserCardProps> = ({ user, role, onEdit, onDelete }) => {
  return (
    <div className="user-card">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <span className="role">{role}</span>
      <div className="actions">
        <button onClick={() => onEdit(user.id)}>Edit</button>
        <button onClick={() => onDelete(user.id)}>Delete</button>
      </div>
    </div>
  );
};

export default UserCard;

Use Cases: Large codebases, team collaboration, refactoring safety, better IDE support

Vite

Description: Next generation frontend tooling with fast development server and optimized builds.

Key Features:

  • Fast development server
  • Hot Module Replacement (HMR)
  • Optimized builds
  • Plugin ecosystem
  • TypeScript support
  • Framework agnostic

Installation:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

Configuration (vite.config.ts):

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
  define: {
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
  },
});

Package.json Scripts:

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
  }
}

Use Cases: Modern development workflow, fast builds, development server

Sonar

Description: Code quality and security analysis platform that helps identify bugs, vulnerabilities, and code smells.

Key Features:

  • Code quality analysis
  • Security vulnerability detection
  • Code smell identification
  • Duplicate code detection
  • Technical debt tracking
  • Multi-language support
  • CI/CD integration
  • Pull request analysis

Installation:

# SonarQube Community Edition (self-hosted)
docker run -d --name sonarqube -p 9000:9000 sonarqube:community

# SonarCloud (cloud service)
# No installation required, just connect your repository

Configuration (sonar-project.properties):

# Project identification
sonar.projectKey=my-project
sonar.projectName=My Project
sonar.projectVersion=1.0

# Source code
sonar.sources=src
sonar.tests=src/test
sonar.exclusions=**/node_modules/**,**/dist/**,**/build/**

# Language specific
sonar.javascript.lcov.reportPaths=coverage/lcov.info
sonar.typescript.lcov.reportPaths=coverage/lcov.info

# Quality gates
sonar.qualitygate.wait=true

GitHub Actions Integration (.github/workflows/sonar.yml):

name: SonarCloud Analysis

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  sonarcloud:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run tests
        run: npm test -- --coverage
      
      - name: SonarCloud Scan
        uses: SonarSource/sonarcloud-github-action@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

Package.json Scripts:

{
  "scripts": {
    "sonar": "sonar-scanner",
    "test:coverage": "jest --coverage",
    "lint:sonar": "eslint src --ext .js,.jsx,.ts,.tsx --format json --output-file eslint-report.json"
  }
}

Basic Usage:

# Run SonarQube analysis
npm run sonar

# With coverage
npm run test:coverage
npm run sonar

# With linting
npm run lint:sonar
npm run sonar

Quality Gates:

// sonar-project.properties
sonar.qualitygate.wait=true

// Custom quality gate rules
sonar.qualitygate.wait=true
sonar.qualitygate.wait.timeout=300

Use Cases: Code quality monitoring, security scanning, technical debt management, CI/CD integration

Webpack

Description: Static module bundler for modern JavaScript applications with extensive customization options.

Key Features:

  • Module bundling
  • Code splitting
  • Loaders and plugins
  • Development server
  • Hot reloading
  • Asset optimization

Installation:

npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev html-webpack-plugin css-loader style-loader

Configuration (webpack.config.js):

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
              '@babel/preset-typescript',
            ],
          },
        },
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  devServer: {
    static: './dist',
    hot: true,
    port: 3000,
  },
};

Use Cases: Complex build requirements, legacy projects, extensive customization

Comparison Table

Tool Purpose Learning Curve Performance Use Case
ESLint Code Quality Low Fast All projects
Prettier Code Formatting Low Fast All projects
Husky Git Hooks Low Fast Team projects
TypeScript Type Safety Medium Fast Large projects
Vite Build Tool Low Very Fast Modern projects
Webpack Build Tool High Medium Complex projects
Sonar Code Analysis Medium Medium Quality monitoring

When to Use Each

  • ESLint: Always use for code quality and consistency
  • Prettier: Always use for code formatting consistency
  • Husky: Use in team projects to enforce standards
  • TypeScript: Use in large projects or when type safety is important
  • Vite: Use for new projects with modern tooling
  • Webpack: Use when you need extensive customization or have complex requirements

Best Practices

  1. Consistent Configuration: Use shared configs across projects
  2. Git Hooks: Set up pre-commit hooks for quality checks
  3. TypeScript: Gradually adopt TypeScript in existing projects
  4. Build Optimization: Use code splitting and lazy loading
  5. Development Experience: Configure hot reloading and fast refresh
  6. CI/CD Integration: Run linting and type checking in CI
  7. Documentation: Document custom configurations and scripts

Advanced Configurations

Monorepo Setup

// package.json (root)
{
  "workspaces": ["packages/*"],
  "scripts": {
    "lint": "eslint packages/*/src",
    "format": "prettier --write packages/*/src",
    "type-check": "tsc --build packages/*/tsconfig.json"
  }
}

Environment-Specific Builds

// vite.config.ts
import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  
  return {
    define: {
      __API_URL__: JSON.stringify(env.VITE_API_URL),
      __APP_ENV__: JSON.stringify(mode),
    },
  };
});