jscodeshift-typescript-example

• TypeScript all the way 🚀
• TypeScript transformer
• Vibe Code Your jscodeshift Codemod 🤖
• Installation
• Run a codemod
• Test
• Debug
• 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

Vibe Code Your jscodeshift Codemod 🤖

With .github/copilot-instructions.md and .github/prompts/new-transformer.prompt.md you can vibe code your jscodeshift codemod.

Example prompt to create a new transform with tests:

Create a new transform to add a post-fix "funny" to class name

before:
```ts
class Foo {}
```

after:
```ts
class FooFunny {}
```

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

Debug

Use the pre-configured VSCode launcher to run tests 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