[개발 도구] vscode extension 설치및 추천 확장 프로그램 설치 및 추천

지난시간

저번시간에는 Code-server를 사용하기위해 도커를 이용해서 맥미니에 서버를 띄우고 사용하는 방법을 알아봤습니다.

요번 시간에는 앞으로의 개발을 위해 사용할 Extension을 설치하면서 추천해드리겠습니다.

설치 방법

설치는 왼쪽에 보면 있는 여러 아이콘중에 맨 밑에 있는 아이콘을 누르면 Extensions 마켓이 나옵니다.

이곳에서 자신이 설치하고 싶은 익스텐션을 검색해서 Install 버튼을 눌러 설치를 하면 됩니다.

추천

1. Auto Close Tag

HTML이나 XML 코드 작업을 할때 종료 태그를 자동 생성해주는 익스텐션입니다.

2. Auto Rename Tag

HTML이나 XML 시작 태그와 종료 태그를 수정할때 동시에 수정해주는 익스텐션입니다.

3. Live Preview

HTML 작업중에 파일 상단 오른쪽 분활 돋보기 아이콘을 클릭하면 실시간으로 미리보기를 가능하게 해줍니다.

4. Prettier-code Formatter

코드를 저장할때마다 자동으로 정렬해주는 익스텐션 입니다.

• 사용 가능 확장자
  • JS, TS, Flow, JSX, JSON …등
  • CSS, SCSS, Less … 등
  • HTML, Vue, Angular …등
  • GraphQL, Markdown, YAML …등

5. ESLint

자바스크립트로 개발을 할때 소스코드에서 오류를 바로바로 알려주는 확장 프로그램입니다. 바로 알려주기때문에 코드의 문제점을 찾기 쉬워집니다.

6. Auto Import

개발을 할때 파일명을 입력하면 내가 따로 import하지 않아도 자동으로 import 해준다.

7. Tabnine

코드 완성을 도와주는 코드 자동완성 AI 익스텐션입니다.

• 원래 맥미니에서 작업을 할때는 코파일럿을 사용했는데 code-server를 이용하다보니 코파일럿이 안보여서 이걸 사용하게 되었습니다. ( 코드 서버에서도 코파일럿을 사용할 수 있는 방법이 있으면 댓글 남겨주세요…)

---

마무리

위에 익스텐션 말고도 개발을 하다보면 사용하는게 많지만 제가 가장 많이 사용하는 것들로 작성해보았습니다. 추후에 또 좋은걸 발견하면 추가로 글을 작성해서 올려보겠습니다.