[VSCode] ⚡쉽고 빠르게 코드를 작성하게 해 주는 편리한 기능 6가지

안녕하세요? 오늘은 VScode에서 효과적으로 코드를 작성할 수 있게 도와주는 유용한 기능 여섯가지를 소개해 드릴게요.

 

 VSCode를 편리하게 사용하려면 Extension(익스텐션)을 다운받아주셔야 해요. 익스텐션은 VSCode에서 제공하는 확장프로그램으로 개발 편의를 위해 기능을 확장해 새로운 기능을 추가하는 역할을 해줘요.

 

Visual Studio Code(VSCode) 익스텐션은 VSCode 편집기를 더욱 강력하게 확장하는 소프트웨어 모듈입니다. 여기에는 편집기의 핵심 기능을 확장하거나 사용자 인터페이스를 향상시키는 것과 같은 다양한 작업을 수행하는 익스텐션이 포함되어있습니다.이러한 익스텐션들은 사용자들이 개발 환경을 더욱 효과적으로 사용할 수 있도록 도와주며, 다양한 개발자들의 요구에 맞춰져 있습니다. VSCode는 이러한 확장성과 유연성을 통해 많은 개발자들에게 인기를 얻고 있습니다.

 

익스텐션은 vscode 화면 왼쪽 바에서 하단에 있는 네모 네 개가 그려진 블럭 모양의 아이콘을 클릭 해 주시면 다운받으실 수 있어요. 

 

 

 

 

✅ Live Server 익스텐션과 "Alt + L + O "로  작업 결과물 실시간으로 확인하기

 

 

VScode 익스텐션인 라이브브 서버는 웹 개발을 할 때 로컬 개발 환경에서 브라우저에 실시간으로 웹 페이지를 업데이트하여 보여주는 도구입니다. 코드를 수정할 때마다 브라우저를 새로고침하지 않고도 변경 사항을 확인할 수 있어 개발 효율성을 높여줘요. 작업도중 Ctrl+S 로 현재 작업상황을 저장하고 " ALT + L + O "를 누르면 웹 브라우저에서 결과물을 실시간으로 확인해 볼 수 있습니다.

 

 

 

✅ Live Preview로 VSCode 작업하며 실시간 작업 내용 확인하기

 

이 익스텐션은 Alt + L + O를 누르지 않아도 VSCode 내부에서 자체적으로 미니 창을 띄워 현재 작업중인 내용이 웹브라우저에서 어떻게 보이는지 실시간으로 확인할 수 있게 해줍니다.

 

 

vscode내부에서 Document라는 새로운  창을 띄워  현재 작업 결과물을 실시간으로 보여줍니다. 작업창 오른쪽의 스크롤바와 Document창의 경계선 부분을 드래그하면 Document창 의 크기를 조절할 수도 있습니다. 

 

 

 

✅ VSCode 개발 환경 한국어로 설정하기

 

Korean Language Pack for Visual Studio Code 익스텐션을 다운로드 해 주시고 화면 우측 하단의 알림창에서 Change Language and Restart 를 클릭해 주세요.

 

 

VSCode를 재시작하면 한국어 설정이 완료된 것을 확인하실 수 있어요.

 

 

 

 

✅ 클래스 이름 붙은 태그 쉽게 작성하기

 태그명.클래스명 (예:h2.logo) 

 태그명#아이디명 (예:div#header) 

태그명.클래스명을 입력하면 아래와 같이 div.header이라는 창이 뜨는데요. Enter키를 눌러 클릭해주시면 header이라는 클래스가 추가된 div태그가 자동으로 작성이 됩니다. 클래스 뿐만이 아니라, 태그에 아이디를 달아주는 것도 가능합니다. 태그명.아이디명을 해 주시면 아이디가 붙은 태그가 완성됩니다. 쉽죠.

 

 

 

✅ 문자열 블록 씌우지 않고 한 줄 전체 복사하기

 줄 끝에 커서 + Ctrl C + Enter + Ctrl V 

 

vscode에서는 해당 줄에 블록을 씌우지 않고 복사하는 것이 가능합니다. 복사하고자 하는 해당 줄 끝에 마우스 커서를 놓고 Ctrl + C 를 누른 뒤, Enter를 하고 Ctrl + V를 해 보세요. 순식간에 여러줄을 붙여넣기 할 수 있습니다.

 

 

 

 

✅ 다중커서 - 여러 줄 동시에 입력하기

 Shift + Alt  + 마우스 드래그 

 

여러 줄이 동시에선택 되며, 한 번에 같은 글자를 여러줄 타이핑할 수 있습니다.

짤 출처 https://hianna.tistory.com/358