내가쓰는 vscode plugin 정리

 

Prettier - Code formatter

- HTML, 자바스크립트, 타입스크립트, CSS 등 다양한 언어 형식을 잡아줌

- 코드를 보기 좋게 정해진 코딩 컨벤션대로 정렬해주는 도구

Atom Keymap
Atom에서 자주 사용하는 바로 가기 키를 사용할 수 있음

 

Material Icon Theme
파일들 아이콘을 변경시켜주는 테마

 

ESLint

- linter는 소스코드를 분석해서 문법 에러, 버그를 찾고 보고해주는 도구

- ESLint는 ES6까지도 잘 분석해줘서 가장 인기 많은 플러그인

 

CSS Peek

- HTML파일에서 CSS를 사용한 class의 해당 css파일 위치로 이동

- HTML태그에서 css를 사용한 부분에 ctrl + 우클릭 or F12

 

HTML CSS Support

- CSS파일 속성 자동완성 기능 제공

- HTML에서 CSS에 미리 써있는 class를 가져다 쓸수 있음

- class 작성 후 ctrl+spacebar 단축키로 사용 가능

 

Live Server

- HTML소스등의 내용을 실시간으로 서버를 띄워 화면에 표시

- 설치 후 하단의 GoLive버튼 클릭 또는 단축키 사용

- live Server 서버 열기 Alt + L, O / 닫기 Alt + L, C

 

Auto Close Tag

- 자동으로 태그 html 태그 닫아줌

 

Auto Rename Tag

- 자동으로 열기태그 이름바꾸면 닫기태그도 같이 바뀜

 

Braket Select

- 괄호안의 문자열 빠른선택 alt+a

 

Color Highlight

컬러 색깔 테두리로 표현

 

indent-rainbow

들여쓰기 구분쉽게 색깔주기

 

Night owl

야간모드 테마

Vetur

vue코드 하이라이팅

 

vue Language feature(volar)

vue3에서 vetur가 에러날경우가 많아서 설치

 

Vue Vscode Snippets

vue 자동완성

 

Vue 3 snippets

vue3 자동완성

 

TSLint Vue

vue전용 typescript 검사