jscodeshift-codemods

Apply AST-based codemods with jscodeshift for React and TypeScript refactoring.

5|Updated Mar 16, 2019

Search Tags:#typescript #refactoring #codemods #ast #jscodeshift

Ready to run

npx skills add https://github.com/third774/dotfiles --skill jscodeshift-codemods

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: jscodeshift-codemods
Source: https://github.com/third774/dotfiles/tree/main/opencode/skill/jscodeshift-codemods
Command: npx skills add https://github.com/third774/dotfiles --skill jscodeshift-codemods

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill teaches how to write and debug AST-based codemods using jscodeshift to automate migrations, standardize patterns, remove deprecations, and perform large-scale refactors across codebases.

Core Features & Use Cases

Codemod Workflow: IDE-friendly guidance from pattern identification to edge-case handling.
Test-First Approach: Always start with failing tests before implementing transformations.
Scale & Reuse: Structure codemods for reuse across projects (project layout: codemods/, tests/, testfixtures/).
Import & AST Manipulation: Techniques for renaming imports, transforming function calls, and updating type params.
Edge Case Handling: Idempotency, missing dependencies, and safe removal.

Quick Start

Use via jscodeshift:

npx jscodeshift -t codemods/jscodeshift-codemods.ts [target] --parser=tsx --extensions=ts,tsx,js,jsx

Frequently Asked Questions about jscodeshift-codemods

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I automate large-scale code refactors across my TypeScript and React projects?▼

Large-scale code refactors use AST-based codemods with jscodeshift to transform thousands of files consistently. jscodeshift parses your code into an abstract syntax tree, applies surgical edits via visitor patterns, and reprints deterministically, enabling API migrations, pattern standardization, and deprecation removal without manual file-by-file changes.

What's the difference between writing codemods and manual refactoring?▼

Codemods automate transformations across entire codebases idempotently and deterministically, whereas manual refactoring scales poorly and introduces inconsistencies. AST-driven codemods handle edge cases, preserve formatting via recast, and remain reusable across projects, making them essential for migrations affecting hundreds or thousands of files.

How do I structure a codemod project to handle edge cases and ensure idempotency?▼

Codemod projects follow a standard layout: codemods/ for transformation logic, __tests__/ for test files, and __testfixtures__/ for input/output examples. Test-driven development ensures idempotency and edge-case handling before deployment. This structure supports reuse, debuggability, and confidence in large-scale transformations.

Can I use codemods to handle complex transformations like renaming imports and updating type parameters?▼

Yes. jscodeshift codemods support import renaming, function call transformations, type parameter updates, and safe removal of deprecated patterns. AST manipulation techniques target specific node types, and deterministic printing via recast preserves code style, enabling complex transformations across React and TypeScript codebases.

What do I need to know before running a codemod on my codebase?▼

Ensure your project is version-controlled before executing codemods. Test codemods on a subset of files first using jscodeshift's --dry flag. Verify idempotency by running the transform twice—it should produce identical output. Handle missing dependencies and edge cases in your codemod logic to prevent partial failures across thousands of files.