[VSC] Visual Studio Code 확장 프로그램

 캠프가 시작한 지 3달째, 벌써 3일 뒤면 최종 프로젝트를 시작한다. 나중에 다른 컴퓨터나 노트북으로 Visual Studio Code를 사용할 때를 대비해서 지금까지 Visual Studio Code로 코딩하면서 사용했던 확장 프로그램을 정리해보려 한다.

Korean Language Pack for Visual Studio Code

• 가장 먼저 설치한 확장 프로그램으로 한국어 기능을 제공한다.
• 설치한 후 재시작해야 적용된다.

Open in browser

• html code를 웹 페이지로 빠르게 실행해 주는 단축키를 생성해 준다.
• code에 오른쪽 마우스를 클릭하면 다음과 같이 직접적으로 접근할 수 있다.

Live Server

• open in browser과 비슷하게 html code를 웹 페이지로 실행시켜 준다.
• open in browser는 html code를 수정할 경우 새로고침을 해야 하지만, Live Server는 수정 후 저장만 하면 자동으로 웹 페이지가 새로고침된다.
• 마찬가지로 오른쪽 마우스를 클릭하면 다음과 같이 직접적으로 접근할 수 있다.

Prisma

• Syntax highlight 같은 기능이 있어 prisma 파일을 좀 더 보기 좋게 만들어 준다.
• formatting, auto-completion(자동 완성) 기능 등이 있다.

WSL

• WSL은 Windows에서 Linux 개발 환경을 제공하며 VSC에서도 Linux 환경을 사용할 수 있게 해 준다.

Prettier - Code formatter

• \사용자\AppData\Roaming\Code\User 경로에 settings.json 파일에 prettier 관련 설정을 넣어주면 모든 코드에서 prettier가 적용된다.

MySQL

• MySQL management tool
• 명령어 없이 쉽게 DB 및 테이블, 컬럼을 생성, 수정, 삭제할 수 있음

GitHub Actions

• Github와 연동하여 커밋을 관리하는 등 Github 관련 행동을 할 수 있음
• 터미널에서 명령어로 치는 게 낭만 있기 때문에 잘 사용하진 않는다.

Live Share

• 팀원들에게 링크를 생성해서 보내면 프로젝트를 모두가 수정 및 리뷰할 수 있다.
• 권한만 준다면 터미널까지 만질 수 있기 때문에 신뢰할 수 있는 사람에게만 링크를 보내는 게 좋겠다.

ESLint

• JavaScript 코드를 실행하지 않아도 에러를 찾아주는 확장 프로그램
• 콘솔 로그의 의존도를 줄여준다.
• 초기값으로 사소한 오타도 에러로 표시하므로 입맛에 맞게 초기 설정이 필요하다.

highlight-icemode-select

• 드래그를 하면 다른 파일의 같은 단어들도 하이라이트를 해주는 확장 프로그램
• 오타 체크에 매우 좋으며 다른 파일에서 같은 변수, 함수명 등을 찾는데에 유용하다.
• Extension setting에서 배경을 입맛에 맞게 변경하는 것이 좋다. (본인은 청록 #074006 사용 중)

Code Spell Checker

• 영어 단어가 올바른지 아닌지 체크해 주는 확장 프로그램
• 이 또한 오타 체크에 매우 좋으며 JS는 카멜케이스가 적용되어 있다.

Material Icon Theme

• 파일 확장자명, 폴더명으로 분석하여 파일 아이콘을 알맞게 설정해 준다.
• 한눈에 보기 편하며 웬만하면 폴더 아이콘이 있어서 폴더 찾기도 편하다.
• 다음과 같이 아이콘이 변경된다.

vscode-proto3

• proto 타입의 파일의 syntax highlighting(구문 강조), syntax validation(구문 검증), code snippets, code completion(자동 완성), code formatting, compilation 등의 기능을 제공한다.