VS Code - 서식 확장이 필요하지 않습니다(Prettier와 친구들)

이전 게시물VS Code: You don't need that extension part 2에서 코드 형식을 (예쁘게) 지정하기 위해 확장이 필요하지 않은 방법에 대해 설명했습니다(항목 5 참조). 여러 언어에 대해 기본 제공 포맷터를 사용할 수 있습니다. 그런데 그 때 내가 해준 충고에는 약간의 주의가 따랐다.

VS Code에는 HTML, JavaScript, TypeScript 및 JSON용 기본 포맷터가 있습니다. 이것은 프론트엔드 개발자와 JavaScript 지향 백엔드 개발자에게 적절한 기반입니다. 그러나 CSS 및 CSS와 유사한 구문은 없었습니다. 제 생각에는 큰 누락입니다!

이것은 v1.66 (March 2022)에서 수정되었습니다. 기본 제공 CSS 확장은 이제 포맷터와 함께 제공됩니다. 포맷터는 CSS, LESS 및 SCSS와 함께 작동합니다. JS Beautify library을 사용하여 구현됩니다. 🌟

내장 포맷터가 있는 언어 설정

내장 포맷터를 사용하려면 Settings.json에 다음 설정을 추가할 수 있습니다.

"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript][javascriptreact][typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json][jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
},
"[css][scss][less]": {
    "editor.defaultFormatter": "vscode.css-language-features"
}

이것은 2021년 11월에 the multi-language syntax that was added in v1.63.2을 사용하고 있습니다.

VS Code는 JS Beautify library 확장 프로그램에서도 사용되는 내부적으로 Beautify을 사용하므로 해당 확장 프로그램과 유사한 결과를 기대할 수 있습니다. 이것은 당신의 취향에 맞을 수도 있고 아닐 수도 있지만, 견고한 작업을 수행합니다.

마일리지는 JSONC의 형식에 따라 다를 수 있으며 JSON 언어 기능 확장에 "불법"댓글을 처리하도록 요청하고 있지만 문제 없이 관리하는 것으로 보입니다. 나는 React를 사용하지 않기 때문에 React 코드가 얼마나 잘 포맷되었는지 언급할 수 없습니다.

CSS, LESS 및 SCSS의 형식을 제어하기 위해 추가된 설정

다음 설정을 사용하여 서식 지정 방법을 구성합니다.

css.format.enable - 기본 CSS 포맷터를 활성화/비활성화합니다.

css.format.newlineBetweenRules - 규칙 집합을 빈 줄로 구분합니다.

css.format.newlineBetweenSelectors - 선택자를 새 줄로 구분합니다.

css.format.spaceAroundSelectorSeparator - 선택기 구분 기호 '>', '+', '~' 주위에 공백 문자가 있어야 합니다(예: a > b ).

Less 및 SCSS에도 동일한 설정이 있습니다. 나중에 JSBeautify의 구성 옵션이 더 많이 노출될 수 있습니다. 우리는 볼 것 같아요!

최종 단어

프런트엔드 개발자와 JavaScript 지향 백엔드 개발자의 경우 내장 포맷터를 지금 다루어야 합니다. 출력에 만족하는 한 다른 서식 확장이 필요하지 않을 수 있습니다.

그리고 이후 많은 언어 지원 확장 프로그램도 포맷터입니다. Python , Language Support for Java by Red Hat , Ruby , YAML , XML Tools , Vetur Vue 및 Svelte for VS Code . 이제 전용 포맷터 확장 프로그램을 사용하지 않는 것이 그 어느 때보다 쉬워졌습니다! 🆒


언제든지 내RSS feed를 구독하고 이 기사를 소셜 미디어에서 다른 사람들과 공유하세요. 💌

buying me a coffee on ko-fi 로 감사를 표시할 수 있습니다. 🙂