[코딩] VSCode 필수 확장프로그램(Extension) 추천

안녕하세요

오늘은 코딩을 하실 때 정말 유용한 Visual Studio Code의 확장 프로그램들을 소개해 드리려고 합니다.

총 5가지 프로그램들을 소개해 드리려고 하고요, 물론 못쓰는 언어도 있겠지만 대부분의 경우에 유용하게 사용할 수 있는 범용적인 프로그램을 소개해 드리려고 추려보았습니다.

vscode용 코드 맞춤법 검사기 입니다. 일반적인 맞춤법 오류들을 잘 잡아내는 평가도 굉장히 좋아서 추천드립니다. 소스 코드의 diff를 해주고 사전 파일에 없는 단어에는 구불구불한 물결 밑줄로 표시해 줍니다.

아쉽게 아직까지는 한국어는 지원하지 않는 걸로 보이지만 기본적으로 영어를 지원하기 때문에 굉장히 유용하게 사용하실 수 있으실 겁니다.

제가 이전에도 소개해 드린 적이 있는 코드를 정렬해주는 에드온입니다.

비주얼스튜디오코드(VSCode) 코드정렬 방법 (feat. Prettier)

비주얼스튜디오코드 파이썬 자바스크립트 C언어 등 자동 코드정렬 방법 코딩을 하다 보면 코드 정리가 안되어 있어 한줄에 여러 구문이 들어가고 들여쓰기가 중요한 파이썬 같은 언어들이 아니

hnm1.tistory.com

코드 구문을 분석하고 최대 줄 길이를 고려해 자체 규칙으로 코드를 다시 일관된 스타일로 정렬해 줍니다.

만약 이 확장 말고 다른 확장 프로그램 위에서 사용되도록 설정하려면 VSCode 설정에서 기본 포맷터를 설정해 줘야 합니다.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

{
  "editor.defaultFormatter": "<another formatter>",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

웹 개발에 정말 한 줄기 빛과 같은 프로그램입니다. 정적 및 동적 페이지의 수정되는 코드를 자동으로 웹 페이지로 동기화시켜줘 실시간으로 페이지에 나타내 줍니다.

이 프로그램을 설치 후에는 vscode 하단에 표시줄에서 "Go Live"를 활성화 시켜줘야 합니다.

리액트 개발자라면 아마 필수로 사용할 확장 프로그램입니다. 최근 리액트 같은 싱글 페이지 애플리케이션을 만드는 라이브러리 사용이 늘면서 한번 추가해 보았습니다.

코드 편집기 아래 키워드로 구조를 단숨에 만들 수 있는 스니펫을 제공합니다. 이것 외에도 "ESLint"라는 프로그램으로 문법도 같이 확인해 주면 좋습니다.

rce : class componet 생성
rafce : allow function component 생성
rfce : function component 생성

깃 허브를 사용한다면 있어야할 프로그램 중 하나입니다.

git에서 누가, 왜, 언제 라인이나 코드 블록을 변경했는지 살펴볼 수 있는 프로그램입니다.

이것을 추가하게 되면 상단에 GitLens 툴바가 추가됩니다.

마우스 오버 시 해당 라인의 커밋 코멘트를 확인하실 수 있고, 앞뒤 버튼으로 파일 기록을 쉽게 확인하실 수 있습니다.

오늘은 vscode에서 사용하기 좋은 5가지 확장 프로그램에 대해서 알아보았습니다.

도움이 되셨다면 댓글과 좋아요 부탁드립니다. 감사합니다.

RedMeta