0

I am working with react. First I had a component with state I created methods and all that. Now I want to convert it into stateless component. I have add the word function before each method name.

This is my file:

import React, { Component } from "react";

const Form = ({ sumbitBtn, onSubmit, inputs, id }) => {
   onSubmit() {
   }
   renderInputs() {
   }
   sendErrors(errors) {
   }
   return (
       ...
   );
};

Now I have tried to do it two ways but neither of them worked for me.

Using regular expression

I used the each of the following commands.

:%s/\w+\(\w*\)/function &/g
:%s/\w+\(\w*\)/function \0/g
:%s/(\w+\(\w*\))/function \1/g

But unfortunately the names of methods are showing rather its showing like function &, function \0.

Using macros

Another idea that came into my mind was that I could use a macro. Which have steps but I was stuck in one of the step which is finding the next method using regular expression and jumping to it.

My question is that how can we do this using both of the ways.

Note: the above file is just example file. The original file contains line breaks, comments between the methods.

Note: I am using the vim extension on vscode.

The result I want to get is

import React, { Component } from "react";

const Form = ({ sumbitBtn, onSubmit, inputs, id }) => {
   function onSubmit() {
   }
   function renderInputs() {
   }
   function sendErrors(errors) {
   }
   return (
       ...
   );
};
  • Can you verify version? Whether or not compatible is set? Im surprised & and \0 didnt work... – D. Ben Knoble Nov 29 at 20:43
  • 1
    I think this might explain why this isn't working for you: "I am using the vim extension on vscode". Unfortunately, I can't really tell how close to actual Vim the Vim extension in VS Code is, so not sure how much of Vim features it supports... Perhaps take a look into how native search/replace works in VS Code, to see whether that can work in your case or not... – filbranden Nov 29 at 21:46
  • 1
    @filbranden I completely missed that. Has to be the issue. – D. Ben Knoble Nov 30 at 2:27
  • 1
    Note that this question seems pretty off topic to me according to our help center – statox Nov 30 at 9:45
  • Seconded. Reminds me of questions asked about Intellij IdeaVim plugin. If such a vim standin is being used but the question only involves vim functionality, generically, it's kosher, otherwise off topic...is my recollection. – B Layer Dec 1 at 12:34
0

Note: I have tested the above process in vim(not it vscode extension). It didn't worked so the answer is for general vim.

Using Regular expressions

The solution to the first problem is to use "very magic" mode of regex. In very magic mode the characters except a-zA-Z0-9 and _ have a special meaning. You can enable very magic mode by putting \v in start of regex.

:%s/\v(\w+\(\w*\))/function \1/g
    ^^

If you don't want to put \v each time check out In vim, is there a way to set “very magic” permanently and globally?

Using macros

In the following steps you can record the macro.

  • press qm to start recording macro.
  • Go the start of the line using ^
  • Use i to enter insert mode and enter function
  • Go the normal mode.
  • Use /\v(\w+\(\w*\)) to search for next method.
  • Press n to go the next method. Press q to complete recording macro.

Go the first method and use n@m where n is total number of methods to which you want add function

New contributor
Maheer Ali is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.