Refactor Constructor Functions and Promises to ES6 with One Click in VS Code

Recursively Create Folders and Files in VS Code

VS Code Tips and Tricks

Whether you are having a hard time with catching up to classes or async await or maybe you have legacy code written with constructor functions and promises -- you can refactor them with just one-click away in your VS Code editor.

This feature is built in and if you are interested in powering up your VS Code refactor game, you can use this extension --> https://marketplace.visualstudio.com/items?itemName=cmstead.jsrefactor&WT.mc_id=egghead-screencast-chnwamba

https://app.egghead.io/api/v1/lessons/vs-code-refactor-constructor-functions-and-promises-to-es6-with-one-click-in-vs-code/subtitles

Instructor: [00:02] Assuming we have this constructor function named team which takes in a name parameter and assigns this parameter to a local variable. While I'm typing this local variable or assign a value to it, the team constructor name gets highlighted with [inaudible] . I will get to what that means in a minute.

[00:25] We can also have a count variable, which basically takes the value for team. We can also have a hire method which will actually call when we want to hire someone new to our team. This is basically going to take a parameter num, then returns an increment to this account with the value of num.

[00:51] The interesting thing is remember the team constructor name I told you about, if you click on this name, a yellow bulb will appear. If you click on this yellow bulb, you can convert this function to an ES 2015 class. Notice we now have a constructor and a higher method with the class named theme.

[01:10] We can also convert promises to async [inaudible] . If I have a function named fetch theme, which takes in the URL of the theme we want to fetch, of course, and the returns a call to a fetch method. In this case, returning a promise.

[01:29] This fetch method would take in the URL we want to fetch from, and then handle what happens when this promise resolves, which in this case, we just want to console.log the response. We can also handle what happens when an error occurs, which in this case we just want to console.error whatever went wrong.

[01:52] Once we have this function set up, you can do with it for the theme constructor function by clicking on the theme and clicking on the yellow bulb to convert to async function. Once you click on convert to async function, you can see we have a try and a catch block now, but the most important thing is that we have async and away.

Refactor Constructor Functions and Promises to ES6 with One Click in VS Code

Share this video with your friends

Course

VS Code Tips and Tricks