Getting Started Development Setup - hiraishikentaro/rails-factorybot-jump GitHub Wiki

Getting Started: Development Setup

Prerequisites

Before setting up the development environment, ensure you have the following tools installed:

Required Tools

  • Node.js (18.x or higher) - JavaScript runtime
  • npm - Node package manager (included with Node.js)
  • Visual Studio Code - For extension development and testing
  • Git - Version control system

Development Tools

  • TypeScript - Primary development language
  • ESLint - Code quality and style checking
  • Mocha - Testing framework

Source: package.json#L77-L89

Environment Setup

1. Clone the Repository

git clone https://github.com/hiraishikentaro/rails-factorybot-jump.git
cd rails-factorybot-jump

2. Install Dependencies

npm install

This installs all required dependencies including:

  • Development dependencies for TypeScript compilation
  • Testing frameworks (Mocha, Sinon)
  • VSCode extension testing tools
  • Code quality tools (ESLint, TypeScript ESLint)

Source: package.json#L77-L90

3. Development Scripts

The project includes several npm scripts for development:

# Compile TypeScript source code
npm run compile

# Watch for file changes and recompile automatically
npm run watch

# Run the test suite
npm run test

# Run ESLint for code quality checks
npm run lint

# Prepare for publishing (compile + lint)
npm run vscode:prepublish

Source: package.json#L68-L76

VSCode Extension Development Setup

1. Open in VSCode

code .

2. Install Recommended Extensions

While not strictly required, these VSCode extensions are helpful for development:

  • TypeScript and JavaScript Language Features (built-in)
  • ESLint - Real-time linting
  • Mocha Test Explorer - Test runner integration

3. Debug Configuration

The project includes VSCode debug configuration for extension development:

  1. Open the project in VSCode
  2. Press F5 to start a new Extension Development Host
  3. This launches a new VSCode window with your extension loaded
  4. Test your changes in the new window

TypeScript Configuration

The project uses TypeScript with the following configuration:

Compiler Options:

  • Target: ES2020
  • Module: CommonJS (required for VSCode extensions)
  • Strict Mode: Enabled for type safety
  • Source Maps: Enabled for debugging
  • Output Directory: out/ (compiled JavaScript)

Source: tsconfig.json#L1-L13

Project Structure

src/
├── extension.ts              # Main extension entry point
├── providers/
│   └── factoryLinkProvider.ts # Core link provider implementation
├── models/                   # Data models (if any)
├── parsers/                  # File parsing utilities (if any)
├── services/                 # Business logic services (if any)
├── utils/                    # Utility functions (if any)
└── test/
    ├── runTest.ts           # Test runner configuration
    └── suite/
        ├── index.ts         # Test suite setup
        └── extension.test.ts # Main test file

Development Workflow

1. Make Changes

Edit source files in the src/ directory using TypeScript.

2. Compile

Run npm run compile or use npm run watch for automatic compilation.

3. Test

Run npm run test to execute the test suite in a VSCode environment.

4. Debug

Use F5 in VSCode to launch the Extension Development Host for testing.

5. Code Quality

Run npm run lint to check for code quality issues.

Testing Environment

The extension uses VSCode's testing infrastructure:

  • Test Runner: @vscode/test-electron
  • Framework: Mocha with Sinon for mocking
  • Environment: Runs in actual VSCode instance for realistic testing
  • Coverage: Tests core functionality, configuration, and edge cases

Source: src/test/runTest.ts

Common Development Tasks

Adding New Features

  1. Implement in TypeScript in src/
  2. Add tests in src/test/suite/
  3. Update configuration in package.json if needed
  4. Run tests and lint checks

Debugging Issues

  1. Use console.log() or VSCode debugger
  2. Launch Extension Development Host (F5)
  3. Open VSCode Developer Tools (Help > Toggle Developer Tools)
  4. Check extension logs and errors

Updating Dependencies

npm update
npm audit

Next Steps

Once your development environment is set up: