[Svelte] svelte 프로젝트에 prettier 세팅하기

한 줄 요약: Node를 설치할 때 LTS 버전을 권장하는 이유를 알았다 ^^^!

 

prettier 설치 이후에 svelte 파일만 적용이 안되는 현상이 일어났다. 찾아보니 공식 문서나 git, 구글링 등에서 세팅하는 방법이 다 달랐다. 그리고 svlete 자체가 정보가 많이 없었고, webstorm이나 패키지 자체에서 해결되지 않은 이슈들도 꽤 있어 보였다. 모든 방법 다 해봐도 안돼서 포기하려던 찰나에 무언가를 발견했다.

 

prettier-plugin-svelte의 설치 버전은 2.10.0인데, 해당 패키지 Git Repository에서의 태그는 2.7까지밖에 안나왔었다. 또한 prettier 버전은 3이었는데, last week에 출시된 버전이길래 안전하게 2 버전대로 다운그레이드하였다. 이전 버전들로 바꿔서 재설치하니까 바로 적용이 되었다.. 😇 버전간에 호환이 잘 안되서 발생한 문제같았다.

 

---

패키지 설치하기

스벨트와 프리티어를 함께 사용하기 위해서는 추가로 패키지 설치가 필요하다.

나는 하단의 버전들로 설치를 하였다. tailwind css도 사용하려고 함께 깔아주었지만, 쓰지 않는다면 위의 2개만 설치하면 된다.

 

• prettier@2.8.8
• prettier-plugin-svelte@2.7
• prettier-plugin-tailwindcss

npm i -D prettier@2.8.8 prettier-plugin-svelte@2.7 prettier-plugin-tailwindcss

 

.prettierrc

원하는 옵션으로 입력해 주면 된다.

대신에 필수로 작성해야 할 부분은 "plugins"이다!

어떤 글보면 overrides로 작성해야 하는 부분도 있는데, 플러그인을 작성해주면 필요가 없다.

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 4,
  "printWidth": 200,
  "plugins": [
    "prettier-plugin-svelte",
    "prettier-plugin-tailwindcss"
  ],
  "svelteSortOrder": "options-scripts-styles-markup"
}

스벨트와 관련된 속성을 알고 싶다면 아래의 링크에서 확인할 수 있다.

https://www.npmjs.com/package/prettier-plugin-svelte

prettier-plugin-svelte

 

.prettierignore

prettier에서 제외될 부분을 지정한다.

난 간단하게 아래의 내용만 넣었다.

node_modules/
package-lock.json

*.html

 

webstorm 설정

settings > Languanges & Frameworks > JavaScript > Prettier

svelte 파일까지 추가해 줘야 적용이 된다.

 

전체 파일 적용

모든 세팅이 완료되었다면, 아래의 명령어를 통해 그동안 작성한 파일들에게 Prettier 적용을 해주자.

npx prettier ./src --write

그러면 지정한 속성대로 파일들이 변경될 것이다!

 

이렇게 해서 몇 시간에 걸쳐 헤맸던 svelte와 prettier의 세팅이 완료되었다 !!

 

 

https://prettier.io/docs/en/install.html

Prettier · Opinionated Code Formatter

 

https://youtrack.jetbrains.com/issue/WEB-46030/Prettier-plugin-does-not-format-.svelte-files-even-when-configured-to-do-so

Prettier plugin does not format *.svelte files, even when configured to do so : WEB-46030