특강을 통해 개발 생산성을 높여주는 20개의 익스텐션에 대해 알 수 있었고, 나중에 다시 세팅할 때 참고하기 위해 기록해두려 한다. 그리고 개인적으로 정말 유용했던 툴은 이름 뒤에 (👍)을 붙여두겠다.
프론트엔드 코드 작성을 도와주는 툴
-
Prettier(👍): 코드의 들여쓰기, 공백, 줄바꿈 등을 자동으로 정리해준다.
-
ES7+ React/Redux/React-Native snippets(👍)
- React 코드 스니펫을 통해 React 컴포넌트, hooks 등을 쉽고 빠르게 작성할 수 있다.
- 자주 사용하는 스니펫:
rfce(function 컴포넌트),rafce(화살표 함수 컴포넌트),clo(console.log),useStateSnippet등 - 전체 스니펫 목록: https://github.com/r5n-labs/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md
-
Auto Rename Tag(👍): HTML 태그 이름을 수정할 때 여는 태그와 닫는 태그가 동시에 수정된다.
-
Multiple cursor case preserve(👍): 다중 커서로 단어를 선택하여 한꺼번에 바꿀 때 기존의 대소문자를 유지해준다. (camelCase 등)
- indent-rainbow: 들여쓰기에 배경색을 넣어 눈에 잘 띄게 해준다.
- Color Highlight: CSS 컬러 코드에 실제 컬러로 배경색을 넣어 강조해준다. (배경색 미리 확인 가능)
- Live Server(👍): 로컬 개발 서버를 실행하여 변경사항을 즉각적으로 확인할 수 있게 해준다.
디버깅과 코드 품질 관리를 위한 툴
-
ESLint(👍): JavaScript 코드의 문법 오류나 안티 패턴을 찾아준다.
-
Error Lense: 문제가 있는 라인을 강조 표시하고, 오류/경고 메세지를 인라인으로 보여준다.(다소 정신 없기에 필요시에만 사용 추천)
-
Code Spell Checker: 코드의 스펠링 오류를 체크해준다.
-
Pretty TypeScript Errors: TypeScript 에러를 가독성 좋게 표시해준다.
- Console Ninja: console.log 출력 결과를 코드 옆에 바로 보여준다. (최근 구독 요금제가 도입되면서, 최신 버전 프레임워크에 대한 지원은 PRO 사용자에게만 제공되고 있다. 무료 사용자에게는 올해 연말쯤 기능을 풀어줄 것 같다.)
프로젝트 관리와 협업을 위한 툴
-
Git Graph: 깔끔한 Git 그래프를 볼 수 있고, 그래프에서 Git 작업을 수행할 수 있다.
-
GitLens: 코드 라인별로 commit 내역을 볼 수 있다.
-
Project Manager(👍): 여러 프로젝트를 북마크해놓고 쉽게 접근할 수 있고, 태그별로 정리할 수도 있다.
-
Todo Tree:
TODO,FIXME등을 주석을 트리 형태로 보여준다.
-
Live Share: VS Code에서 여러 명이 실시간으로 협업할 수 있다.
-
Thunder Clinet(👍): VS Code에서 API 응답을 간편하게 테스트할 수 있는 REST API 클라이언트이다.
VS Code 테마 설정
-
Meterial Theme(👍)
-
다양한 VS Code 테마를 제공한다.(예쁨)
-
설정 방법:
Command Palette열기(Cmd/Ctrl+Shift+P) "theme" 검색Preferences: Color Theme선택 원하는 테마 선택
-
-
Meterial Icon Theme(👍)
- 사이드바 탐색기의 파일과 폴더를 아이콘 형태로 보여준다.(예쁨)
- 설정 방법:
Command Pelette열기(Cmd/Ctrl+Shift+P) "theme" 검색Preferences: File Icon Theme선택Meterial Icon Theme선택
