Simple codemod example with jscodeshift
jscodeshift
codemods allow refactoring JavaScript or TypeScript code by manipulating the abstract syntax tree.
This is an example showing how to rename variables named foo
to bar
.
Install jscodeshift¶
npm install -g jscodeshift
Create an example file to modify¶
create a folder
mkdir my-project cd my-project
create an example file,
my-file-to-modify.js
const foo = 1; console.log(foo);
Create a transform¶
create a file my-transform.js
module.exports = function transformer(fileInfo, api) {
return api
.jscodeshift(fileInfo.source)
.find(api.jscodeshift.Identifier)
.forEach(function (path) {
if (path.value.name === "foo") {
api.jscodeshift(path).replaceWith(api.jscodeshift.identifier("bar"));
}
})
.toSource();
};
Run it¶
jscodeshift -t my-transform.js ./my-file-to-modify.js
The file my-file-to-modify.js
now contains:
const bar = 1;
console.log(bar);
Another example¶
This example removes the React JSX element <MyHeader />
and removes the MyHeader
import. I'm not sure why, but it added some extra parentheses. Prettier cleaned this up for me, but if you have an improvement, let me know.
// removeMyHeader.js
module.exports = function transformer(file, api) {
const jscodeshift = api.jscodeshift;
const withoutElement = jscodeshift(file.source)
.find(jscodeshift.JSXElement)
.forEach(function (path) {
if (path.value.openingElement.name.name === "MyHeader") {
path.prune();
}
})
.toSource();
const withoutImport = jscodeshift(withoutElement)
.find(jscodeshift.ImportDefaultSpecifier)
.forEach(function (path) {
if (path.value.local.name === "MyHeader") {
path.parentPath.parentPath.prune();
}
})
.toSource();
return withoutImport;
};
Here is a command to run it for a React TypeScript codebase:
jscodeshift --parser=tsx --extensions=tsx -t ./removeMyHeader.js ./src
AST Explorer¶
AST Explorer is a very helpful tool to experiment and learn the API with code completion. Go to https://astexplorer.net/ and select "jscodeshift" under the "Transform" menu.
lodash error¶
Error: Cannot find module 'lodash'
When running jscodeshift
, I got the above error so I ran npm install -g lodash
and this got rid of the error for me.
Related posts
- Aphrodite to CSS Modules codemod — posted 2022-12-09
- Buildtime vs runtime environment variables with Next.js and Docker — posted 2021-04-13
- Next.js GitLab CI/CD Docker multi-stage example — posted 2021-04-06
- Next.js Cypress GitLab CI example — posted 2021-03-25
- Example Next.js GitLab CI/CD Amazon ECR and ECS deploy pipeline — posted 2021-03-25