Environment/Vscode

Node, VSCODE 개발 환경 구성

Say simple 2023. 2. 2. 00:01
728x90
반응형

Node.js 설치

node.js 홈페이지에 들어가면 최신 lts 버전을 설치할 수 있지만 개발자들은 일반적으로 nvm을 사용해서 노드를 설치합니다.

그래도 들어가 보고 싶다면 → (node.js 홈페이지 링크) https://nodejs.org/ko/

  • nvm이란?
    • Node Version Manager의 약자입니다.
    • 간단한 명령어로 Node버전을 스위칭, 설치, 삭제할 수 있습니다.
    • 설치 및 사용 방법: https://kjchoi.co.kr/20
    • nvm-setup.exe를 실행해 설치한 후 node.js의 lts버전 설치(lts버전은 node.js 홈페이지에서 확인 가능)
    • 현재 기준 node 18.12.1이 LST 버전이므로
    • nvm install 18.12.1
    • nvm use 18.12.1
    • node -v
    • 을 실행해주면 node 버전이 18.12.1이 되는 것을 볼 수 있음!

nvm 설정이 끝났다면 vscode를 설치해봅니다.

VSCODE 설치

  • 구글에 vscode 설치 입력(옆의 링크로 들어가도 됨: https://code.visualstudio.com/)
  • Download for Windows 버튼 클릭
  • 다운로드 된 파일 실행해줌.
  • 동의합니다 클릭 > 다음 클릭> 체크 박스 모두 클릭 > 설치 클릭 > 설치 완료!

VSCODE 익스텐션 설치

익스텐션 탭을 클릭한 후 아래 목록들을 검색해서 설치해줍니다.

  • Auto Complete Tag: html 태그를 자동으로 닫아주며 html 태그 이름을 다시 쓸 시 짝 태그와 함께 변경해줍니다.
  • Color Highlight: 색상 코드(예: #ffffff)를 에디터 상에서 색을 입혀서 보여줍니다.
  • DotEnv: DotEnv 파일의 문법과 코드 하이라이팅을 도오
  • Eslint: Eslint 설정을 추가합니다.
  • Prettier: Prettier 설정을 추가합니다.
  • Git Graph: Git을 편하게 그래프로 볼 수 있게 해줍니다.
  • Material Icon Theme: 머터리얼 디자인 아이콘으로 vscode 아이콘을 변경해줍니다.
  • Sass: Sass에 대한 포멧, 하이라이트를 지원해줍니다.
  • TODO Highlight: 주석에 형광펜 쳐줍니다.
  • Typescript Vue Plugin (Volar): Vue의 최신 문법을 지원하는 신텍스 하이라이터입니다.
  • Vue Language Features (Volar): Vue의 최신 타입스크립트 문법을 지원하는 신텍스 하이라이터입니다.
  • Vitest: Vitest의 신텍스 하이라이터이며 Vitest를 에디터에서 돌릴 수 있게 해줍니다.

에디터 자동 정렬 설정

에디터 기본 터미널 CMD로 변경

  • 컨트롤 + 쉬프트 + P > user settings (Json 아닌걸로) > 검색에서 “Default Profile: Windows” 검색
  • 셀렉트에서 Command Prompt 선택

VSCODE 편리한 단축키 정리

  • 컨트롤 + 쉬프트 + n : 새로운 프로젝트 열기
  • 컨트롤 + R : 최근 프로젝트 열기
  • 위 두 개 조합하면 새로운 프로젝트 열기 > 최근 프로젝트 열기로 다른 프로젝트로 쉽게 이동 가능
  • 컨트롤 + t : 검색한 객체 위치로 이동(함수, 변수, 클래스 등)
  • 컨트롤 + w: 창 닫기
  • 컨트롤 + p : 파일 이름 검색
  • 컨트롤 + 쉬프트 + p : 에디터 명령어 입력
  • 컨트롤 + f : 찾기
  • 컨트롤 + h : 바꾸기
  • 컨트롤 + 쉬프트 + f : 전체 찾기
  • 컨트롤 + 쉬프트 + h : 전체 바꾸기
  • 컨트롤 + 스페이스바 : 자동 완성 띄우기
  • 컨트롤 + . : 코드 액션 띄우기
  • 컨트롤 + , : user settings 들어가기
  • 컨트롤 + 알트 + 위 or 아래 방향키 : 위 아래로 커서 여러개 확장하기
  • 알트 + 왼쪽 or 오른쪽 방향키 : 커서 이전, 후로 이동하기
  • 좌측 사이드바에서 파일 아무거나 클릭하고 컨트롤 + f : 파일 목록에서 찾기(접힌 폴더에선 검색 안되므로 열고 검색하기)
  • 컨트롤 + l : 한 줄 선택, 계속 누르면 아래로 확장됨
  • 컨트롤 + d : 커서 레인지 안에 있는 단어 추가 선택하기(test를 마우스로 범위 선택하고 단축키 하면 test가 여러 개 선택됨, 커서도 추가됨, 여러개 동시 변경 가능)
  • 변수, 클래스 등 객체 위에 커서 놓고 f2 : 이름 일괄 변경(에디터에서 자동으로 인식한 이름 전체 변경해줌, 가끔 라이브러리들은 안될 때도 있으니 변경 후 주의 깊게 볼 것)
  • f5 : 런타임 실행 (간단한 코드 실행 등)
728x90
반응형
저작자표시 비영리 변경금지 (새창열림)