🗒️ 비주얼 스튜디오 코드 (9)

1. 2023.07.10 [VS Code] VS Code 에디터 안에 라이브 서버(Live Server)를 넣는 방법

   VS Code 에디터 안에 Live Server를 넣는 방법 들어가며 VS Code에서 HTML 코드를 작성할 때, Liver Server를 통해 확인하면서 보는 경우가 있다. 코드의 실행 결과가 새로운 웹 브라우저의 창에 기본적으로 열리게 되는데, 웹 브라우저 창과 VS Code 프로그램에서 번갈아 움직이면서 작업하기가 불편한 경우가 발생한다. 이럴 때, VS Code 안에 라이브 서버(Live Server)를 넣는 방법이 있다. 방법 HTML 소스 코드에 마우스 커서를 올린 후 [마우스 오른쪽 버튼] > [Open with Live Server] 항목을 클릭한다. 코드의 실행 결과가 새로운 웹 브라우저 창에 열리는데, 해당 웹 브라우저 창의 주소(URL)을 복사한다. VS Code에서 [Ctrl] +..
2. 2023.05.16 [VS Code] 비주얼 스튜디오 코드 다크/라이트 모드 자동 전환 기능 켜는 방법 (Auto Detect Color Scheme)

   비주얼 스튜디오 코드 다크/라이트 모드 자동 전환 기능 켜는 방법(Auto Detect Color Scheme) 들어가며 비주얼 스튜디오 코드(VS Code)를 사용할 때, 시스템의 모드(라이트/다크)에 따라 테마가 바뀌도록 설정해보자. 보통 대부분의 프로그램은 이 기능(Auto Theme Sync)을 지원한다. 몇몇 VS Code는 자동으로 이 기능이 켜져 있을 수도 있으나, 몇몇 VS Code는 이 기능이 자동으로 설정되어 있지 않아서 이 기능을 쓰려면 따로 설정해줘야 한다. 방법 VS Code 상단의 @[File]@ 메뉴 → @[Preference]@ → @[Settings]@ 순으로 들어간다. (혹은 단축키 @[Ctrl]@ + @[,]@를 누른다.) @[Settings]@ 페이지의 상단 검색창에 ..
3. 2023.02.06 [VS Code] 비주얼 스튜디오 코드 표시 언어 변경 방법

   비주얼 스튜디오 코드 표시 언어 변경 방법 들어가며 비주얼 스튜디오 코드 프로그램의 언어를 변경하는 방법을 알아보자. 방법 [Command]([Ctrl]) + [Shift] + [P] 버튼을 누르면 모든 명령 표시 창이 뜨는데, '표시 언어 구성(Configure Display Language)'을 선택한다. 언어를 설정한다. (영어 : @en@, 한국어 : @ko@)
4. 2022.11.09 [VS Code] 비주얼 스튜디오 코드 에러 메시지 출력시키는 방법

   비주얼 스튜디오 코드 에러 메시지 출력시키는 방법 들어가며 비주얼 스튜디오 코드(Visual Studio Code)를 사용하다가 간혹 실수로 코드 에러 표시(빨간 밑줄) 기능을 끌 경우가 있다. 이렇게 코드에 에러가 있는지 표시해주는 기능을 errorSquiggles 라고 한다. 그런데 다시 에러 표시가 나타나도록 하려면 방법을 찾기 쉽지 않다. 다음과 같이 간단하게 이 기능을 켜줄 수 있다. 방법 비주얼 스튜디오 코드 프로그램 내부에서 [Ctrl] + [P] 단축키를 누르고, "settings.json" 을 검색하여 진입한다. 에러 메시지 표시 기능을 껐다면, 다음과 같이 기능이 disabled 되어있을 것이다. 이 문장을 지워주고 저장해준다.
5. 2022.09.10 [VS Code] 자동 줄바꿈 기능(Word Wrap) 켜는 방법

   자동 줄바꿈 기능(Word Wrap) 켜는 방법 들어가며 비주얼 스튜디오 코드를 사용하면서 글자들이 창의 크기를 넘어설 경우 자동 줄 바꿈(Word Wrap; Line Break)하는 방법을 알아보자. 방법 ① 설정 창 들어가기 상단의 [File] 탭 → [Preferences] → [Settings] 로 이동하여 설정 창에 진입한다. (또는 단축키 [Ctrl] + [,]) ② Word Wrap 검색 및 설정해주기 설정 검색 창에 "Word Wrap"을 입력해준 후, 설정을 on으로 변경해준다. ③ 자동 줄바꿈 기능 적용 확인하기 성공적으로 적용이 되었는지 확인해본다.
6. 2022.06.24 [GitHub] 깃허브(GitHub)와 비주얼 스튜디오 코드(Visual Studio Code) 연동하기

   깃허브(GitHub)와 비주얼 스튜디오 코드(Visual Studio Code) 연동하기 들어가며 다음과 같이 간단하게 비주얼 스튜디오 코드(Visual Studio Code)와 깃허브(GitHub)를 연동할 수 있다. 연동하기 전, Git 프로그램이 설치되어 있어야 한다. 방법 설정 ① 비주얼 스튜디오 코드(Visual Studio Code) 프로그램 실행 후, [F1] 버튼을 누른다. ② "git clone"을 검색한다. ③ 연동할 깃 레포지토리(Git Repository)를 선택한다. ④ 연동할 로컬 저장소를 선택한다. ⑤ .git 디렉터리가 생성되며 연동이 된다. 연동 확인 git remote -v 명령을 입력하면, 연동이 되었는지 확인할 수 있다. > git remote -v
7. 2021.06.22 [Git] Git 연동 오류 : Make sure you configure your 'user.name' and 'user.email' in git.

   Git 연동 오류 : Make sure you configure your 'user.name' and 'user.email' in git. Visual Studio Code에서 git과 GitHub를 연동하여 커밋(Commit)을 할 때 다음과 같은 오류 메시지가 뜨는 경우가 있다. 이 문제는 Git을 설치하고 가장 먼저 해야 하는 사용자 정보(사용자 이름, 사용자 이메일 주소)를 설정하지 않았기 때문 에 발생하는 오류이다. Git을 사용하는 모든 사용자는 커밋(Commit)을 할 때마다 사용자 정보를 사용하는데, 한번 커밋한 뒤에는 정보를 변경하기 어렵다. 사용자 정보를 설정하는 명령어 터미널에 다음의 명령어를 실행하여 사용자 정보를 설정한다. $ git config --global user.name ..
8. 2020.11.04 [VS Code] 폰트 설정하는 방법

   폰트 설정하는 방법 Visual Studio Code(VS Code)를 처음 설치하면 한글 폰트가 "굴림체"로 나오게 된다. 한글 폰트를 "맑은 고딕"체로 바꾸는 방법을 정리해본다. 1. VS Code를 실행시킨 후, "File" → "Preferences" → "Settings" 메뉴를 선택하여 설정 창을 연다. 2. 설정 창 내 좌측 메뉴에서 "Text Editor" → "Font" 메뉴를 선택하여 폰트 설정 구역으로 이동한다. 3. "Font Family" 구간에 'Malgun Gothic'을 추가해준다. (아래 그림 참고) 폰트는 앞에서부터순차적으로 적용된다. 새롭게 적용되기를 원하는 폰트가 있으면, 해당 폰트의 이름을 제일 앞에 추가하면 된다. 기본으로 적용되어 있는 "Consolas", "Co..
9. 2020.09.25 [VS Code] 비주얼 스튜디오 코드 단축키(Visual Studio Code Hotkeys)

   단축키 파일 > 기본 설정 > 바로가기 키 에서 현재 활성화된 키보드 단축키를 볼 수 있습니다 . 기본 편집 키 명령 명령 ID ctrl+X 행 삭제 (빈 선택) editor.action.clipboardCutAction ctrl+C 행 복사 (빈 선택) editor.action.clipboardCopyAction ctrl+shift+k 행 삭제 editor.action.deleteLines ctrl+Enter 아래에 행 삽입 editor.action.insertLineAfter ctrl+shift+Enter 위에 행 삽입 editor.action.insertLineBefore alt+Down 행을 아래로 이동 editor.action.moveLinesDownAction alt+Up 행을 위로 이동 ed..