VSCode를 사용하기에 앞서 사용하면 편리한 확장 기능들을 설정해보려 합니다.
윈도우 기준이므로 맥과는 다른 부분이 있을 수 있습니다.
확장 기능은 아래 화면의 가장 아래 버튼인 Extension에서 설치를 통해 설정할 수 있습니다.
1. 한국어 확장 팩 for VSCode
우선 저는 영어를 잘하지만 필요한 분들이 있을 수 있으니 알려드리는 VSCode 한국어 확장 팩입니다!
설치를 진행하고 VSCode를 재시작하게 되면 한국어가 지원됨을 확인할 수 있습니다.
2. Beautify
이름만 봐도 알 수 있듯이 예뻐질 수 있는 기능입니다.
어지럽게 작성된 코드를 Beautify 기능을 통해 예쁘게 만들어 주기 때문에 가독성을 높일 수 있습니다.
위와 같은 화면에서 설치을 진행하고~
설정을 위해 VSCode 상단의 파일 -> 기본 설정 -> 바로 가기 키를 선택합니다!
그리고 Beautify를 검색해서 Beautify selection을 선택합니다!
키 바인딩을 눌러서 원하는 키로 설정합니다. (Ctrl + Alt + L)을 추천합니다^ㅇ^
바인딩을 마치고 사용을 한 번 해보겠습니다.
위처럼 안 예쁜 코드가 있을 때 예쁘게 만들어줄 부분을 선택하여~
바인딩했던 키를 누르면~
예쁘게 다듬어진 코드를 확인할 수 있습니다^^
3. Live Server
Live Server는 실시간 미리보기 같은 기능입니다!
코드를 작성하고 로컬에서 확인이 가능하기 때문에 잘만 쓰면 유용하게 사용할 수 있습니다!
위 화면에서 Live
설치가 끝나면 위와 같이 두가지 방법을 통해 Live Server을 활용할 수 있습니다!
1번 방법의 경우에 우측 하단의 Go Live 버튼을 클릭하여 실행할 수 있고,
2번 방법의 경우는 우클릭 -> Open with Live Server 를 통해 실행할 수 있습니다!
실행하게 되면 위와 같은 화면을 통해 작성한 코드를 실시간으로 미리보기 할 수 있습니다!
실행하게 되면 Go Live 버튼이 Port: 5500으로 바뀌게 되는데, 확인이 끝난 후 종료할 때 버튼을 클릭하여 종료할 수 있습니다!
이번 포스팅에서는 VSCode와 같이 사용하면 편리한 확장 기능들에 대해 알아보았습니다.
굳이 사용해야 하는 것은 아니지만, 사용하면 편리하고 삶의 질이 높아지기 때문에 유익한 것 같습니다.
다른 좋은 확장 기능들이 있다면 댓글로 공유하면 좋을 거 같습니다^ㅇ^
'Study > Front' 카테고리의 다른 글
| [Vue.js] Vue Router 설정 (0) | 2021.11.15 |
|---|---|
| [Vue.js] Vue CLI로 Vue 프로젝트 생성하기 (0) | 2021.11.14 |
| VSCode 단축키 (0) | 2021.03.02 |