참고
사용 툴
VSCode
Chrome
웹 개발을 할 때에 사용하면 좋고 편리한 VSCode Extension
기본 설정
Korean Language Pack for Visual Studio Code
- 한글패치
IntelliCode
- 코드 추천 완성 기능
- 개발자가 IDE 에디터에 코드를 입력 중인 해당 행에 가장 알맞은 어플리케이션 프로그램 인터페이스 (API) 를 추천해줍니다.
Live Server
- 웹 개발을 하려면 꼭 있어야 할 필수 프로그램으로 실시간으로 확인할 수 있는 서버가 열린다
- html 및 css 파일 저장 시 브라우저 새로고침 없이 자동으로 브라우저에서 업데이트 된 내용을 볼 수 있다
Path Intellisense
- 파일명 자동완성을 지원하는 익스텐션
테마 및 하이라이팅
Material Theme
- 배경 폰트나 테마를 적용하여 본인에 맞는 테마 사용
Tokyo Night
- 개인적으로 눈도 안 아프고 이쁜 테마
Material Icon Theme
- 파일 아이콘을 보고 파일 형식을 한 눈에 알 수 있음
Better Comments
- 주석을 작성할 때 더 알기 쉽게 작성할 수 있음
Bracket Pair Color DLW
- 괄호의 짝을 맞추고 색을 다르게 해 직관적으로 괄호의 범위를 알 수 있도록 도와줌
indent-rainbow
- 들여쓰기를 무지개 색상으로 표현되어 코딩에 도움을 주는 프로그램
HTML & CSS & JS
Auto Close Tag
- html의 닫는 태그를 자동으로 작성해줌
Auto Rename Tag
- html의 여는, 닫는 태그를 변경할 때 같이 변경해줌
HTML CSS Support
- CSS에 정의되어 있는 선택자(id, class)를 Html에 입력할 때 자동완성
CSS PeeK
- html파일에서 css파일을 금방 찾게해줌 (컨트롤키 or 커멘드키를 누른 상태로 html 요소를 클릭시 정의된 css 파일로 이동)
Color Highlight
- 색을 지정할 때 rgb나 16진수(#F699CC) 등 색상코드로 입력하면 해당하는 색을 코드의 배경색으로 보여줌
- CSS를 입히는 과정에서 현재 무슨 색으로 적용하였는지 바로바로 볼 수 있음
React & Typescript
ES7+ React/Redux/React-Native snippets
- React를 사용하여 개발할 때 편리한 snippet으로 시간을 단축해줌
Auto Import
- react 개발 시 import문을 작성하는 게 귀찮은데 자동으로 대신 추가해줌
Pretty TypeScript Errors
- Typescript를 사용하여 개발할 때 에러가 발생하면 내장 VSCode의 오류보다 더 이쁘게 알려줌
vscode-styled-components
- styled Component에서 css 코드를 작성 시, 자동완성이 안 되어 일일이 코드를 입력해야 하는 문제를 해결해줌
협업 및 프로젝트 설정
Git Lens
- 코드에 커서만 올려도 해당 커밋을 언제 누가 썼는지 알려주는 blame 기능을 제공하여 자기 자신 또는 팀원의 커밋을 확인할 수 있음
ESLint
- 프로젝트에서 EsLint를 사용한다면 .eslintrc 에 설정된 룰에 따라 소스코드를 분석해서 문법 에러, 버그 등을 찾아서 보고해줌
Prettier
- 내가 작성한 코드를 보기 좋게, 또 일관성 있게 포맷팅을 해주는 도구
- 줄바꿈이나 들여쓰기 간격, 세미콜론을 사용할 것인지, 큰따옴표를 쓸 것인지 혹은 작은 따옴표를 쓸 것인지를 설정해서 내가 파일을 저장할 때마다 형식에 맞게 보기 좋게 정렬을 해줌
ETC
Code Spell Checker
- 오타 방지 익스텐션
Error Lens
- 코드를 작성하다 에러가 발생하면 바로 알려줌
Outline map
- VSCode 에디어 오른쪽에 파일에 변수, 함수 단위로 묶어놓은 사이드바 개념 -> 클릭시 해당 위치로 이동
Tabnine: AI Autocomplete
- 코드 자동완성 ai