Astro Prettier 설정하기

[devdeun]

설치

npm install --save-dev prettier prettier-plugin-astro

.prettierrc.mjs 파일 추가

/** @type {import("prettier").Config} */
export default {
  // prettier 규칙 작성

  plugins: ['prettier-plugin-astro'],
  overrides: [
    {
      files: '*.astro',
      options: {
        parser: 'astro',
      },
    },
  ],
};

실행

npx prettier . --write

자동 포맷팅 설정

• 전역 설정: 설정(Cmd + ,)의 settings.json 파일에 추가
• 지역 설정: .vscode/settings.json 파일에 추가

(바로 적용 안되면 vscode 새로고침 해보기)

{
  "prettier.documentSelectors": ["**/*.astro"],
  "[astro]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

참고자료

• https://docs.astro.build/en/editor-setup/