๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Error2

[VSCode] SCSS ์„ค์น˜ ๋ฐ ์„ค์ • ๋ฐฉ๋ฒ• SCSS ์„ค์น˜ ๋ฐ ์„ค์ • ๋ฐฉ๋ฒ• SCSS๋ž€, ์ฝ”๋“œ์˜ ์žฌํ™œ์šฉ์„ฑ์„ ์˜ฌ๋ฆฌ๊ณ , ๊ฐ€๋…์„ฑ์„ ์˜ฌ๋ฆฌ๋Š” ๋“ฑ CSS์—์„œ ๋ณด์ด๋˜ ๋‹จ์ ์„ ๋ณด์™„ํ•˜๊ณ , ๊ฐœ๋ฐœ์˜ ํšจ์œจ์„ ์˜ฌ๋ฆฌ๊ธฐ ์œ„ํ•ด ๋“ฑ์žฅํ•œ CSS Preprocessor์ž…๋‹ˆ๋‹ค. SCSS์˜ ๊ธฐ๋Šฅ์— ๋Œ€ํ•˜์—ฌ ๋” ์ž์„ธํžˆ ์•Œ๊ณ  ์‹ถ์œผ์‹œ๋‹ค๋ฉด, ์—ฌ๊ธฐ๋ฅผ ํด๋ฆญํ•ด ์ฃผ์„ธ์š”. ์˜ค๋Š˜์€ VSCode์—์„œ SCSS๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ์„ค์น˜ ๋ฐ ์„ค์ • ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. 1. SASS ์„ค์น˜ ๋จผ์ €, ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ(Extenstion, ๋‹จ์ถ•ํ‚ค Ctrl + Shift + X)์—์„œ Sass๋ฅผ ์„ค์น˜ํ•ด ์ค๋‹ˆ๋‹ค. ํ•˜๋‚˜ ๋” ์„ค์น˜ํ•ด ์ค์‹œ๋‹ค. Live Sass Compiler๋Š” ์‹ค์‹œ๊ฐ„์œผ๋กœ CSS๋ฅผ Scss๋กœ ์ปดํŒŒ์ผํ•ด ์ค๋‹ˆ๋‹ค. ์œ„์™€ ๊ฐ™์ด Scss ํŒŒ์ผ์„ ๋งŒ๋“ค์—ˆ์„ ๋•Œ, VSCode์˜ ํ•˜๋‹จ์— ๋‚˜ํƒ€๋‚˜๋Š” Watch Sass ๋ฌธ๊ตฌ๋ฅผ ํ†ตํ•ด ์ •.. 2022. 9. 19.
[VSCode] Prettier ์„ค์น˜ ํ›„ ์„ค์ • ๋ฐฉ๋ฒ• Prettier ์„ค์น˜ ํ›„ ์„ค์ • ๋ฐฉ๋ฒ• Prettier๋Š” ์ฝ”๋“œ ํฌ๋ฉงํ„ฐ(code formatter)๋กœ, ์†Œ์Šค๋ฅผ ์ž๋™์œผ๋กœ ์ •๋ ฌํ•ด ์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ Prettier๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์ „์—๋Š” ๋ช‡ ๊ฐ€์ง€ ์„ค์ •์„ ํ•ด ์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ Prettier ์„ค์น˜ ๋ฐ ์„ค์ • ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. 1. Prettier ์„ค์น˜ ๋จผ์ €, ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ(Extenstion, ๋‹จ์ถ•ํ‚ค Ctrl + Shift + X)์—์„œ Prettier๋ฅผ ์„ค์น˜ํ•ด ์ค๋‹ˆ๋‹ค. Ctrl + S๋ฅผ ๋ˆŒ๋Ÿฌ ํ™•์ธํ•ด ๋ณด๋ฉด, ์•„์ง์€ Prettier๊ฐ€ ์ ์šฉ๋˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. 2. Prettier ์„ค์ • ๊ทธ ๋‹ค์Œ, VSCode์˜ ์ƒ๋‹จ ๋ฉ”๋‰ด ์ค‘ File ํƒญ์— ์žˆ๋Š” ์„ค์ •(Preference)์— ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค. ๊ฒ€์ƒ‰์ฐฝ์— 'editor format on save'.. 2022. 9. 5.
728x90
๋ฐ˜์‘ํ˜•
๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๐Ÿฆ™
JAVASCRIPT
HTML
CSS
๊ด‘๊ณ  ์ค€๋น„์ค‘

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”