Development Tools and IDE Integration

// .vscode/settings.json
{
  // TypeScript settings
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  
  // IntelliSense
  "typescript.suggest.autoImports": true,
  "typescript.suggest.paths": true,
  "typescript.suggest.completeFunctionCalls": true,
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.preferences.quoteStyle": "single",
  
  // Error checking
  "typescript.validate.enable": true,
  "typescript.reportStyleChecksAsWarnings": true,
  
  // Inlay hints (TS 4.4+)
  "typescript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.parameterTypes.enabled": true,
  "typescript.inlayHints.variableTypes.enabled": true,
  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
  "typescript.inlayHints.enumMemberValues.enabled": true,
  
  // Organize imports
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit",
    "source.fixAll.eslint": "explicit"
  },
  
  // Format on save
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  
  // Quick suggestions
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  
  // Error display
  "problems.decorations.enabled": true,
  "errorLens.enabled": true,
  "errorLens.delay": 500
}

// TypeScript-specific shortcuts in VS Code

// Navigation
F12                 // Go to Definition
Ctrl+F12            // Go to Implementation
Shift+F12           // Find All References
Alt+F12             // Peek Definition
Ctrl+Shift+O        // Go to Symbol in File
Ctrl+T              // Go to Symbol in Workspace

// Refactoring
F2                  // Rename Symbol
Ctrl+.              // Quick Fix / Code Actions
Ctrl+Shift+R        // Refactor menu
Alt+Shift+F         // Format Document

// IntelliSense
Ctrl+Space          // Trigger Suggest
Ctrl+Shift+Space    // Trigger Parameter Hints
Ctrl+I              // Trigger Suggest (alternative)

// Type Information
Ctrl+K Ctrl+I       // Show Hover (type info)

// Imports
Alt+Shift+O         // Organize Imports
Ctrl+Shift+P        // Command Palette
  → "Add Missing Import"
  → "Remove Unused Imports"

// Errors
F8                  // Go to Next Error
Shift+F8            // Go to Previous Error
Ctrl+Shift+M        // Show Problems Panel

// TypeScript commands (Ctrl+Shift+P)
"TypeScript: Restart TS Server"
"TypeScript: Select TypeScript Version"
"TypeScript: Go to Source Definition"
"TypeScript: Reload Project"

// .eslintrc.js
module.exports = {
  root: true,
  
  // Parser for TypeScript
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2022,
    sourceType: 'module',
    project: './tsconfig.json',  // Required for type-aware rules
    tsconfigRootDir: __dirname
  },
  
  // Plugins
  plugins: ['@typescript-eslint'],
  
  // Extend recommended configs
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-type-checked',
    'plugin:@typescript-eslint/stylistic'
  ],
  
  // Custom rules
  rules: {
    // TypeScript-specific
    '@typescript-eslint/explicit-function-return-type': 'warn',
    '@typescript-eslint/explicit-module-boundary-types': 'warn',
    '@typescript-eslint/no-explicit-any': 'error',
    '@typescript-eslint/no-unused-vars': ['error', {
      argsIgnorePattern: '^_',
      varsIgnorePattern: '^_'
    }],
    '@typescript-eslint/no-non-null-assertion': 'warn',
    '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
    '@typescript-eslint/consistent-type-imports': ['error', {
      prefer: 'type-imports',
      fixStyle: 'inline-type-imports'
    }],
    
    // Naming conventions
    '@typescript-eslint/naming-convention': [
      'error',
      {
        selector: 'interface',
        format: ['PascalCase'],
        custom: {
          regex: '^I[A-Z]',
          match: false
        }
      },
      {
        selector: 'typeAlias',
        format: ['PascalCase']
      },
      {
        selector: 'enum',
        format: ['PascalCase']
      },
      {
        selector: 'enumMember',
        format: ['UPPER_CASE']
      }
    ],
    
    // Type-aware rules (require parserOptions.project)
    '@typescript-eslint/await-thenable': 'error',
    '@typescript-eslint/no-floating-promises': 'error',
    '@typescript-eslint/no-misused-promises': 'error',
    '@typescript-eslint/require-await': 'error',
    '@typescript-eslint/no-unnecessary-type-assertion': 'error',
    '@typescript-eslint/prefer-nullish-coalescing': 'warn',
    '@typescript-eslint/prefer-optional-chain': 'warn',
    '@typescript-eslint/strict-boolean-expressions': 'warn',
    
    // Disable base ESLint rules (replaced by TS versions)
    'no-unused-vars': 'off',
    'no-undef': 'off',  // TypeScript handles this
    'no-use-before-define': 'off'
  },
  
  // Override for specific files
  overrides: [
    {
      files: ['*.test.ts', '*.spec.ts'],
      rules: {
        '@typescript-eslint/no-explicit-any': 'off'
      }
    }
  ]
};

// Key rules to enforce code quality

// Prevent common mistakes
'@typescript-eslint/no-explicit-any': 'error'
'@typescript-eslint/no-unsafe-assignment': 'error'
'@typescript-eslint/no-unsafe-call': 'error'
'@typescript-eslint/no-unsafe-member-access': 'error'
'@typescript-eslint/no-unsafe-return': 'error'

// Promise handling
'@typescript-eslint/no-floating-promises': 'error'
'@typescript-eslint/no-misused-promises': 'error'
'@typescript-eslint/await-thenable': 'error'
'@typescript-eslint/promise-function-async': 'warn'

// Type safety
'@typescript-eslint/no-unnecessary-type-assertion': 'error'
'@typescript-eslint/no-non-null-assertion': 'warn'
'@typescript-eslint/prefer-as-const': 'error'
'@typescript-eslint/switch-exhaustiveness-check': 'error'

// Modern TypeScript features
'@typescript-eslint/prefer-nullish-coalescing': 'warn'
'@typescript-eslint/prefer-optional-chain': 'warn'
'@typescript-eslint/prefer-readonly': 'warn'
'@typescript-eslint/prefer-reduce-type-parameter': 'warn'

// Code style
'@typescript-eslint/array-type': ['error', { default: 'array-simple' }]
'@typescript-eslint/consistent-type-definitions': ['error', 'interface']
'@typescript-eslint/consistent-type-imports': 'error'
'@typescript-eslint/method-signature-style': ['error', 'property']

// package.json scripts
{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx",
    "lint:fix": "eslint . --ext .ts,.tsx --fix",
    "lint:report": "eslint . --ext .ts,.tsx --format html --output-file eslint-report.html"
  }
}

// .prettierrc.json
{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "arrowParens": "always",
  "endOfLine": "lf",
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "quoteProps": "as-needed"
}

// .prettierignore
node_modules
dist
build
coverage
*.min.js
*.min.css
.next
.cache

// package.json scripts
{
  "scripts": {
    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx}\""
  }
}

// Integrate with ESLint
// npm install -D eslint-config-prettier eslint-plugin-prettier

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'  // Disables ESLint formatting rules that conflict with Prettier
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'  // Show Prettier errors as ESLint errors
  }
};

// VS Code settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  }
}

// Pre-commit hooks with Husky + lint-staged
// npm install -D husky lint-staged

// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

// .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

// Initialize husky
npm pkg set scripts.prepare="husky install"
npm run prepare
npx husky add .husky/pre-commit "npx lint-staged"

// VS Code settings for TypeScript language server
{
  // Language server settings
  "typescript.tsserver.maxTsServerMemory": 8192,  // MB (default: 3072)
  "typescript.tsserver.log": "off",  // or "verbose" for debugging
  "typescript.tsserver.trace": "off",
  
  // Performance optimizations
  "typescript.disableAutomaticTypeAcquisition": false,
  "typescript.tsserver.watchOptions": {
    "excludeDirectories": [
      "**/node_modules",
      "**/.git",
      "**/dist",
      "**/build"
    ]
  },
  
  // Project loading
  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
  "typescript.tsserver.useSyntaxServer": "auto",  // Separate server for syntax
  
  // Plugin support
  "typescript.tsserver.pluginPaths": [],
  
  // Surveys and telemetry
  "typescript.surveys.enabled": false
}

// tsconfig.json optimizations for language server
{
  "compilerOptions": {
    "skipLibCheck": true,  // Faster project loading
    "incremental": true,   // Cache between restarts
    "tsBuildInfoFile": "./.cache/.tsbuildinfo"
  },
  "exclude": [
    "node_modules",
    "dist",
    "**/*.test.ts",
    "**/*.spec.ts"
  ]
}

// Restart language server when needed
// Ctrl+Shift+P → "TypeScript: Restart TS Server"

// View language server logs
// Ctrl+Shift+P → "TypeScript: Open TS Server log"

// Select TypeScript version (workspace vs VS Code)
// Ctrl+Shift+P → "TypeScript: Select TypeScript Version"

// TypeScript language service plugins extend IDE features

// Example: typescript-plugin-styled-components
// Provides IntelliSense for styled-components

// Install plugin
npm install -D typescript-plugin-styled-components

// tsconfig.json
{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-styled-components",
        "minify": true,
        "transpileTemplateLiterals": true,
        "ssr": false
      }
    ]
  }
}

// Example: typescript-plugin-css-modules
// Type safety for CSS modules

npm install -D typescript-plugin-css-modules

// tsconfig.json
{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "classnameTransform": "camelCase",
          "customTemplate": "./cssModuleTemplate.js"
        }
      }
    ]
  }
}

// VS Code settings to use workspace TypeScript (required for plugins)
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

// Other useful plugins:
// - @styled/typescript-styled-plugin (Styled Components)
// - typescript-lit-html-plugin (lit-html templates)
// - typescript-svelte-plugin (Svelte files)
// - @volar/typescript-plugin (Vue)

// Quick Fix (Ctrl+. or lightbulb icon) - Common actions

// 1. Add missing imports
import { useState } from 'react';  // Auto-suggested

// 2. Implement interface
class User implements IUser {  // Ctrl+. → "Implement interface"
  // All interface methods added automatically
}

// 3. Add inferred type
function calculate(a: number, b: number) {  // Ctrl+. → "Infer return type"
  return a + b;
}
// Becomes:
function calculate(a: number, b: number): number {
  return a + b;
}

// 4. Convert to arrow function
function greet(name: string) {  // Ctrl+. → "Convert to arrow function"
  return `Hello, ${name}`;
}
// Becomes:
const greet = (name: string) => `Hello, ${name}`;

// 5. Extract to function
const result = users
  .filter(u => u.age > 18)  // Select code → Ctrl+. → "Extract to function"
  .map(u => u.name);
// Becomes:
const getAdultNames = (users: User[]) => 
  users.filter(u => u.age > 18).map(u => u.name);
const result = getAdultNames(users);

// 6. Convert to async/await
fetchData()  // Ctrl+. → "Convert to async/await"
  .then(data => process(data))
  .catch(err => console.error(err));
// Becomes:
try {
  const data = await fetchData();
  process(data);
} catch (err) {
  console.error(err);
}

// 7. Add JSDoc comment
function complexFunction(params) {  // Ctrl+. → "Add JSDoc comment"
  // ...
}
// Becomes:
/**
 * 
 * @param params 
 * @returns 
 */
function complexFunction(params) {
  // ...
}

// Before - messy imports
import { z } from 'zod';
import React from 'react';
import { useState } from 'react';
import './styles.css';
import { formatDate } from '../utils';
import type { User } from './types';
import { api } from '@/api';

// After - organized (Alt+Shift+O or save with organizeImports)
import './styles.css';

import React, { useState } from 'react';
import { z } from 'zod';

import { api } from '@/api';
import { formatDate } from '../utils';
import type { User } from './types';

// VS Code settings for import organization
{
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.preferences.importModuleSpecifierEnding": "auto"
}

// Remove unused imports automatically
import { useState, useEffect, useMemo } from 'react';  // useMemo unused
// After save (if configured):
import { useState, useEffect } from 'react';

// ESLint rule to enforce
{
  "rules": {
    "@typescript-eslint/no-unused-vars": ["error", {
      "vars": "all",
      "args": "after-used",
      "ignoreRestSiblings": false
    }]
  }
}

// VS Code settings for enhanced IntelliSense
{
  // Auto-completion
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true  // Show suggestions in strings
  },
  "editor.suggestOnTriggerCharacters": true,
  "editor.acceptSuggestionOnCommitCharacter": true,
  "editor.acceptSuggestionOnEnter": "on",
  "editor.tabCompletion": "on",
  "editor.wordBasedSuggestions": "matchingDocuments",
  
  // TypeScript IntelliSense
  "typescript.suggest.autoImports": true,
  "typescript.suggest.paths": true,
  "typescript.suggest.completeFunctionCalls": true,
  "typescript.suggest.includeCompletionsForImportStatements": true,
  "typescript.suggest.includeCompletionsWithSnippetText": true,
  
  // Parameter hints
  "editor.parameterHints.enabled": true,
  "editor.parameterHints.cycle": true,
  
  // Inlay hints (TypeScript 4.4+)
  "typescript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": true,
  "typescript.inlayHints.parameterTypes.enabled": true,
  "typescript.inlayHints.variableTypes.enabled": true,
  "typescript.inlayHints.variableTypes.suppressWhenTypeMatchesName": true,
  "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
  "typescript.inlayHints.enumMemberValues.enabled": true,
  
  // Quick info
  "editor.hover.enabled": true,
  "editor.hover.delay": 300,
  "editor.hover.sticky": true
}

// 1. Auto-import suggestions
const data = us|  // Type 'us' → suggests 'useState' with auto-import
// Press Enter → import { useState } from 'react';

// 2. Parameter hints
Array.from(|)  // Ctrl+Shift+Space shows:
// from<T>(arrayLike: ArrayLike<T>): T[]
// from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[]

// 3. Type information on hover
const user = { name: 'Alice', age: 30 };
// Hover shows: const user: { name: string; age: number; }

// 4. Inlay hints display
function greet(name) {  // Shows: name: string
  return `Hello, ${name}`;
}
const result = greet('Alice');  // Shows: const result: string

// 5. Dot completion for object properties
interface User {
  id: number;
  name: string;
  email: string;
}
const user: User = {|  // Ctrl+Space shows: id, name, email suggestions

// 6. Generic type inference
const array = [1, 2, 3];
array.map(|  // Shows: (value: number, index: number, array: number[]) => U

// 7. Union type narrowing
function handle(value: string | number) {
  if (typeof value === 'string') {
    value.|  // IntelliSense shows string methods
  } else {
    value.|  // IntelliSense shows number methods
  }
}

// 8. JSDoc integration
/**
 * Formats a user's name
 * @param user - The user object
 * @param includeTitle - Whether to include title
 * @returns Formatted name string
 */
function formatName(user: User, includeTitle = false): string {
  // Hover shows full JSDoc
}

// 9. Path completion in imports
import { Button } from './components/|  // Shows directory contents

// 10. Template literal type completion
type Color = 'red' | 'green' | 'blue';
const color: Color = '|  // Shows: red, green, blue