[자바스크립트] 개발 환경 세팅

vscode 설치

Visual Studio Code 다운로드 (https://code.visualstudio.com)

 

D2Coding

• 코딩할 때 ㅇ(한글 이응), o(알파벳 오), 0(숫자 영) 등 헷갈릴 만한 것들을 구분할 수 있는 글꼴
• 다운로드 : https://github.com/naver/d2codingfont
• 글꼴 설치 후 VSCode에 D2Coding 글꼴 지정 필요

[VSCode Editor 내의 왼쪽 하단 톱니바퀴 아이콘] - [setting] - [검색창에 'font-family' 검색] - ['D2Coding' 입력]

 

 

---

 

추천 Extension Plugin

이름	설명
Live Server/Ritwick Dey	- VS Code에서 수정 후 저장하면 바로 웹 브라우저에 반영되어 확인 가능 - 필수적으로 설치해야 할 확장 플러그인
Live Preview/Microsoft	- Live Server와 비슷한데 좀 더 편함 - 편집하면 자동으로 업데이트 된 내용을 보여줌
Prettier/Prettier	- 작성한 소스를 보기 좋게 정리
Material Theme/Equinusocio	- 다양한 테마 선택 가능
Material Theme Icons/ Equinusocio	- 파일 목록에서 파일 종류에 따라 아이콘 을 붙여주는 확장
Code Runner/Jun Han	- javascript 코드 실행을 VScode 내부에서 할 수 있게 지원함 [VScode Editor 내 설정] 1. [Setting] - [window profile] - [Terminal › Integrated › Default Profile: Windows] 2. [command-prompt]으로 설정 3. VScode Editor 재시작
ESLint/Microsoft	- npm install eslint를 통해 eslint를 먼저 설치한 후 사용할 수 있는 확장 플러그인 - ESLint : JavaScript와 TypeScript 코드의 품질을 자동 검사하고 향상시켜 주는 도구
GitLens/GitKraken	- Git을 보다 쉽게 관리하고, 코드 히스토리와 변경 사항을 직관적으로 파악할 수 있음
Git Graph/mhutchie	- 레포지토리의 git graph를 볼 수 있음
Remote - SSH/Microsoft	- 로컬 환경에서 VSCode로 원격 서버에 있는 파일을 편집하고 작업할 때 사용
Docker/Microsoft	- docker 관련 확장 플러그인