mikaelbr / vscodemod Goto Github PK

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!

How?

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.