How to add a certain word before the names of methods in Javascript?

Question

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 (
       ...
   );
};

Answer 1

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