HTML의 확장기능, Beautify (Mac ver.)

HTML 코드를 작성하다 보면 들여쓰기, 내어쓰기가 통일이 되지 않아 코드가 지저분해 보이는 경우가 많습니다. 이럴 경우, 코드 하나하나 줄 정렬을 하다보면 굉장히 시간도 많이 잡아먹고 비효율적이게 됩니다. 그럴때 사용하는 확장 기능이 있습니다. Beautify를 이용하면 더 나은 코드 가독성을 위해 사용해보는 것도 나쁘지 않겠습니다.

 

Beautify 설치하기

1. Visual Studio Code를 열어줍니다.

2. 맨 우측 제일 마지막 아이콘을 누릅니다

3. 검색창에 beautify를 검색합니다.

4. 제일 상단에 뜨는 beautify를 클릭해줍니다.

5. 설치 버튼을 눌러 설치합니다.

이 확장팩을 설치하면 바로 사용할 수 없습니다. 사용하기 전에 기능을 하나 설정해 주어야 하는게 그 기능이 바로 단축키입니다.

6. Code -> Preference -> Keyboard Shortcuts로 갑니다.

들어가게 되면, 이렇게 사용할 수 있는 모든 단축키를 볼 수 있습니다.

7. 다시 beautify 페이지로 돌아갑니다.

Description란의 beautify file은 전체 코드를 일괄적으로 beautify의 문법으로 바꾸어줍니다. 이렇게 되면 세부적인 코드를 원하는대로 조작할 수 없기 때문에 beautify selection의 단축키만 지정하여 원하는 부분만 따로 코드정리 하는 것을 추천합니다.

8. Keyboard shortcuts 탭에 들어가 확장탭의 이름을 아래와 같이 검색해줍니다.

9. keybinding을 클릭하여 option, command, l(소문자 L) 을 단축키로 지정해줍니다.

 단축키는 위의 단축키를 사용해도 되고, 원하는 단축키가 따로 있으면 아무거나 사용해도 무방합니다.

 

끝입니다! 이제 코드에서 원하는 범위를 하이라이트 하여 단축키를 누르면 그 부분이 깔끔하게 정렬이 되는것을 보실 수 있겠습니다!

따라오느라 수고하셨습니다!