How do I debug jscodeshift transforms in VSCode?

Configure VSCode's launch.json with the provided debug setup, which uses jscodeshift's --dry and --print flags to run transforms without modifying files, allowing breakpoints and inspection in the IDE's debug console.

jscodeshift vs Babel plugin for code transformations?

jscodeshift is better for batch, file-based transformations across entire projects with its CLI and collection API, while Babel plugins are ideal for compile-time AST manipulation within a build pipeline. jscodeshift preserves formatting, whereas Babel focuses on output optimization.

How to write a jscodeshift transform for migrating to React hooks?

Start by using the jscodeshift API to find and replace class components with functional components, leveraging built-in methods like .find() for JSX elements. Reference example codemods from react-codemod for patterns and test with Jest utilities.

Can jscodeshift handle TypeScript decorators?

Yes, by setting the parser to 'ts' or 'tsx' and ensuring the transform accounts for TypeScript-specific AST nodes. However, complex decorator logic may require custom handling due to parser limitations.

How to ignore node_modules when running jscodeshift?

Use the --gitignore flag to automatically exclude files matching .gitignore patterns, or specify custom globs with --ignore-pattern for more control over ignored directories and files.

What's the difference between jscodeshift and recast?

jscodeshift is a wrapper around recast that adds a fluent, collection-based API for easier AST manipulation, while recast is a lower-level AST-to-AST transform tool focused on preserving code style. jscodeshift simplifies common tasks but depends on recast for parsing and printing.

jscodeshift — JavaScript/TypeScript Codemod Toolkit

What is jscodeshift?

jscodeshift is a toolkit for running codemods (code modification scripts) across multiple JavaScript or TypeScript files. It provides a CLI runner and a JavaScript API to apply transformations, making large-scale codebase refactoring and upgrades efficient and consistent.

Target Audience

JavaScript and TypeScript developers, library maintainers, and teams needing to perform automated, consistent code transformations across entire projects or codebases.

Value Proposition

Developers choose jscodeshift for its jQuery-like API for AST manipulation, which simplifies writing complex codemods, and its ability to preserve original code formatting while supporting multiple parsers like Babel, Flow, and TypeScript.

A JavaScript codemod toolkit.

Use Cases

Best For

Automated large-scale codebase refactoring, such as updating React APIs across a project.
Upgrading JavaScript syntax to newer ECMAScript versions consistently across many files.
Applying custom code style or linting fixes programmatically across a codebase.
Migrating code from one library or framework to another (e.g., replacing deprecated APIs).
Writing and unit testing codemods with Jest integration and snapshot testing.
Transforming code while preserving original formatting and comments using recast.

Not Ideal For

Projects requiring real-time or interactive code changes with manual review
Codebases in languages other than JavaScript or TypeScript
Quick, one-off edits where writing a full codemod script outweighs the benefit
Teams lacking AST manipulation experience who need simpler tools like regex search-and-replace

Pros & Cons

Pros

Fluent AST API

Offers a jQuery-like interface for navigating and modifying ASTs, making complex transformations more readable and maintainable, as shown in the example using .findVariableDeclarators().

Preserves Code Style

Uses recast under the hood to retain original formatting and comments during transformations, reducing noise in diffs and maintaining code consistency.

Multi-Parser Support

Supports Babel, Flow, TypeScript, and custom parsers, allowing it to handle diverse codebases and modern JavaScript features seamlessly.

Built-in Testing Utilities

Includes helpers like defineTest and defineInlineTest for unit testing transforms with Jest and snapshot testing, streamlining the development of reliable codemods.

Cons

Steep Learning Curve

Requires deep understanding of ASTs and the jscodeshift API, which can be a barrier for developers unfamiliar with abstract syntax trees or complex code manipulation.

Limited Language Support

Only works with JavaScript and TypeScript files, making it unsuitable for projects with mixed or non-JS codebases without additional tooling.

Debugging Complexity

Debugging transforms can be challenging, especially with asynchronous issues or intricate AST changes, though the README provides VSCode setup guidance.

Frequently Asked Questions

What is jscodeshift?

Target Audience

JavaScript and TypeScript developers, library maintainers, and teams needing to perform automated, consistent code transformations across entire projects or codebases.

Value Proposition

Use Cases

Best For

Automated large-scale codebase refactoring, such as updating React APIs across a project.
Upgrading JavaScript syntax to newer ECMAScript versions consistently across many files.
Applying custom code style or linting fixes programmatically across a codebase.
Migrating code from one library or framework to another (e.g., replacing deprecated APIs).
Writing and unit testing codemods with Jest integration and snapshot testing.
Transforming code while preserving original formatting and comments using recast.

Not Ideal For

Projects requiring real-time or interactive code changes with manual review
Codebases in languages other than JavaScript or TypeScript
Quick, one-off edits where writing a full codemod script outweighs the benefit
Teams lacking AST manipulation experience who need simpler tools like regex search-and-replace

Pros & Cons

Pros

Fluent AST API

Offers a jQuery-like interface for navigating and modifying ASTs, making complex transformations more readable and maintainable, as shown in the example using .findVariableDeclarators().

Preserves Code Style

Uses recast under the hood to retain original formatting and comments during transformations, reducing noise in diffs and maintaining code consistency.

Multi-Parser Support

Supports Babel, Flow, TypeScript, and custom parsers, allowing it to handle diverse codebases and modern JavaScript features seamlessly.

Built-in Testing Utilities

Includes helpers like defineTest and defineInlineTest for unit testing transforms with Jest and snapshot testing, streamlining the development of reliable codemods.

Cons

Steep Learning Curve

Requires deep understanding of ASTs and the jscodeshift API, which can be a barrier for developers unfamiliar with abstract syntax trees or complex code manipulation.

Limited Language Support

Only works with JavaScript and TypeScript files, making it unsuitable for projects with mixed or non-JS codebases without additional tooling.

Debugging Complexity

Debugging transforms can be challenging, especially with asynchronous issues or intricate AST changes, though the README provides VSCode setup guidance.

Frequently Asked Questions

jscodeshift

What is jscodeshift?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

jscodeshift

What is jscodeshift?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?