VSCode5 [VSC] VSCode : 파일 저장할 때 Prettier로 자동 정렬 적용 설정 방법 VSCode로 작업을 하면서 파일을 저장하면 자동으로 소스코드가 정해진 코딩 스타일로 정렬해 주는 Prettier는 거의 표준처럼 사용하게 되었습니다. 새로 개발 환경을 설정하면서 VSCode를 설치하고 마켓에서 확장프로그램을 받아서 설치하는데 그중에 Prettier도 기계적으로 설치하게 됩니다. 그런데 Prettier를 설치했는데도 파일을 저장할 때 코드가 자동 정렬되지 않는 현상이 발생했습니다. 설정을 해주면 동작하는데 자주 설정할 일이 없다 보니 자꾸 까먹게 되네요. 방법을 찾아서 정리해 둡니다. 1. Prettier 설치 소스 코드를 정해진 코딩 스타일과 일치하도록 자동으로 정렬하여 주는 프로그램인, 코드 포맷터(Code Formatter)로 수천만 명이 사용하고 있는 프로그램이 Prettier입.. 2023. 11. 30. [VSC] 선택영역 태그로 감싸기, 선택한 코드 Emmet 약어로 Wrap 하기 VSCode, Visual Studio Code로 HTML 코드를 작업하다 보면 코드 블록을 태그로 감싸야하는 경우가 종종 생깁니다. 일반 텍스트 문장 가운데 일부를 스타일을 변경하거나, 어떤 블록을 태그 등으로 묶어야 하는 경우가 있습니다. 비주얼 스튜디오 코드에서 Emmet을 설치한 경우 이 기능을 지원하고 있습니다만, 단축키가 꺼진 채로 설치가 됩니다. 단축키를 설정하고, 이 기능을 사용하면, 좀 더 편리하게 HTML을 편집할 수 있습니다. 1. 선택영역 태그로 감싸기( Emmet 약어로 래핑 ) 기능 확인 1.1 모든 명령어 보기 기능 확인 기능을 찾기 위해서 VSCode의 모든 명령어 보기 기능을 사용합니다. Ctrl + Shift + P 키를 누르면 확인할 수 있습니다. 1.2 블록 선택 선택.. 2022. 5. 12. [VSC] VSCode : HTML 자동 완성 만들기, HTML 사용자 코드 조각 추가 및 삭제 VSCode에서 HTML을 작성하면서 가장 만족하면서 사용하고 있는 기능 가운데 하나가 코드 자동완성 기능입니다. 타이핑 시에도 많은 도움을 주지만 시작하면서 기본적인 HTML 코드 블록을 만드는 것도 귀찮은 일 가운데 하나인데 기본 기능으로 지원하고 있습니다. 그런데 자동완성 기능 가운데서 기본 코드 입력 시 계속 수정을 해야 하는 부분이 있습니다. HTML 파일을 생성하고 처음 입력 시 ! 키를 누르고 Tab 키를 누르면, 위와 같은 HTML 자동 완성 내역을 볼 수 있습니다. 기본적인 요건은 만족하는데 매번 빨간색으로 표시한 한글 부분과 viewport 부분은 HTML 샘플 작성이나 연습에는 굳이 필요하지 않은 부분입니다. 그래서 사용자 정의 기능을 사용하여 lang="en"부분과 viewport .. 2022. 5. 10. [VSC] VSCode : 자동 줄바꿈 설정, Word Wrap VSCode, Visual Code Studio를 처음 설치하고 코딩을 하면 자동 줄 바꿈 설정이 되어 있지 않습니다. 일반적으로 사용하는 곳에서는 무리가 없지만, 좀 더 짧은 코딩 스타일을 유지하려고 하거나, HTML 편집에서 본문의 내용이 길게 입력되어 있는 경우 자동 줄 바꿈이 켜져 있지 않다면 소스를 보기 위해서 스크롤바를 많이 사용하게 되어 불편한 경우가 있습니다. 최근에 VSCode를 설치하고 사용해보니 평소에는 문제가 없다가 HTML을 쓰면서 눈에 띄어서 자동 줄바꿈 설정을 하는 방법을 찾아보게 되었습니다. 1. 자동 줄바꿈 설정 Word Wrap의 기본값은 Off입니다. 설정 화면에서 영문으로 Word Wrap 설정 부분을 찾아서 설정을 바꾸어주면 간단히 해결됩니다. Word Wrap 설정.. 2022. 5. 10. [VSC] VSCode : Live Server 127.0.0.1 페이지가 작동하지 않습니다. 오류, 인터넷 브라우저 설정, 한글 파일명과 Live Server VSCode, Visual Studio Code를 사용하면서 많은 확장팩을 사용하여 보다 편리하게 프로그래밍을 할 수 있습니다. 그중에서도 프런트엔드 작업에서 HTML 화면을 확인하기 위해서 Live Server를 사용하는데 설치 후 화면이 뜨지 않는 오류가 발생할 수 있습니다. Live Server 동작시 127.0.0.1 페이지가 작동하지 않습니다. ERR_EMPTY_RESPONSE 가 뜨는 경우가 있습니다. Live Server 설정에서 간단히 해결할 수 있습니다. 1. Live Server, 127.0.0.1 페이지가 작동하지 않습니다. VSCode에서 Live Server를 사용하려면 확장팩을 설치한 다음, 코드 작성 페이지에서 마우스 우측 버튼을 클릭하면 나오는 Open with Liver S.. 2022. 5. 9. 이전 1 다음
