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

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

목차 펼치기

머리말

Svelte Framework에서 Svelte 파일은

.svelte

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


VS Code Plugin

VS Code의 플러그인 중 ‘

Svelte for VS Code

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

formatOnSave

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


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

prettier-plugin-svelte

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


prettier-plugin-svelte

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


prettier-plugin-svelte

설정은 굉장히 간단하다.


적용방법

  1. 플러그인을 설치한다.

    yarn add -D prettier-plugin-svelte
  2. prettier 설정에 플러그인을 추가한다.

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

    커맨드에 플러그인 옵션을 추가한다.

    1. 만약

      /src

      디렉토리 내부 파일들에 대해서만 하고 싶다면

      .

      이 아닌

      ./src*

      을 설정하면 된다.

    json
    1"format": "prettier --write --plugin prettier-plugin-svelte ."
  4. yarn format

    명령을 실행한다.


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



같이 읽어보면 좋은

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

svelte-vscode

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

.tsx

파일로 변경해주는

svelte2tsx

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

svelte-check

등이 있다.

Contact Me

All Icons byiconiFy