[Vue.js] Prettier ์„ค์น˜

Prettier ์„ค์น˜

vue ํŒŒ์ผ์„ ์ฒ˜์Œ visual studio code์—์„œ ์ž‘์„ฑํ•œ๋‹ค๋ฉด,
๋“ค์—ฌ์“ฐ๊ธฐ๊ฐ€ ์ฝ”๋“œ์˜ ๊ตฌ์กฐ๋Œ€๋กœ ์ž๋™์œผ๋กœ ๋“ค์–ด๊ฐ€์ง€ ์•Š์•„์„œ ์ƒ๋‹นํžˆ ๋ถˆํŽธํ•˜๋‹ค.
์ž‘์„ฑํ•œ vue ํŒŒ์ผ์„ ์ €์žฅํ•œ ์ˆœ๊ฐ„ ๋ฐ”๋กœ ๋“ค์—ฌ์“ฐ๊ธฐ๋กœ ์ •๋ฆฌํ•ด์ค„ ์ˆ˜ ์žˆ๊ฒŒ Prettier๋ฅผ ์„ค์น˜ํ•˜๊ณ  ์ ์šฉํ•ด์•ผํ•œ๋‹ค.

๋งˆ์ผ“ํ”Œ๋ ˆ์ด์Šค์—์„œ Prettier ์„ค์น˜

visual studio code ์ขŒ์ธก์—์„œ EXTENSIONS:๋งˆ์ผ“ํ”Œ๋ ˆ์ด์Šค๋ฅผ ๋ˆŒ๋Ÿฌ์„œ Prettier๋ฅผ ์„ค์น˜ํ•ด์ค€๋‹ค.

Prettier

settings.json์— Prettier ์ ์šฉํ•˜๊ธฐ

visual studio code์˜ ์„ค์ •(ctrl + ,)์œผ๋กœ ๋“ค์–ด๊ฐ€์„œ
์šฐ์ธก ์ƒ๋‹จ์˜ ๋ฌธ์„œ ๋ชจ์–‘์„ ํด๋ฆญํ•˜๋ฉด settings.json์„ ์—ด ์ˆ˜ ์žˆ๋‹ค.


์šฐ์ธก ์ƒ๋‹จ ์„ค์ • ์—ด๊ธฐ

์ด ํŒŒ์ผ์˜ ๊ฐ€์žฅ ์•„๋ž˜ ์ด ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•ด์ค€๋‹ค.

    "editor.formatOnSave": true,
    "editor.formatOnType": true

์˜ˆ๋ฅผ๋“ค์–ด, ํ˜„์žฌ ์‚ฌ์šฉ์ค‘์ธ vsCode์˜ setting.json์— ์ถ”๊ฐ€ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ๋œ๋‹ค.

{
    "editor.fontFamily": "D2Coding ligature, Consolas, 'Courier New', monospace",
    "terminal.integrated.rendererType": "dom",
    "workbench.iconTheme": "material-icon-theme",
    "git.autofetch": true,
    "search.location": "panel",
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "gitlens.advanced.fileHistoryFollowsRenames": false,
    "editor.wordWrap": "on",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "java.configuration.checkProjectSettingsExclusions": false,
    "window.zoomLevel": 0,
    "editor.formatOnSave": true,
    "editor.formatOnType": true
}

setting.json

์ด ํ›„ vue ํŒŒ์ผ์„ ์ˆ˜์ •ํ•˜๊ณ  ์ €์žฅํ•˜๋ฉด, Prettier์— ์˜ํ•ด ์ž๋™์œผ๋กœ ๋“ค์—ฌ์“ฐ๊ธฐ๊ฐ€ ๋œ๋‹ค.