[VSCode] 웹 프로그래밍시 유용한 확장 프로그램(22.05.28)

 

웹 프로그래밍시 VSCode를 사용하면서 코드 작성시 유용한 확장 프로그램을 정리한다.

 

목차
  1. Auto Close Tag
  2. Auto Rename Tag
  3. Live Server
  4. ES7 + React / Redux / React-Native snippets(React 관련 snippets)
  5. Material Icon Theme
  6. Prettier - Code formatte

 

---

 

Auto Close Tag

 

앞의 태그를 작성하면 자동적으로 </> 태그를 닫아주는 기능

 

AutoCloseTag.gif

---

 

Auto Rename Tag

 

앞의 태그를 수정하면 닫히는 태그 또한 같이 수정하는 기능

 

AutoRenameTag.gif

---

 

Live Server

 

html파일 코드에서 우클릭 후 "Open with Live Server" 클릭하게 되면 로컬 아이피로 html 파일이 작동하는 것을 볼 수 있고 html 코드 수정 후 저장시 바로 화면에 변경된 사항을 보여줌

 

LiveServer.gif

---

 

ES7 + React / Redux / React-Native snippets

 

ES7버전과 Babel에 쓰이는 Javascript와 React/Redux 문법 템플릿 제공

 

Snippets.gif

 

https://github.com/dsznajder/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md

GitHub - dsznajder/vscode-react-javascript-snippets: Extension for React/Javascript snippets with search supporting ES7+ and bab

위 링크에서 각종 snippets 확인 가능하다

 

---

 

Material Icon Theme

 

탐색기 탭에서 파일 목록들을 가독성 있게 만들어 줌

 

적용전 -> 적용후

 

---

 

Prettier - Code formatter

 

JavaScript, TypeScript, JSON 등 파일을 저장시 코드 포맷을 자동으로 수정해줌

 

Prettier.gif

 

설치법

확장프로그램에서 설치 후 Ctrl+, 로 설정으로 이동

설정 검색에서 editor format on save 입력 후 Editor: Format On Save 체크

다시 검색에서 editor default formatter 입력후 Editor: Default Formatter에서 Prettier - Code formatteresbenp.prettier-vscode 선택

---