임베디드 포맷팅

JS/TS 파일 안에 들어 있는 코드(CSS 템플릿 리터럴, GraphQL 템플릿 리터럴 등)와 Markdown 속 JavaScript/CSS 등을 포맷합니다.

설정

.oxfmtrc.json

{
  "embeddedLanguageFormatting": "auto"
}

oxfmt.config.ts

import { defineConfig } from "oxfmt";

export default defineConfig({
  embeddedLanguageFormatting: "auto",
});

값

• "auto" — (기본값) 임베디드 구간 포맷
• "off" — 임베디드 포맷 건너뜀

예시

태그된 템플릿 리터럴 속 CSS:

const styles = css`
  .container {
    background: blue;
    color: ${theme.color};
  }
`;

styled-components:

const Button = styled.button`
  background: ${(props) => props.primary};
  color: white;
`;

styled JSX:

<style jsx>{`
  .container {
    background: blue;
    color: red;
  }
`}</style>

태그된 템플릿 리터럴 속 GraphQL:

const query = gql`
  query {
    user {
      id
      name
    }
  }
`;

const query2 = graphql(`
  query {
    user {
      id
      name
    }
  }
  ${fragments.all}
`);

태그된 템플릿 리터럴 속 HTML:

const template = html`
  <div class="container">
    <h1>Hello</h1>
    <p>${world}</p>
  </div>
`;

Markdown 파일 속 JavaScript 코드 블록:

This is an example Markdown file with JavaScript code blocks:

```js
const x = 1; // This will be formatted if embedded formatting is enabled.
```

Wow!

Vue 파일 속 JavaScript와 CSS:

<script setup>
import { ref } from "vue";
import MyComponent from "./MyComponent.vue";
</script>

<style>
.container {
  background: blue;
  color: red;
}
</style>