크롬 브라우저

Chrome 웹브라우저

크롬 확장 프로그램 - Vue.js devtools

Vue.js 애플리케이션 디버깅을 위한 Chrome 브라우저의 확장 프로그램입니다. (Vue 3 지원 다운로드)

Vue.js devtools - Chrome Web Store

Visual Studio Code 설치

VSCode 확장 프로그램 설치

• Korean Language Pack

  • Visual Studio Code의 사용자 인터페이스(UI)를 한국어로 번역해 주는 확장 프로그램입니다.
  • 설치 후 설정에서 언어를 '한국어'로 선택하면 적용됩니다.

• Auto Rename Tag

  • HTML, JSX, Vue 파일 등에서 HTML 태그를 자동으로 리네임해 주는 확장 프로그램입니다.
  • 예를 들어, <div> 태그를 <section>으로 변경하면 닫는 태그(</div>)도 자동으로 <section>으로 바뀌기 때문에 실수를 줄일 수 있습니다.

• Vue - Official

  • Vue.js 공식 확장 프로그램으로, Vue 파일 구조(템플릿, 스크립트, 스타일 구역)를 올바르게 인식하여 코드 작성을 효과적으로 할 수 있도록 지원합니다.
  • 구문 강조, 코드 자동 완성, Linting(코드 스타일 검사) 등을 제공하여 Vue.js 개발 생산성을 높여줍니다.

• Vue VSCode Snippets

  • Vue.js 코드를 빠르게 작성할 수 있도록 코드 스니펫(자동 완성 기능)을 제공하는 확장 프로그램입니다.
  • 예를 들어 vbase라고 입력하면 Vue 컴포넌트의 기본 구조가 자동으로 완성되며, vfor, vmodel 등 자주 사용하는 Vue 문법을 간단히 입력할 수 있습니다.

• EditorConfig for VS Code

  • EditorConfig는 팀 프로젝트에서 일관된 코드 스타일을 유지하기 위한 파일 형식을 정의하는 표준입니다.
  • 이 확장 프로그램은 .editorconfig 파일에 정의된 설정을 인식하여 탭, 들여쓰기, 줄바꿈 등의 코드 스타일을 일관되게 유지하도록 도와줍니다.
  • 여러 명이 협업할 때 팀원 간의 코드 스타일 불일치를 줄여 코드 품질을 유지할 수 있습니다.

• ESLint

  • JavaScript와 TypeScript 코드의 문법 오류와 스타일을 검사하는 확장 프로그램입니다. 주로 코드 품질을 유지하고, 코드 스타일의 일관성을 보장하며, 잠재적 오류를 사전에 방지하는 데 사용됩니다.
  • 자동 수정 기능: VSCode 설정에서 eslint.codeActionsOnSave를 활성화하면, 코드 저장 시 ESLint가 설정된 규칙에 따라 자동으로 문제를 수정합니다.

• Prettier - Code Formatter

  • JavaScript, TypeScript, HTML, CSS 등 다양한 언어의 코드 포맷팅을 자동화해 주는 확장 프로그램입니다. 코드 스타일을 일관되게 유지하고, 포매팅에 대한 규칙을 명확히 할 수 있어 코드 리뷰 시간 절약과 가독성 향상에 도움을 줍니다.
  • VSCode 설정에서 editor.formatOnSave: true로 설정하면, 저장할 때 자동으로 코드가 포맷팅됩니다.

터미널