Svelte 개발 환경에 Prettier 설정 더하기 (prettier-plugin-svelte)

작성 : 2023-10-30수정 : 2023-11-02

목차 펼치기

머리말

Svelte Framework에서 Svelte 파일은

.svelte

라는 확장자를 사용하고 있어 Prettier가 기본적으로 동작하지 않는다. 이를 위해선 별도의 플러그인을 설치해주어야 한다.

VS Code의 플러그인 중 ‘

’를 설치하면, VSCode 에디터 내에서 기본적으로 prettier를 적용할 수 있다.

formatOnSave

설정이 켜져 있다면 이제 파일을 저장할 때 Prettier가 동작하게 된다.

하지만 CLI를 통한 포맷팅은 지원이 되지 않기 때문에, 에디터에서 일일이 파일을 열어서 저장을 하거나 해야 하는 문제가 있다.

플러그인을 사용하면 이 문제도 해결할 수 있다.

사실 ‘Svelte for VS Code’ 플러그인이 제공하는 Prettier 포맷팅은 이 플러그인을 내장하고 있기 때문에 그렇다. 그러니 VS Code가 아닌 다른 IDE 환경에서도 이 플러그인을 설치하는 것으로 해결될 것 같다.

설정은 굉장히 간단하다.

prettier 설정에 플러그인을 추가한다.

json

1{
2    "plugins": ["prettier-plugin-svelte"]
3}

이제 svelte 파일에 대해서도 prettier CLI를 통한 명령이 수행된다!

Svelte 진영에서는 여러가지 툴을 기본적으로 제공하고 있고, 위에서 소개한 VS Code 플러그인인

svelte-vscode

도 그 중의 하나다. Svelte 파일을

.tsx

파일로 변경해주는

svelte2tsx

, Svelte 파일 오류 등을 검사해주는

svelte-check

등이 있다.