궁금한 이야기 IT

 [VSCode] 설정 Emmet ! lang=en을 lang=ko 로 변경하기

🔥 VSCode에서 emmet을 이용해서 HTML 태그를 작성하면 시간을 많이 단축할 수 있습니다. 

🤔 그런데 ! emmet 으로 작업한 기본 코드 중 언어 속성이 lang="en"으로 설정되어 있어 매번 lang=ko 로 변경헤야 합니다.
📢  ! emmet 사용시 자동으로 lang=ko로 표시되도록 설정변경 방법을 정리해 보겠습니다. 

✔  !(느낌표) 입력후, Enter나 Tab 키를 누르면 HTML 기본 구조가 자동으로 완성됩니다. 

🤔  lang="en" 으로 설정되어 있어 매번 lang=ko 로 변경하는 것이 귀찮습니다. 

✔ Emmet 설정을 변경하기 위해서 설정 화면으로 이동합니다.
✔ 메뉴에서 파일 > 기본설정 > 설정, 단축키 Ctrl + ,( 컨트롤키 누른 상태에서 쉼표누르기

✔ 검색상자에 'emmet' 또는 'emmet: Variables' 를 입력합니다. 

✔ emmet: Variables 설정항목을 확인 후 항목추가를 누릅니다. 

✔ lang항목의 값을 en에서 -> kr로 수정후 확인 버튼을 누릅니다.

✔ 변경이 완료되면 다음과 같이 보여집니다.

✔ !(느낌표) 입력후, Enter나 Tab 키를 누르면 이제부터는 lang=ko로 설정이 됩니다.

끝.

※ korean Language Pack  - 영문 메뉴가 불편하다면 필수 

Visual Studio Code(이하 VS Code)를 한국어로 사용하려면, 한국어 언어 팩을 설치하여 인터페이스를 한글화할 수 있습니다.  설치후 재시작은 필수. 

※ Live Server  - 실시간으로 코드 수정내용을 확인하자 

Live Server 확장 기능을 사용하면 웹 개발 시 코드 변경 사항을 실시간으로 브라우저에서 확인할 수 있습니다.

※ Prettier - 뒤죽박죽 들여쓰기 한방에 정리하자 

Prettier는 Code Formatter로서, 작성된 코드를 일관된 스타일로 자동 정리해주는 도구입니다

※ Auto Rename Tag - 태그 변경을 간편하게~ 

HTML 및 XML 파일 작업 시, 시작 태그를 수정하면 자동으로 종료 태그도 함께 변경해 주는 확장 기능입니다.

※ HTML CSS Support - 작성된 CSS 선택자를 HTML에서 사용하자

CSS 에 사용된 선택자를 HTML에서 자동완성 해줍니다. ( css → html ) 

※ HTML to CSS autocompletion - HTML 선택자를 CSS에서 사용하자

HTML에 사용된 선택자를 CSS 에서 자동완성 해줌 (html → css) 

※ CSS Peek - HTML에서 CSS선택자로 바로 고고~

HTML에서 선택자를 Ctrl + 클릭하면 CSS 파일 해당 선택자로 이동합니다.

※ Htmltagwrap - 일부 내용을 태그로 감쌀때~

부모요소로 묶고 싶은 곳을 블록으로 지정하고 Alt + w 키 입력

※ Indent  rainbow - 들여쓰기를 보기 편하게~ 

들여쓰기 된 부분을 레인보우컬로로 하이라이트 표시해줘서 코드 읽을 때 가독성이 높여줍니다.