How to write your own JS/TS codemods, with comments and resources

by React

simple-codemod-script

This is an example of how to write your own codemod scripts using babel and recast.

There are comments throughout the code explaining what’s happening, with links to resources.

To write codemods for your own codebase using the same patterns as this script, fork this repo, modify it to your needs, and add codemods to the codemods folder.

Usage

  • Clone the repo
  • Run npm install
  • Add codemods to the codemods folder (using react-to-star-import.ts as an example)
  • Optional: put the code you want to modify in the src folder
  • Run npm start with 1-2 command-line arguments:
    • First argument is the name of the codemod to run, as defined by its object key in codemods/index.ts. For example, react-to-star-import.
    • Second argument is optional, and is a glob string indicating which files to run the codemod against. It defaults to "./src/**/*.{js,jsx,ts,tsx}". If the code you want to codemod isn’t in the src folder, you may wish to specify a different glob; for instance, "/home/me/my-code/src/**/*.{js,jsx,ts,tsx}".

Tips

  • You can comment out the line in run-codemod.ts that calls fs.writeFileSync to test your codemod without affecting the files themselves; Before/After content will still be printed, but the input files won’t be modified.

Explanation of dependencies

  • @babel/core: Required peer dependency of babel packages.
  • @babel/parser: Package that can convert a string of JavaScript/TypeScript/Flow code into an Abstract Syntax Tree (AST).
  • @babel/types: Package containing AST Node builders and TypeScript types for AST Nodes.
  • @types/node: Package containing TypeScript types for node.js itself.
  • chalk: Provides functions for wrapping strings with control characters that makes them appear in different colors when they are printed to the terminal screen.
  • globby: Provides a function that resolves a glob string (eg “./*/.js”) into a list of files that match that glob string.
  • recast: Wraps an AST with getters/setters/proxies/etc so that it can keep track of mutations to the AST, and then re-print it later in such a way that the source formatting is unaffected except for in places where the AST was modified.
  • typescript: Type checker and autocomplete provider; installed to improve developer experience when writing codemod scripts in Visual Studio Code.
  • xode: Replacement for the node CLI that can parse (and ignore) TypeScript syntax. Acts as a stand-in for ts-node, because ts-node performs type checking prior to executing code, which can be annoying when running small scripts or interacting with the CLI.

License

MIT

GitHub

View Github