# ESLint와 Prettier μ„€μ • ν•˜κΈ°

νŒ€ ν”„λ‘œμ νŠΈμ—μ„œ λ·°λ₯Ό κ°œλ°œν•  λ•Œ μ½”λ“œλ₯Ό μΌκ΄€μ μœΌλ‘œ μž‘μ„±ν•˜κ³  μ—λŸ¬λ₯Ό 덜 λ‚˜κ²Œ ν•˜λŠ” 방법이 μžˆμŠ΅λ‹ˆλ‹€. λ°”λ‘œ ESLint + Prettier ν”ŒλŸ¬κ·ΈμΈμ„ μ‚¬μš©ν•˜λŠ” λ°©λ²•μΈλ°μš”. 이 2개 도ꡬ에 λŒ€ν•œ μžμ„Έν•œ μ„€λͺ…κ³Ό μ„€μ • 방법은 λ‹€μŒ 글을 μ°Έκ³ ν•©λ‹ˆλ‹€.

# Vite 기반 Vue 3 ν”„λ‘œμ νŠΈμ—μ„œμ˜ ESLint와 Prettier μ„€μ • 방법

Vue 3 곡식 λ¬Έμ„œμ˜ ν”„λ‘œμ νŠΈ μŠ€μΊν΄λ”©(초기 ν™˜κ²½ ꡬ성) νŽ˜μ΄μ§€μ— μ•ˆλ‚΄λœ ν”„λ‘œμ νŠΈ 생성 λ°©λ²•μž…λ‹ˆλ‹€.

npm init vue@latest

이 λͺ…λ Ήμ–΄λ₯Ό μž…λ ₯ν•˜λ©΄ Vite 기반의 ν”„λ‘œμ νŠΈκ°€ μƒμ„±λ©λ‹ˆλ‹€. ν”„λ‘œμ νŠΈκ°€ 생성될 λ•Œ ν”„λ‘œμ νŠΈ 이름, νƒ€μž…μŠ€ν¬λ¦½νŠΈ μ„€μ • 등을 λ¬»λŠ” 9개의 질문이 λ‚˜μ˜΅λ‹ˆλ‹€. 각 μ§ˆλ¬Έμ„ μ•„λž˜μ™€ 같이 λ‹΅ν•©λ‹ˆλ‹€.

vue-vite-cli-questions.png

μƒμ„±λœ ν”„λ‘œμ νŠΈλ‘œ μ΄λ™ν•œ ν›„ 터미널(λͺ…λ Ήμ–΄ ν”„λ‘¬ν”„νŠΈ μ°½)에 μ•ˆλ‚΄λœ NPM μ„€μΉ˜ λͺ…λ Ήμ–΄λ₯Ό μ‹€ν–‰ν•©λ‹ˆλ‹€. μ„€μΉ˜κ°€ μ™„λ£Œλœ ν›„ VSCode의 μ„€μ •μ—μ„œ Format on Save μ˜΅μ…˜μ„ μΌ­λ‹ˆλ‹€.

format-on-save

λ§ˆμ§€λ§‰μœΌλ‘œ main.js νŒŒμΌμ—μ„œ mount('#app') μ½”λ“œ 끝에 μ„Έλ―Έ μ½œλ‘ μ„ 뢙이고 νŒŒμΌμ„ μ €μž₯ν•˜λ©΄ 프리티어 κ·œμΉ™μ— 따라 μ„Έλ―Έ 콜둠이 μžλ™μœΌλ‘œ μ‚¬λΌμ§€λŠ” 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

TIP

μ½”λ“œ ν¬λ§·νŒ…μ— λŒ€ν•œ μžμ„Έν•œ 섀정은 프리티어 곡식 λ¬Έμ„œ (opens new window)의 λ‚΄μš©κ³Ό Vue.js 개발 생산성을 λ†’μ—¬μ£ΌλŠ” 도ꡬ 3가지 (opens new window) λ¬Έμ„œλ₯Ό μ°Έκ³ ν•˜μ„Έμš”.