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

VSCODE2

[VSCODE] SCSS ์„ค์น˜ ๋ฐ ์ ์šฉํ•˜๊ธฐ VSCODE : SCSS ์„ค์น˜ํ•˜๊ธฐ ์•ˆ๋…•ํ•˜์„ธ์š”~! ํ† ๋งคํ†  ์ž…๋‹ˆ๋‹ค ๐Ÿ… ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” vscode์—์„œ SCSS๋ฅผ ์„ค์น˜ํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณผํ…๋ฐ์š”! ์šฐ์„  ์•„๋ž˜์˜ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ(extension)์„ ๋‹ค์šด๋ฐ›์•„ ์ฃผ์„ธ์š”! ๐Ÿ”ถ 01. Sass ๐Ÿ”ถ 02. Live Sass Compiler ์•„๋ž˜์˜ Live Sass Compiler๋Š” ์‹ค์‹œ๊ฐ„์œผ๋กœ SCSS๋ฅผ CSS๋กœ ์ปดํŒŒ์ผ ์‹œ์ผœ์ฃผ๋Š” ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์ž…๋‹ˆ๋‹ค. ๋‹ค์šด ๋ชจ๋‘ ๋ฐ›์œผ์…จ๋‚˜์š”? ๊ทธ๋Ÿผ ๋‹ค์Œ์˜ ๋ฐฉ๋ฒ•๊ณผ ํ•จ๊ป˜ ์ฐจ๊ทผ์ฐจ๊ทผ ์ ์šฉ์‹œ์ผœ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค~! 1. ๋จผ์ € cmd + โ‡ง + p ๋˜๋Š” F1์„ ๋ˆŒ๋Ÿฌ์„œ 'json'์„ ๊ฒ€์ƒ‰ํ•œ ํ›„ 'settings.json'์— ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค. (๋“ค์–ด๊ฐ€๋Š” ๋ฐฉ๋ฒ•์€ ์ง€๋‚œ ์—๋Ÿฌ ์†”๋ฃจ์…˜์„ ์ฐธ๊ณ ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค~! ) 2. ๊ทธ ๋‹ค์Œ ๋‹ค์Œ์˜ ์ฝ”๋“œ๋ฅผ ์ค‘๊ด„ํ˜ธ ์•ˆ์— ๋„ฃ์–ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. "l.. 2022. 9. 19.
[ERROR] VSCODE : ๋งฅ๋ถ Prettier ์„ค์ • ์˜ค๋ฅ˜ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• (+์œˆ๋„์šฐ) ์•ˆ๋…•ํ•˜์„ธ์š”! ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” vscode ํ™•์žฅํŒฉ ์ค‘ ์ฝ”๋“œ ์ •๋ ฌ์„ ์ž๋™์œผ๋กœ ์„ค์ •ํ•ด์ฃผ๋Š” Prettier ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๐Ÿง 1. ๋จผ์ € vscode์—์„œ ์•„๋ž˜์˜ ํ™•์žฅํŒฉ์„ ์„ค์น˜ํ•ด์ฃผ์„ธ์š”! 2. ์„ค์น˜๊ฐ€ ๋๋‚œ ํ›„ ์˜ค๋ฅธ์ชฝ ํ•˜๋‹จ ์„ค์ •(settings)์— ๋“ค์–ด๊ฐ€์„œ 'editor format on save'๋ฅผ ๊ฒ€์ƒ‰ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ ํ™”๋ฉด์— ๋‚˜์˜ค๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ์ฒดํฌ๋ฐ•์Šค๋ฅผ ํด๋ฆญํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๊ทธ ๋‹ค์Œ ์ •๋ ฌ์ด ๋˜๋Š” ์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด html ์•„๋ฌด ๋ฌธ์„œ๋กœ ๋“ค์–ด๊ฐ€ cmd + s (์œˆ๋„์šฐ ์—์„œ๋Š” ctrl + s)๋ฅผ ๋ˆŒ๋Ÿฌ์ค๋‹ˆ๋‹ค. ์ •๋ ฌ์ด ์ž๋™์œผ๋กœ ๋œ๋‹ค๋ฉด ์™„๋ฃŒ์ž…๋‹ˆ๋‹ค๐Ÿ‘ ๐Ÿ’ก ๋งŒ์•ฝ ์ฒดํฌ๋ฅผ ํ•ด๋„ ์‹คํ–‰์ด ๋˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ! ์–ด๋ผ๋ผ? ์ฒดํฌํ•˜๊ณ  ๋‹ค์‹œ ๊ป๋‹ค ์ผœ๋„ ์‹คํ–‰์ด ๋˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ์—๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€์ ์œผ๋กœ ์ž…๋ ฅํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. 1. ๋จผ์ €.. 2022. 9. 5.
728x90
๋ฐ˜์‘ํ˜•

Lucky Charms Rainbow
js
html
css