0songha0

Visual Studio Code 설치 / VS Code 사용법

Visual Studio Code 설치

https://code.visualstudio.com/download
운영체제에 맞는 VS Code 설치가 필요합니다.

VS Code 사용법

프로젝트 여는 방법

상단 File 메뉴 > Open Folder > 프로젝트 폴더 선택

파일 내 텍스트 검색

좌측 검색 아이콘 클릭 > 검색어 입력

플러그인 설치 방법

좌측 EXTENSIONS > 플러그인명 검색 > 플러그인 선택 > Install
파이썬 플러그인도 설치할 수 있습니다.

유용한 VS Code 플러그인 추천

Auto Rename Tag 태그 변경 시 여는 태그, 닫는 태그 동일하게 자동 변경
CSS Peek Ctrl + CSS 요소 클릭 시 선언된 CSS 위치 안내 팝업 표출
HTML to CSS autocompletion HTML에 클래스명, ID명 작성 시 CSS에서 자동완성 지원
HTML CSS Support CSS 작성 시 HTML에서 자동완성 지원
Live Server 코드 저장 시 브라우저에 자동 새로고침하여 반영해주는 개발용 로컬 서버
ESLint JavaScript, TypeScript 등 코드에서 오류를 찾아주는 코드 검사기

eslint.config.js (최신) 또는 .eslintrc.cjs 설정 파일에 규칙 및 옵션을 지정하고,
VS Code 폴더 하위 settings.json 파일에서 editor.codeActionsOnSave 옵션을 활성화하면,
코드 저장 시마다 코드를 검사하고 일부 문제는 자동 수정해줍니다.
프로젝트 경로에서 npm run lint 시, 전체 코드를 검사하고 자동으로 정리할 수 있습니다.
Vetur Vue 2 기반 개발 지원 플러그인
더 이상 적극적인 업데이트가 되지 않습니다.
Volar Vue 3 기반 개발 지원 플러그인
Volar는 vue (Official) 플러그인에 통합되어 deprecated 예정입니다.
vue (Official) Vue 공식 개발 지원 플러그인
Vue 2, 3 모두 지원하는 최신 권장 플러그인입니다.
Vue VS Code Snippets Vue 상용구 코드 자동 완성을 도와주는 플러그인
vbase 키워드로 싱글 파일 컴포넌트 기본 구조를 빠르게 생성할 수 있습니다.
EditorConfig for VS Code Vue 프로젝트 템플릿에 포함된 .editorconfig 파일으로 들여쓰기 방식, 탭/스페이스 등을 자동으로 통일합니다.
VS Code에 확장프로그램을 설치하면, .editorconfig 파일에 정의한 설정은 코드 저장 시 자동 적용됩니다.
extensions.json 파일에 명시된 권장 플러그인들도 함께 설치하면 좋습니다.
Prettier - Code formatter 파일 저장 시 코드 포맷팅을 자동으로 해주는 플러그인
settings.json 파일에 editor.formatOnSave 옵션을 true로 설정해야 적용됩니다.
모든 명령문 끝에 세미콜론을 붙이거나, 제거하는 것도 가능합니다.
프로젝트 경로에서 npm run format 시, 모든 파일에 포멧팅 적용도 가능합니다.

파이썬 주피터 노트북 사용 방법

https://0songha0.github.io/python-java/2023-04-21-1

VS Code 언어 변경 방법

Ctrl + Shift + P > Configure Display Language 선택 > 한국어, 영어 등 선택 가능

HTML 상용구 자동 완성

HTML 파일 생성 > HTML 파일에서 ! + Enter 입력

탭 사이즈 변경 (탭 키 스페이스바 개수 변경)

VS Code 하단 상태바 우측 Spaces: 4 선택 > 상단 Indent Using Spaces 클릭 > 2 선택하여 변경

VS Code 멀티 셀렉션 모드

Ctrl + Alt + 방향키 위/아래 > 여러 줄 수정

VS Code 전체 검색 단축키

Ctrl + Shift + F

VS Code 스니펫 생성 방법

Ctrl + Shift + P > >snippets: Configure Snippets 검색 > 엔터 > javascriptreact (리액트 파일 전용 스니펫 설정파일) 등 선택 > 자주 사용할 스니펫 코드 작성 > 저장

"React Component": {
  "prefix": "rcomp",
  "body": [
    "export default function ${1:기본값}(props) {",
    "  return (",
    "    <div>",
    "      ${2}",
    "    </div>",
    "  )",
    "}"
  ],
  "description": ""
}

jsx 파일에서 스니펫 prefix 입력 후 엔터 시 body 코드를 자동완성 해줍니다.
${1} 포커스 후 탭을 누르면 ${2}로 포커스가 이동합니다.

VS Code 스니펫 자동완성 사이트
https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=VS Code
스니펫 body 부분에 입력할 코드를 왼쪽에 작성하면, 오른쪽에 스니펫 코드를 만들어줍니다.

최신 글