지금도 개발중

Vue.js : Vue 개발환경 세팅하기 본문

프론트/Vue

Vue.js : Vue 개발환경 세팅하기

홍시쿼카 2025. 2. 10. 13:55

1. Visual Studio Code 설치
VSCode 설치는 크게 어렵지 않으니 본인의 OS에 맞게 설치를 진행하시면 됩니다.
- 참고로 VSCode에서 추가적인 Extensions 사용 및 디버깅을 하기 위해서 크롬(Chrome)도 필요합니다.

 

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

 

2. Node.js 설치
Vue.js 개발을 위해서는 반드시 Node가 필요합니다.
만약 프로젝트 내에 따로 원하는 버전이 있으면 해당 버전은 공식홈페이지에서 선택할 수 있으니
환경에 맞는걸로 선택하시면 될 것 같습니다.
- 2025년 2월 기준 최신 버전은 v22입니다.

-- 터미널
node -v
-- 콘솔
node --version

node버전 확인은 터미널(콘솔)에서 확인해보시면 바로 알 수 있습니다.
만약 버전 확인이 잘 안된다면 환경변수 설정 및 재부팅한 다음 다시 확인해주세요.

 

Node.js — Node.js® 다운로드

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

3. VSCode 실행 및 Extensions 설치
VSCode를 설치하면 기본적으로 설정된 것들도 있는데 더욱 쓰기 편함을 위해 아래와 같은 플러그인을 권장합니다.
필수로 설치해야 하는 것은 아닙니다.

플러그인 명 상세
Vue VSCode Snippets Vue
Vue 3 Snippets Vue
Error Lens Code상의 Error, Warning 표시해주는 플러그인
ESLint Code Style
Stylelint Code Style
Prettier - Code formatter Code Style
Night Owl Code Theme
aries Theme Theme
Material Theme Icons — Free Tool Style
Material Icon Theme Tool Style
Import Cost import하는 패키지에 대한 사이즈 표시
GitLens — Git supercharged Git관련 플러그인
Git History Git관련 플러그인
Git Graph Git관련 플러그인
Commit Message Editor Git관련 플러그인

Git을 쓰시는분들은 Git관련 플러그인도 같이 참고하시면 좋을 것 같네요!

Comments