[TIL] vscode refactoring 쉽게 사용하는법

vscode refactor기능 쉽게 사용하는 법

한 번에 좋은 코드를 작성하긴 어렵다.

그래서 리펙터링을 해야 한다.

vscode에서 리펙터링을 안전하고 빠르게 도와주면

더 즐겁게 ..행복하게 리펙터링 할 수 있지 않을까?

위를 쉽게 해주는 2가지 팁을 공유한다.

1. 변수명 바꾸기 (F2)

vscode에서 쉽게 변수명을 바꾸는 방법이 있다.

1. 바꾸고 싶은 변수명을 드래그한다.

   

2. F2키를 누른다.

   

3. 원하는 변수명을 입력하고 변경한다.

   

최종

2. 전구 클릭하기! (전구 클릭으로 rafactor쉽게 키기)

vscode refactoring 단축키는 mac의 경우

shift + option + r OR cmd + .이다.

해당 단축키를 사용해도 좋지만.

드래그 후 노란 전구를 클릭하자!

• 다음 함수 안에 부분을 새로운 함수로 추출해 볼 것이다.

  

1. 추출하고 싶은 부분을 드래그하면 노란 전구가 생긴다.

   

2. 해당 전구를 누르면 refactor창이 뜬다.

   

   inner function으로 할 경우 foo 안에 함수가 생성된다.

   global scope로 할 경우 foo 밖에 함수가 생성된다.

   이번에 inner function으로 리펙터링 할 것이다.

3. inner function을 누르면 다음과 같이 newFunction으로 생성되고 함수가 추출되었다.

   

4. 해당 함수명 까지 깔끔하게 작성하면 끝이다.

   

   

5. 최종

   

결론

1. F2: 변수명을 쉽게 변경하는 방법

2. 드래그 + 노란전구클릭: refactor 창뜸
   1. cmd + . OR option + shift + r 도 가능하다.

좋은 코드를 한 번에 작성하기엔 실력이 부족하다.

지금은 여러 번 수정하며 작성해야만 하기에

IDE에서 제공해주는 refactor 기능을 활용해 리펙토링 속도를 올리면

조금이나마 더 나은 개발자가 되지 않을까 싶다.

TMI

위 글을 쓰면서 quick fix에 날개를 달아주는 extension을 발견했다.

https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster

다음에 기회가 되면 위에 관해서 글을 써보고싶다.

Reference

https://code.visualstudio.com/docs/editor/refactoring

Uploaded by N2T