[VScode] VSCode 설치 및 확장프로그램 추천

[VScode] VSCode 및 확장프로그램 설치하기

코드 에디터는 개발자들이 사용하는 필수적인 툴 중 하나다.

VSCode, Sublime Text, Atom, Eclipse, Notepad등 다양한 에디터들이 존재하지만 이 중에서 어떤 에디터를 선택할지는 개발 스타일과 선호도에 따라 다를 수 있다. 

다수의 개발자들이 VSCode를 선호하며 나도 VScode를 사용한다.

가볍기도 하고 다양한 확장프로그램 기능으로 생산성을 높일 수 있기 때문이다.

 

VSCode 설치하기

1.  Visual Studio Code 다운로드 페이지

Download Visual Studio Code - Mac, Linux, Windows

2. 운영 체제에 맞는 설치 파일 다운로드

3. 설치 파일 실행하여 설치를 완료

 

추천 확장프로그램

• Korean Language Pack for Visual Studio Code
  VSCode 에디터를 한글로 전환 시켜준다.
• Material Theme
  Material UI 적용 (Darker HIgh Contrast 사용 중)
• Material Icon Theme
  탐색기 창에서 직관적인 파일 아이콘을 보여준다.
• Prettier - code fomatter
  코드를 정렬해주는 Formatter
  
  • Setting에서 Format On Save 체크해주기 (체크 되어야 코드정렬)
  • 에디터 기본 Formatter로 prettier 설정하기
  • Tab Width 2로 설정 (들여쓰기 간격)
  • PRettier quote : auto 설정
  • 더 많은 설정은 공식 문서에서 확인 
  • 적용 안될 때 참고사이트
• Bracket Pair Colorizer
  괄호 색상을 단계별로 표시한다.
• indent-rainbow
  들여쓰기를 색상으로 표시한다
• Auto Rename Tag
  태그의 이름을 바꾸면 쌍을 이루는 닫힘 태그의 이름도 자동으로 변경 됨
• CSS Peek
  HTML에서 class에 ctrl 키를 누른채 클릭하면 css일로 이동한다
• HTML CSS Support
  HTML 문서에 적용되어 있는 css를 추천해주는 기능
  class를 끝까지 입력하지 않고 자동완성 시킬 수 있어서 시간이 단축된다.
• Live Server
  파일 업데이트를 감지하여 자동으로 브라우저를 라이브 리로드 해주어 리로드 시간을 절약할 수 있다.
• Project Manager
  개발 소스를 프로젝틑 단위로 쉽게 관리하게 해주는 확장프로그램이다.
• FiraCode 폰트
  지원 고정폭 폰트
  FiraCode 다운로드

"editor.fontFamily": "'Fira Code'",
"editor.fontLigatures": true,

 

GitHub - tonsky/FiraCode: Free monospaced font with programming ligatures

• htmltagwrap
  감싸는 태그 만들기
  HTML에서 감싸야 하는 문구나 요소를 드래그 한뒤 (alt+w) 키를 누르면 p태그로 감싸집니다.
  https://recoveryman.tistory.com/414

[비주얼 스튜디오 코드(Visual Studio Code)] 감싸는 태그 만들기(htmltagwrap)

• live sass compiler