프런트 엔드 엔지니어 입문 VS code 초보자용 초기 설정 extension(확장 기능) 10선

Visual Studio Code(VS Code)의 입문시 최초 이것이 있으면 개발이 편리하게 할 수 있는 extension(확장 기능)을 정리했습니다.

1. Live Server

실시간으로 브라우저 업데이트가 되어 코드의 수정이 쉬워집니다. 코드 수정 후 브라우저 업데이트는 더 이상 필요하지 않습니다!


퀵 오픈 Cmd + p → > + live
첫 번째 Show Live Server Preview를 선택하면 서버 Vs 코드 옆에 표시됩니다.

다른 브라우저가 좋으면 Vs Code의 footer에 있는 Go Live를 누르면 다른 브라우저가 표시됩니다.

2. Material Theme

눈 친화적인 테마를 선택하세요.

3. Material Icon Theme

파일이 어떤 파일인지 파일에 icon을 붙여줍니다.

4. Prettier - Code formatter

자동 성형 포맷터 무엇인가 작성하면 코드를 깨끗이 해 줍니다.


간단한 설정이 필요합니다.
바로 가기 mac- Cmd + , windows control + , 에서 설정 화면 열기

기본적으로는 4가 되고 있습니다만 복잡한 조건분 등 많아지면 가독성 때문에 2쪽이 적정

자바 스크립트로 코드의 끝에 세미콜론을 붙이지 않을까?


js 의 single quotation 로 할 것인가 double quotation 로 할 것인가의 자동 변환 설정

5. Bracket Pair Colorizer

프로그램이 복잡해지면 닫는 태그가 어디인지 모르는 경우가 있습니다. 그것을 알기 쉽게 해주는 extension가 Bracket Pair Colorizer 입니다. 괄호끼리 색을 붙여 주므로, 어느 부분이 닫혀 있는가 몹시 알기 쉽고 편리합니다.

6. indent-rainbow

들여 쓰기에 색을 붙여 주므로 알기 쉬운 것이라고 생각합니다.

7. Auto Rename Tag

시작 태그를 수정했을 때, 자동적으로 쌍이 되는 종료 태그를 마음대로 수정해 주는 편리한 extension입니다.
VSCode는 확실히 편안하게 될 것입니다!

8. CSS Peek

css에 정의하고있는 부분을 찾는 것이 조금 번거로울 때이 확장 기능으로 해결!
html 클래스에서 Cmd 를 누르면서 클래스를 클릭하면 대처 CSS로 이동해주는 편리한 extensions!

9. HTML CSS 지원

HTML을 작성할 때 CSS 측에서 만든 클래스 이름이 자동 완성됩니다.
이것이 있으면 클래스 이름의 실수는 어렵게 될 것입니다!

10. Visual Studio IntelliCode

micro SoftTypeScript, JavaScript를 자동 완성 해주는 좋은 extension입니다.
그 외에도 Python, Java도 지원을 해줍니다.