mikaelbr / vscodemod Goto Github PK
View Code? Open in Web Editor NEWVSCode extension for doing codemod on selected text
VSCode extension for doing codemod on selected text
Would be great to have something like a preview of the transformation before you actually do it. For instance as a popup similar to the "find all references" preview. This would be handy in cases where you run large modifications.
Hey @mikaelbr!
I tried to find this on the VSCode extension marketplace to no avail. Is it not on there yet?
Thanks,
Olly
For the time being, this project is accumulating code transformations. When we have enough and stable enough codemods, the project can be published. If you have some manual transformations you often do while programming, it might belong as a automatic codemod in this project! Try coding a transformation and submit it as a pull request!
You cna use jscodeshift to write transformations. Check out this repo for a super quick intro. Or the jscodeshift repo for documentation. ASTExplorer.net is a great tool to use while writing transformations. Check it out.
Add some sort of infrastructure for running tests on codemods. Maybe Jests snapshot tests would be a good fit here. It isn't as good when writing transformations, but works great to illustrate before and after, also preventing regression errors. Which can be likely with these types of codemods.
I'm in the process of switching from Atom to VSCode. I had a bunch of custom codemods at my disposal in Atom that I'm planning to get working in VSCode, for instance: https://github.com/jedwards1211/material-ui-codemorphs
For convenience, my addStyles
codemod in that package doesn't require the user to select the component to be modified; instead it can just determine which component contains the cursor position by using my https://github.com/jedwards1211/jscodeshift-paths-in-range package.
Furthermore, it wouldn't be sufficient for addStyles
to transform only the selected code, because it also has to add import statements to the top of the file, and potentially rename some identifiers. But it has to know the cursor position/selection to determine which component to modify.
My own codemods for adding block statements to arrow functions also worked this way; it's a lot less hassle to just put the cursor inside the function than selecting the whole thing.
I was planning on making an extension for running codemods, then I found your extension. This wouldn't currently satisfy my needs, but I figured I would talk to you about this before making my own extension. Basically it would have to pass the selection range (or cursor position) to the transform via the options
argument. This will make it possible to do more complex transforms in the future than just operating on selected code.
Something like this:
function transform(file, api, options) {
const j = api.jscodeshift;
const printOptions = options.printOptions || { quote: 'single' };
const root = j(file.source);
function createFunctionExpression (fn) {
return j.arrowFunctionExpression(fn.params, j.blockStatement([j.returnStatement(fn.body)]));
};
const replacedCallbacks =
root
.find(j.ArrowFunctionExpression)
.filter(path => path.value.body.type !== "BlockStatement" )
.forEach(path => j(path).replaceWith(createFunctionExpression(path.value)))
.size() > 0;
return replacedCallbacks ? root.toSource(printOptions) : null;
}
Add option "Add codemod" to extention, which opens a directory where users can add custom javascript files with codemods, similar to the codemods
directory in this project.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.