Inline Edit Strategies: Tips 46-60

Inline Edit (Ctrl+K) is where natural language meets precise code transformation. These 15 tips will teach you to wield this powerful feature for everything from quick fixes to sophisticated refactoring operations.

Fundamentals of Inline Edit

Tip 46: Understand Selection Scope Strategy

Your selection determines the transformation scope:

Precise Selection

// Select only the return statement:
return data;

// Ctrl+K: "Add null check"
// Result affects only the return:
return data || [];

Function Selection

// Select entire function:
function fetchUser(id) {
  const user = db.find(id);
  return user;
}

// Ctrl+K: "Add error handling and async/await"
// Result transforms whole function:
async function fetchUser(id) {
  try {
    const user = await db.find(id);
    if (!user) {
      throw new Error(`User ${id} not found`);
    }
    return user;
  } catch (error) {
    console.error('Error fetching user:', error);
    throw error;
  }
}

No Selection

// Cursor at empty line, no selection
// Ctrl+K: "Create a function to validate email addresses"

// Generates new code at cursor:
function isValidEmail(email) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

Tip 47: Write Clear, Specific Instructions

Transform vague requests into precise instructions:

❌ Vague

“Make this better” “Fix this” “Optimize”

✅ Specific

“Add input validation for null and empty strings” “Convert callbacks to async/await” “Extract magic numbers into named constants”

Example transformations:

// Original
function calc(x, y) {
  return x * 0.1 + y * 0.15;
}

// Vague: "Make this clearer"
// Specific: "Extract tax rates as constants and add parameter validation"

// Result:
const TAX_RATE_BASE = 0.1;
const TAX_RATE_ADDITIONAL = 0.15;

function calc(x, y) {
  if (typeof x !== 'number' || typeof y !== 'number') {
    throw new TypeError('Both parameters must be numbers');
  }
  return x * TAX_RATE_BASE + y * TAX_RATE_ADDITIONAL;
}

Tip 48: Use Context Clues in Instructions

Reference surrounding code in your instructions:

// Select the function
async function createUser(data) {
  return db.users.insert(data);
}

// Ctrl+K: "Add the same validation as updateUser function above"
// Cursor looks at updateUser and applies similar validation

// Or be explicit about patterns:
// "Add validation matching our standard API pattern with Joi"

Advanced Transformation Techniques

Tip 49: Chain Multiple Inline Edits

Build complex transformations incrementally:

1. First Edit: “Convert to TypeScript with proper types”
2. Second Edit: “Add error handling”
3. Third Edit: “Add JSDoc documentation”
4. Fourth Edit: “Extract magic numbers to constants”

Each edit builds on the previous, maintaining context:

// Original
function process(items) {
  return items.filter(i => i.price > 100).map(i => i.price * 1.2);
}

// After chained edits:
/**
 * Processes items by filtering and applying markup
 * @param items - Array of items with price property
 * @returns Array of adjusted prices for premium items
 */
const PREMIUM_THRESHOLD = 100;
const MARKUP_RATE = 1.2;

function process(items: Array<{price: number}>): number[] {
  try {
    if (!Array.isArray(items)) {
      throw new TypeError('Items must be an array');
    }

    return items
      .filter(item => item.price > PREMIUM_THRESHOLD)
      .map(item => item.price * MARKUP_RATE);
  } catch (error) {
    console.error('Error processing items:', error);
    return [];
  }
}

Tip 50: Refactor with Pattern Recognition

Inline Edit recognizes and applies patterns:

// Select multiple similar functions
getUserById(id) { return db.users.find(id); }
getPostById(id) { return db.posts.find(id); }
getCommentById(id) { return db.comments.find(id); }

// Ctrl+K: "Convert to a generic factory function"
// Result:
function createFindById(collection) {
  return (id) => db[collection].find(id);
}

const getUserById = createFindById('users');
const getPostById = createFindById('posts');
const getCommentById = createFindById('comments');

Tip 51: Transform Data Structures

Inline Edit excels at structural transformations:

Array to Object

// Select:
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

// Ctrl+K: "Convert to object keyed by id"
// Result:
const users = {
  1: { id: 1, name: 'Alice' },
  2: { id: 2, name: 'Bob' }
};

Callbacks to Promises

// Select:
function loadData(callback) {
  fs.readFile('data.json', (err, data) => {
    if (err) callback(err);
    else callback(null, JSON.parse(data));
  });
}

// Ctrl+K: "Convert to promise-based"
// Result:
function loadData() {
  return new Promise((resolve, reject) => {
    fs.readFile('data.json', (err, data) => {
      if (err) reject(err);
      else resolve(JSON.parse(data));
    });
  });
}

Performance and Architecture

Tip 52: Optimize Code Performance

Use Inline Edit for performance improvements:

// Select inefficient code:
function findDuplicates(arr) {
  const duplicates = [];
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j] && !duplicates.includes(arr[i])) {
        duplicates.push(arr[i]);
      }
    }
  }
  return duplicates;
}

// Ctrl+K: "Optimize using Set for O(n) complexity"
// Result:
function findDuplicates(arr) {
  const seen = new Set();
  const duplicates = new Set();

  for (const item of arr) {
    if (seen.has(item)) {
      duplicates.add(item);
    } else {
      seen.add(item);
    }
  }

  return Array.from(duplicates);
}

Tip 53: Apply Design Patterns

Transform code to implement specific patterns:

// Select a class with direct dependencies:
class OrderService {
  constructor() {
    this.database = new Database();
    this.emailer = new EmailService();
    this.logger = new Logger();
  }
}

// Ctrl+K: "Apply dependency injection pattern"
// Result:
class OrderService {
  constructor(database, emailer, logger) {
    this.database = database;
    this.emailer = emailer;
    this.logger = logger;
  }
}

// With interface definitions:
interface IDatabase { /* ... */ }
interface IEmailService { /* ... */ }
interface ILogger { /* ... */ }

class OrderService {
  constructor(
    private database: IDatabase,
    private emailer: IEmailService,
    private logger: ILogger
  ) {}
}

Tip 54: Extract and Modularize

Break down complex code into modules:

// Select a large function
// Ctrl+K: "Extract validation logic into separate functions"

// Or more specific:
// "Extract each step into a named function following single responsibility principle"

Wskazówka

When extracting code, Inline Edit maintains proper variable scoping and parameter passing automatically.

Testing and Documentation

Tip 55: Generate Comprehensive Tests

Transform functions into fully tested code:

// Select function:
export function parsePrice(priceString: string): number {
  const cleaned = priceString.replace(/[$,]/g, '');
  return parseFloat(cleaned);
}

// Ctrl+K: "Add comprehensive test cases including edge cases"
// Generates (in test file):
describe('parsePrice', () => {
  it('should parse basic price strings', () => {
    expect(parsePrice('$10.99')).toBe(10.99);
    expect(parsePrice('$1,234.56')).toBe(1234.56);
  });

  it('should handle edge cases', () => {
    expect(parsePrice('$0')).toBe(0);
    expect(parsePrice('$0.01')).toBe(0.01);
    expect(parsePrice('$.99')).toBe(0.99);
  });

  it('should handle invalid inputs', () => {
    expect(parsePrice('')).toBe(NaN);
    expect(parsePrice('abc')).toBe(NaN);
    expect(parsePrice('$')).toBe(NaN);
  });

  it('should handle large numbers', () => {
    expect(parsePrice('$1,000,000.00')).toBe(1000000);
  });
});

Tip 56: Add Intelligent Documentation

Generate context-aware documentation:

// Select complex function
// Ctrl+K: "Add JSDoc with examples based on the implementation"

// Inline Edit analyzes the code and generates:
/**
 * Calculates the compound interest on an investment
 * @param {number} principal - Initial investment amount
 * @param {number} rate - Annual interest rate (as decimal, e.g., 0.05 for 5%)
 * @param {number} time - Investment period in years
 * @param {number} n - Number of times interest is compounded per year
 * @returns {number} Final amount after compound interest
 *
 * @example
 * // Calculate monthly compound interest for $1000 at 5% for 2 years
 * calculateCompoundInterest(1000, 0.05, 2, 12); // Returns 1104.94
 *
 * @example
 * // Calculate annual compound interest
 * calculateCompoundInterest(5000, 0.03, 10, 1); // Returns 6719.58
 */

Error Handling and Edge Cases

Tip 57: Add Robust Error Handling

Transform optimistic code into production-ready code:

// Select:
async function fetchUserData(userId) {
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();
  return data;
}

// Ctrl+K: "Add comprehensive error handling with retry logic"
// Result:
async function fetchUserData(userId, maxRetries = 3) {
  if (!userId) {
    throw new Error('userId is required');
  }

  let lastError;

  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(`/api/users/${userId}`);

      if (!response.ok) {
        if (response.status === 404) {
          throw new Error(`User ${userId} not found`);
        }
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const data = await response.json();
      return data;

    } catch (error) {
      lastError = error;

      if (attempt < maxRetries &&
          !error.message.includes('not found')) {
        console.warn(`Attempt ${attempt} failed, retrying...`);
        await new Promise(resolve =>
          setTimeout(resolve, 1000 * attempt)
        );
      }
    }
  }

  throw new Error(`Failed after ${maxRetries} attempts: ${lastError.message}`);
}

Tip 58: Handle Edge Cases Intelligently

Inline Edit can identify and handle edge cases:

// Select function that needs edge case handling
// Ctrl+K: "Add edge case handling for null, undefined, empty arrays, and boundary values"

Quick Actions and Shortcuts

Tip 59: Use Quick Question Mode

Press Alt+Enter instead of Enter for quick questions:

// Select code
const result = data?.user?.profile?.email || 'default@example.com';

// Ctrl+K, then Alt+Enter: "What does ?. do?"
// Cursor explains optional chaining without modifying code

Pro Tip Use Quick Question to understand code before transforming it.

Tip 60: Combine with Other Features

Create powerful workflows:

Inline Edit → Tab

Use Inline Edit to start a refactor, then Tab to complete similar patterns

Inline Edit → Agent

Use Inline Edit for local changes, then Agent for project-wide updates

Search → Inline Edit

Find all occurrences, then batch transform with Inline Edit

Example workflow:

1. Search for all "console.log" statements
2. Select each result group
3. Ctrl+K: "Replace with proper logger.debug calls"
4. Review and apply changes

Best Practices Summary

Do’s and Don’ts

✅ Do:

• Be specific about desired changes
• Select appropriate scope
• Chain simple transformations
• Review generated code
• Use for refactoring patterns

❌ Don’t:

• Make vague requests
• Transform too much at once
• Skip code review
• Ignore edge cases
• Override without understanding

Practice Challenges

1. Refactoring Challenge: Take a 50-line function and break it down into smaller functions using only Inline Edit.

2. Type Safety Challenge: Convert a JavaScript file to TypeScript with proper types using chained Inline Edits.

3. Pattern Application: Apply three different design patterns to a class using Inline Edit.

4. Test Generation: Generate complete test coverage for a module using Inline Edit.

---

Next Steps

You’ve mastered precise code transformation with Inline Edit. Now explore Agent & Chat Optimization to handle complex, multi-file operations and leverage AI for architectural decisions.