1
00:00:00,330 --> 00:00:04,540
Refactoring your code is part of normal code maintenance.

2
00:00:04,540 --> 00:00:08,939
Visual Studio Code makes it easy for you to continuously refactor

3
00:00:08,939 --> 00:00:13,63
and improve your code by taking advantage of the capabilities

4
00:00:13,63 --> 00:00:15,743
included in different language services.

5
00:00:15,743 --> 00:00:19,848
The particular refactoring supported will vary based on your

6
00:00:19,848 --> 00:00:23,326
programming language and the extension you install.

7
00:00:23,326 --> 00:00:27,693
I'm going to demonstrate a few of the possible options

8
00:00:27,693 --> 00:00:29,94
using JavaScript.

9
00:00:29,94 --> 00:00:32,772
Inside this file, I've developed a very basic

10
00:00:32,772 --> 00:00:37,35
implementation for the ShowDiscountOffer function.

11
00:00:37,35 --> 00:00:40,285
It declares a variable to store a discount,

12
00:00:40,285 --> 00:00:44,570
it then retrieves the vacation cost from an element on the web

13
00:00:44,570 --> 00:00:47,240
page and multiplies it by the discount.

14
00:00:47,240 --> 00:00:51,215
The resulting value is then shown in an element on the page.

15
00:00:51,215 --> 00:00:55,809
Let's refactor this code just a bit using some of the features

16
00:00:55,809 --> 00:00:57,391
available in VS Code.

17
00:00:57,391 --> 00:01:01,910
I'll first select the line that declares a new variable

18
00:01:01,910 --> 00:01:03,333
for the discount.

19
00:01:03,333 --> 00:01:08,43
Let's imagine I want to use this value elsewhere in this file.

20
00:01:08,43 --> 00:01:11,566
With the code selected, a little light bulb appears

21
00:01:11,566 --> 00:01:15,301
just to the left of it, letting me know there are code

22
00:01:15,301 --> 00:01:17,697
actions I can perform on this code.

23
00:01:17,697 --> 00:01:21,980
I'll click on the "Light bulb" to view them.

24
00:01:21,980 --> 00:01:26,959
The pop up menu shows me several possible refactorings. Because I

25
00:01:26,959 --> 00:01:30,436
want to use this value elsewhere in the file,

26
00:01:30,436 --> 00:01:36,180
I'm going to select "Extract to constant in global scope."

27
00:01:36,180 --> 00:01:40,624
I'm immediately prompted for a name for the new constant.

28
00:01:40,624 --> 00:01:46,130
I'll name it discountPercentage.

29
00:01:46,130 --> 00:01:49,870
You can see the new constant declaration is added just

30
00:01:49,870 --> 00:01:53,468
above the function, and the code inside the function

31
00:01:53,468 --> 00:01:56,855
assigns the value of the constant to my variable.

32
00:01:56,855 --> 00:02:00,827
You can also extract bits of code into their own function.

33
00:02:00,827 --> 00:02:04,961
I want to move the calculation that multiplies cost times the

34
00:02:04,961 --> 00:02:07,786
current discount into a separate function.

35
00:02:07,786 --> 00:02:13,350
After selecting the calculation, I'll again click the code action

36
00:02:13,350 --> 00:02:15,349
light bulb on the left.

37
00:02:15,349 --> 00:02:23,203
This time I'll select "Extract to function in global scope."

38
00:02:23,203 --> 00:02:32,255
I'm prompted for a function name, I'll call it calculateDiscount.

39
00:02:32,255 --> 00:02:36,861
You can see the new function was created below in my previous

40
00:02:36,861 --> 00:02:41,390
calculation has been replaced by a call to the new function.

41
00:02:41,390 --> 00:02:45,673
Probably, the most common type of refactoring is to change the name

42
00:02:45,673 --> 00:02:47,320
of a symbol in your code.

43
00:02:47,320 --> 00:02:51,54
This could be a variable name, class name, function name,

44
00:02:51,54 --> 00:02:52,917
anything like that.

45
00:02:52,917 --> 00:02:56,373
VS Code makes updating names very easy.

46
00:02:56,373 --> 00:03:00,490
I'll rename the discount variable inside my function.

47
00:03:00,490 --> 00:03:04,552
I just select it and press "F2" on my keyboard.

48
00:03:04,552 --> 00:03:08,219
That presents me with a box where I can type the new name

49
00:03:08,219 --> 00:03:09,136
I want to use.

50
00:03:09,136 --> 00:03:13,25
Notice that I'm using this variable at the end of the line

51
00:03:13,25 --> 00:03:14,935
of code just below this one.

52
00:03:14,935 --> 00:03:21,714
I'll change the name to customerDiscount.

53
00:03:21,714 --> 00:03:25,918
As soon as I press "Enter," the name of the variable and all

54
00:03:25,918 --> 00:03:29,310
references to it are updated with the new name.

55
00:03:29,310 --> 00:03:33,220
Support for code refactoring is one small way

56
00:03:33,220 --> 00:03:36,802
VS Code encourages you to write apps that are easy to

57
00:03:36,802 --> 00:03:38,111
maintain over time.

58
00:03:38,111 --> 00:03:42,615
You should definitely investigate and take advantage of the specific

59
00:03:42,615 --> 00:03:45,707
refactoring supported in the languages you use.

60
00:03:45,707 --> 00:03:50,72
The other developers on your team and maybe even you in the future

61
00:03:50,72 --> 00:03:52,00
will appreciate that you did.