VSCode vuejs 관련 플러그인 > 셋팅-링크

• 목록

====================================================================

ctrl + p

검색 : open setting UI

검색 : format / format on save 체크

검색 : defult format / editor: Default Formatter / prettier 선택

====================================================================

====================================================================

vetur

html css support

Vue 3 Pack / hollowtree

Vue Language Feature (Volar)

Vetur :

Vue.js 의 파일 확장명은 .vue 로 되어 있다.

Vetur는 .vue 파일의 코드 하이라이팅을 지원해준다.

Vue 3 Snippets

.vue 파일 생성시 처음 입력해야 하는 코드를 snippets으로 지정해놓을 수있다.

단지 코드 초기 구성을 위해 필요하다 (하지만 매우 유용하며 제일 많이 사용한다!!)

https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

Vue Peek

Vue 프로젝트내에서 참조되는 템플릿이나 모듈을 빠르게 추적이 가능합니다. CSS 또한 마찮가지 입니다.

Peek - CSS 파일을 인라인으로 로드하고 바로 편집이 가능 ( ctrl + shift + F12)

Go To - CSS 파일로 바로 이동하거나 새 편집기에서 열기 가능 ( F12)

Hover - 마우스를 올리면 바로 정의가 가능합니다. ( Ctrl + hover)

DotENV

.ENV 파일에 작성된 코드들을 컬러감있게 표기하여 가독성을 높일수있습니다.

Prettier : 코드를 예쁘게 자동 정렬 extension

# 기본설정

{

"editor.defaultFormatter": "esbenp.prettier-vscode"

"[javascript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

}

}

RainBow Brackets : 소괄호, 중괄호, 대괄호 묶음별로 색상을 표기해줘서 코드를 보기 쉽게 해준다.

Auto Rename Tag : 쌍을 이루는 HTML 태그를 같이 변경 해준다.

# 기본설정

{

"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]

}

Auto Close Tag : html 태그를 작성시 여는 태그만 입력을 해도 자동으로 close 태그를 입력해준다

# 기본설정

{

"auto-close-tag.SublimeText3Mode": true

}

====================================================================

====================================================================

Vetur     코드 하이라이팅 지원, 문법 강조, 코드 자동 완성, 디버깅 등 지원
Vue 3 Snippets     스니펫을 이용하여 코드 자동 완성
Vue VSCode Snippets     Vue 코드 자동 완성 (문법 확인)
GitLens — Git supercharged     코드 변경된 부분 비교 확인
Debugger for Microsoft Edge     Edge 브라우저에서 디버깅 사용
EditorConfig for VS Code     코드 가독성을 위해 확장자 별 tab size (Indentation) 설정
ESlint     코드 작성시 문법 오류 및 버그 확인
Material Icon Theme     폴더 아이콘 디자인 적용
npm     node js 로 만들어진 package 를 관리해주는 도구, npm 을 통해 node.js로 만들어진 module을 웹에서 받아서 설치하고 package.json을 통해 관리
Prettier - Code formatter     사용자 편의에 맞게 구성된 확장 기능 , 자동 tab
Bracket Pair Colorizer     괄호를 시작 종료 구분해 색상 표시
Code Spell Checker     코드 내 철자 검사 (철자가 틀린 경우 밑줄 표시)
npm Intellisense     npm module을 import 할 때 자동완성 기능을 제공
Visual Studio IntelliCode     Python, Java, TypeScript, JavaScript 용 AI 자동 완성 제공

vscode-icons     VSCode 툴 안에서 파일명 앞에 아이콘 표시 (파일 가독성)
One Dark Pro     코드 작성 시 다크 테마 적용
Live Server     개발중인 html 페이지를 localhost에서 바로 보기 시 유용
Auto close Tag     Html 태그 작성 시 자동 완성 기능 제공
Korean Language Pack for Visual Studio Code     VSCode 툴의 한국어 지원 플러그인
Vue Peek     코드 작성 시 Vue 컴포넌트를 쉽게 찾을 수 있게함
JS-CSS-HTML Formatter     코드 자동 완성 기능 제공 (ctrl + space)
Prettier     코드 자동 정렬 기능 지원 (html 코드 작성 시 포맷 일정)
Atom Keymap     단축키 커스텀 설정 지원
Night Owl     VSCode 테마 설정 (파란색)