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์ ์ํด ์๋์ผ๋ก ๋ค์ฌ์ฐ๊ธฐ๊ฐ ๋๋ค.