feat(oxfmt): options.embeddedLanguageFormatting is now "auto" by default

apps/oxfmt/src-js/cli/migration/migrate-prettier.ts

@@ -93,8 +93,7 @@ export async function runMigratePrettier() {
     );
     oxfmtrc.printWidth = 80;
   }
-  // `embeddedLanguageFormatting` is not fully supported yet and default "off" in Oxfmt.
-  // Prettier default is "auto".
+  // `embeddedLanguageFormatting` is not fully supported for JS-in-XXX yet.
   if (oxfmtrc.embeddedLanguageFormatting !== "off") {
     console.error(`  - "embeddedLanguageFormatting" in JS/TS files is not fully supported yet`);
   }

apps/oxfmt/test/__snapshots__/embedded_languages.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`embedded_languages > should format embedded languages (CSS, GraphQL, HTML, Markdown) 1`] = `
+exports[`embedded_languages > should format embedded languages by default 1`] = `
 "--- FILE -----------
 embedded_languages.js
 --- BEFORE ---------
@@ -304,7 +304,7 @@ const sql = sql\`
 --------------------"
 `;
 
-exports[`embedded_languages > should not format embedded languages by default (at alpha release) 1`] = `
+exports[`embedded_languages > should format embedded languages when embeddedLanguageFormatting is auto 1`] = `
 "--- FILE -----------
 embedded_languages.js
 --- BEFORE ---------
@@ -427,52 +427,108 @@ const sql = sql\`
 // CSS - Tagged template literals with css and styled tags
 // ============================================================================
 
-const styles = css\`.button{color:red;background:blue;padding:10px 20px;}.container{display:flex;justify-content:center;}\`;
+const styles = css\`
+  .button {
+    color: red;
+    background: blue;
+    padding: 10px 20px;
+  }
+  .container {
+    display: flex;
+    justify-content: center;
+  }
+\`;
 
-const styledComponent = styled\`background-color:#ffffff;border-radius:4px;padding:8px;\`;
+const styledComponent = styled\`
+  background-color: #ffffff;
+  border-radius: 4px;
+  padding: 8px;
+\`;
 
 // ============================================================================
 // GraphQL - Tagged template literals with gql and graphql tags
 // ============================================================================
 
-const query = gql\`query GetUser($id:ID!){user(id:$id){name email posts{title}}}\`;
+const query = gql\`
+  query GetUser($id: ID!) {
+    user(id: $id) {
+      name
+      email
+      posts {
+        title
+      }
+    }
+  }
+\`;
 
-const mutation = graphql\`mutation CreatePost($input:PostInput!){createPost(input:$input){id title}}\`;
+const mutation = graphql\`
+  mutation CreatePost($input: PostInput!) {
+    createPost(input: $input) {
+      id
+      title
+    }
+  }
+\`;
 
 // ============================================================================
 // HTML - Tagged template literals with html tag
 // ============================================================================
 
-const template = html\`<div class="container"><h1>Hello World</h1><p>This is a paragraph with <strong>bold</strong> text.</p></div>\`;
+const template = html\`
+  <div class="container">
+    <h1>Hello World</h1>
+    <p>This is a paragraph with <strong>bold</strong> text.</p>
+  </div>
+\`;
 
-const component = html\`<button type="button" onclick="handleClick()">Click me</button>\`;
+const component = html\`
+  <button type="button" onclick="handleClick()">Click me</button>
+\`;
 
 // ============================================================================
 // Markdown - Tagged template literals with md and markdown tags
 // ============================================================================
 
-const documentation = md\`#Heading
-This is **bold** and this is _italic_.
--Item 1
--Item 2\`;
+const documentation = md\`
+  #Heading
+  This is **bold** and this is _italic_.
+  -Item 1
+  -Item 2
+\`;
 
-const readme = markdown\`##Installation
-\\\`\\\`\\\`bash
-npm install package
-\\\`\\\`\\\`\`;
+const readme = markdown\`
+  ##Installation
+  \\\`\\\`\\\`bash
+  npm install package
+  \\\`\\\`\\\`
+\`;
 
 // ============================================================================
 // Mixed - Multiple embedded languages in one file
 // ============================================================================
 
-const mixedStyles = css\`.button{color:red;}\`;
+const mixedStyles = css\`
+  .button {
+    color: red;
+  }
+\`;
 
-const mixedQuery = gql\`query{users{name}}\`;
+const mixedQuery = gql\`
+  query {
+    users {
+      name
+    }
+  }
+\`;
 
-const mixedTemplate = html\`<div><h1>Title</h1></div>\`;
+const mixedTemplate = html\`
+  <div><h1>Title</h1></div>
+\`;
 
-const mixedDocs = md\`#Documentation
-This is **important**.\`;
+const mixedDocs = md\`
+  #Documentation
+  This is **important**.
+\`;
 
 // ============================================================================
 // No Embedded Languages - Regular JavaScript (no tagged templates)
@@ -497,12 +553,24 @@ class Formatter {
 // prettier-ignore
 const unformatted = css\`.button{color:red;background:blue;border:1px solid green;}\`;
 
-const formattedCss = css\`.container{display:flex;align-items:center;}\`;
+const formattedCss = css\`
+  .container {
+    display: flex;
+    align-items: center;
+  }
+\`;
 
 // prettier-ignore
 const ignoredGql = gql\`query GetUser($id:ID!){user(id:$id){name email}}\`;
 
-const normalGql = gql\`query GetPosts{posts{title author}}\`;
+const normalGql = gql\`
+  query GetPosts {
+    posts {
+      title
+      author
+    }
+  }
+\`;
 
 // ============================================================================
 // Unsupported Tags - Tags not recognized by the formatter

apps/oxfmt/test/api.test.ts

@@ -64,7 +64,9 @@ describe("API Tests", () => {
       `
 <template><div>Vue</div></template>
 <style>
-  div{color:red;}
+  div {
+    color: red;
+  }
 </style>
 `.trimStart(),
     );

apps/oxfmt/test/embedded_languages.test.ts

@@ -5,7 +5,12 @@ import { runWriteModeAndSnapshot } from "./utils";
 const fixturesDir = join(__dirname, "fixtures", "embedded_languages");
 
 describe("embedded_languages", () => {
-  it("should format embedded languages (CSS, GraphQL, HTML, Markdown)", async () => {
+  it("should format embedded languages by default", async () => {
+    const snapshot = await runWriteModeAndSnapshot(fixturesDir, ["embedded_languages.js"]);
+    expect(snapshot).toMatchSnapshot();
+  });
+
+  it("should format embedded languages when embeddedLanguageFormatting is auto", async () => {
     const snapshot = await runWriteModeAndSnapshot(
       fixturesDir,
       ["embedded_languages.js"],
@@ -22,9 +27,4 @@ describe("embedded_languages", () => {
     );
     expect(snapshot).toMatchSnapshot();
   });
-
-  it("should not format embedded languages by default (at alpha release)", async () => {
-    const snapshot = await runWriteModeAndSnapshot(fixturesDir, ["embedded_languages.js"]);
-    expect(snapshot).toMatchSnapshot();
-  });
 });

crates/oxc_formatter/src/options.rs

@@ -947,10 +947,9 @@ impl fmt::Display for OperatorPosition {
 #[derive(Clone, Copy, Debug, Default, Eq, Hash, PartialEq)]
 pub enum EmbeddedLanguageFormatting {
     /// Enable formatting for embedded languages.
+    #[default]
     Auto,
-    // Disable by default at alpha release, synced with `oxfmtrc.rs`
     /// Disable formatting for embedded languages.
-    #[default]
     Off,
 }
 

crates/oxc_formatter/src/oxfmtrc.rs

@@ -80,7 +80,8 @@ pub struct Oxfmtrc {
     #[schemars(skip)]
     pub experimental_ternaries: Option<bool>,
 
-    /// Control whether to format embedded parts in the file. (Default: `"off"`)
+    /// Control whether to format embedded parts in the file.
+    /// e.g. JS-in-Vue, CSS-in-JS, etc. (Default: `"auto"`)
     #[serde(skip_serializing_if = "Option::is_none")]
     pub embedded_language_formatting: Option<EmbeddedLanguageFormattingConfig>,
 

crates/oxc_formatter/tests/snapshots/schema_json.snap

@@ -183,8 +183,8 @@ expression: json
           "type": "null"
         }
       ],
-      "description": "Control whether to format embedded parts in the file. (Default: `\"off\"`)",
-      "markdownDescription": "Control whether to format embedded parts in the file. (Default: `\"off\"`)"
+      "description": "Control whether to format embedded parts in the file.\ne.g. JS-in-Vue, CSS-in-JS, etc. (Default: `\"auto\"`)",
+      "markdownDescription": "Control whether to format embedded parts in the file.\ne.g. JS-in-Vue, CSS-in-JS, etc. (Default: `\"auto\"`)"
     },
     "endOfLine": {
       "anyOf": [

npm/oxfmt/configuration_schema.json

@@ -179,8 +179,8 @@
           "type": "null"
         }
       ],
-      "description": "Control whether to format embedded parts in the file. (Default: `\"off\"`)",
-      "markdownDescription": "Control whether to format embedded parts in the file. (Default: `\"off\"`)"
+      "description": "Control whether to format embedded parts in the file.\ne.g. JS-in-Vue, CSS-in-JS, etc. (Default: `\"auto\"`)",
+      "markdownDescription": "Control whether to format embedded parts in the file.\ne.g. JS-in-Vue, CSS-in-JS, etc. (Default: `\"auto\"`)"
     },
     "endOfLine": {
       "anyOf": [

tasks/website_formatter/src/snapshots/schema_markdown.snap

@@ -44,7 +44,8 @@ Print spaces between brackets in object literals. (Default: `true`)
 type: `string | null`
 
 
-Control whether to format embedded parts in the file. (Default: `"off"`)
+Control whether to format embedded parts in the file.
+e.g. JS-in-Vue, CSS-in-JS, etc. (Default: `"auto"`)
 
 
 ## endOfLine