jscodeshift-typescript-example

• TypeScript all the way 🚀
• TypeScript transformer
• Use /jscodeshift SKILL to create your codemod 🤖
• Installation
• Run a codemod
• Test
• Test and Debug with Vitest
• Behind the scenes
• Resources & Inspiration
• Awesome lists

TypeScript all the way 🚀

Example usage of jscodeshift for TypeScript with TypeScript:

• TypeScript target files *.ts
• TypeScript transformer
• TypeScript test files
• TypeScript fixtures

TypeScript transformer

Strongly typed code and code completion with @types/jscodeshift

Use /jscodeshift SKILL to create your codemod 🤖

Start in Plan Mode and use example prompt to create a new transform with tests:

/jscodeshift

Create new codemod to migrate lodash imports to use deep imports

before:
```ts
import { pluck } from 'lodash';
```

after:
```ts
import pluck from 'lodash/pluck';
```

Installation

npm i

Run a codemod

npx jscodeshift -t ./src/simple-rename.ts --extensions=ts --parser=ts **/*.ts --print --dry

Omit --dry to write the transformed source back to disk.

Test

npm test

Test and Debug with Vitest

Install the Vitest VSCode extension to test and debug your transformer.

Behind the scenes

Use @typescript-eslint/parser in https://astexplorer.net when working with the jscodeshift's parser="ts"

By default jscodeshift will use the babel parser (@babel/parser)

Resources & Inspiration

• https://github.com/facebook/jscodeshift/tree/master/sample
• https://github.com/facebook/jscodeshift/blob/master/recipes/retain-first-comment.md
• https://github.com/elliottsj/jscodeshift-typescript-example
• https://astexplorer.net

Awesome lists

• https://github.com/rajasegar/awesome-codemods
• https://github.com/sejoker/awesome-jscodeshift