비주얼 스튜디오 코드 초기 세팅 및 단축키

일단 예전에 했던 기본 세팅부터 한다.

먼저 Theme, Icon Theme 확장 프로그램부터 설치한다.

 

Material Icon Theme

Material Theme

 

그리고 세팅에서 아래와 같이 세팅한다.

 

Commonly Used -> Files:Auto Save : onFocusChange

                          Editor: Font Size : 16

                          Editor: Tab Size : 2

                          Editor: Word Wrap : on

Editor: Format On Paste : 체크

Editor > Guides: Bracket Pairs : active

JavaScript > Preferences: Quote Style : single

TypeScript > Preferences: Quote Style : single

Workbench: Color Theme : Material Theme

Workbench: Icon Theme : Material Icon Theme

이제 Copilot에 물어본다.

물론! Visual Studio Code (VSCode)를 설치한 후 필수적인 설정을 알려드리겠습니다. 아래 단계를 따라 진행해보세요:

1. VSCode 설치하기:
o VSCode 공식 웹사이트를 방문하여 자신의 운영체제에 맞는 설치 파일을 다운로드합니다.
o 다운로드한 파일을 더블클릭하여 설치를 진행합니다.

2. 기본 설정:
o VSCode를 실행한 후, 좌측 하단의 “시작 시 시작 페이지 표시” 옵션을 끄세요.
o 상단의 검색어 입력란에서 원하는 확장 기능을 검색하고 설치하세요. 필수적인 확장 기능 몇 가지를 추천드립니다:
 Debugger for Chrome: Chrome과 연계한 디버거로, 웹 페이지를 로컬 PC에서 확인할 수 있게 해줍니다.
 HTML Snippets: HTML5 태그 색상화, 코드 스니펫 등을 지원합니다.
 PHP Debug: PHP를 디버깅하기 위한 확장 기능입니다. 로컬 PC에 PHP가 설치되어 있어야 합니다.
 Node Exec: Node.js 파일 실행을 지원합니다.

3. 테마 설정:
o VSCode의 테마를 선택하세요. 좌측 하단의 아이콘을 클릭하고 원하는 테마를 검색하여 설치하세요.

이렇게 설정하면 개발 환경을 효율적으로 구축할 수 있습니다. 추가적인 질문이 있으시면 언제든지 물어보세요! 😊

 

구체적으로 react 환경을 위한 초기 세팅을 물어봐야 할 듯 하다. 그래서 다시 물어본다. 

물론! React 개발 환경을 설정하고 확장 프로그램을 설치하는 방법을 알려드리겠습니다. 아래 단계를 따라 진행해보세요:

1. Visual Studio Code 설치:
o VSCode 공식 웹사이트를 방문하여 자신의 운영체제에 맞는 설치 파일을 다운로드합니다.
o 다운로드한 파일을 더블클릭하여 설치를 진행합니다.

2. 테마 설정:
o VSCode를 실행한 후, 좌측 하단의 “시작 시 시작 페이지 표시” 옵션을 끄세요.
o 상단의 검색어 입력란에서 원하는 확장 기능을 검색하고 설치하세요. 필수적인 확장 기능 몇 가지를 추천드립니다:
 Material Theme: 시각적으로 편안한 테마입니다. 설치 후 원하는 변형을 선택하세요.
 ESLint: 코드 스타일과 오류를 검사해주는 도구입니다.
 Prettier: 코드 포맷팅을 자동으로 처리해줍니다.

3. React 개발 환경 설정:
o Node.js와 npm을 설치하세요. Node.js 공식 웹사이트에서 다운로드할 수 있습니다.
o React 프로젝트를 생성하기 위해 Create React App을 사용하세요. 터미널에서 다음 명령어를 실행하세요:
npx create-react-app my-react-app
o 생성된 프로젝트 폴더로 이동한 후, 개발 서버를 실행하세요:
cd my-react-app
npm start

이렇게 설정하면 React 개발 환경이 준비됩니다. 추가적인 질문이 있으시면 언제든지 물어보세요! 😊 React component appearance in VSCode1

 

ESLint와 Prettier는 저번에 React with typescript 개발환경 만들 때 설치해서 세팅되어 있다.  

https://cgdev.tistory.com/43  참고한다.

react + typescript 개발환경 세팅하기

별다른 추가 세팅은 없어보인다.

이제 유용한 단축키에 대해 물어본다. 

물론! Visual Studio Code에서 유용한 단축키를 알려드리겠습니다:

• 파일 관리 및 탐색:
o 파일 찾기: Ctrl + P
o 새 파일 만들기: Ctrl + N
o 파일 열기: Ctrl + O
o 파일 저장: Ctrl + S
o 모든 파일 저장: Ctrl + K S
o 파일 닫기: Ctrl + W
o 모든 파일 닫기: Ctrl + K W
o 파일 탐색기 열기: Ctrl + Shift + E

• 편집:
o 줄 복사: Ctrl + D
o 줄 삭제: Ctrl + X
o 줄 이동 (위/아래): Alt + ↑ / ↓
o 주석 처리: Ctrl + /
o 들여쓰기: Tab
o 내어쓰기: Shift + Tab

• 탐색:
o 에디터 화면 분할: Ctrl + \\
o 다음 에디터 그룹으로 이동: Ctrl + Shift + PgUp
o 이전 에디터 그룹으로 이동: Ctrl + Shift + PgDn

더 많은 단축키는 여기에서 확인하실 수 있습니다! 

 

별다르게 나오지 않는다. 그래서 추가로 검색해 보니 아래와 같은 유용한 단축키가 있다.

 

ctrl + shift + l : 전체 단어 같이 바꾸기

ctrl + ], [ : 들여쓰기

ctrl + shift + [, ] : 범위 접기

alt + 선택 : 다중선택

 

Ctrl + P : 파일 찾기

! + TAB : 기본 HTML 문서 만들어줌

Ctrl + G : 줄 이동

F12 / Ctrl + Click : 정의문 이동

Alt + F12 : 정의문 미리보기

Ctrl + Alt + 위/아래 화살표 : 열편집

Shift + Alt + 드래그 : 자유영역 지정

Alt + Shift + I : 드래그된 모든 줄 끝에 커서 생성

Ctrl + . : 모듈 자동 찾기

 

익숙해져야 하는 단축키는 노란색으로 표시했다.