Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for Formatting Vue and Svelte Code with dprint_plugin_typescript::format_text #640

Open
c12i opened this issue Jun 12, 2024 · 0 comments

Comments

@c12i
Copy link

c12i commented Jun 12, 2024

I am using dprint_plugin_typescript::format_text to programmatically format generated JavaScript, TypeScript, and jsx/tsx files from my code generation cli. This approach works well for these file types, but I would also like to format generated .vue and .svelte files using a similar method.

When attempting to format vue code, the dprint_plugin_typescript::format_text function does not work as expected. Here's an example:

use dprint_plugin_typescript::configuration::ConfigurationBuilder;
use dprint_plugin_typescript::format_text;
use std::path::Path;

fn format_code(code: &str, file_name: &str) -> String {
    let config = ConfigurationBuilder::new()
        .line_width(120)
        .indent_width(2)
        .build();
    format_text(Path::new(file_name), code.to_owned(), &config)
        .expect("Failed to format text")
        .expect("Nothing to format")
}

fn main() {
    let vue_code = r#"
    <template>
                <div>{{ message }}</div>
    </template>

    <script>
    export default {
      data() {
        return {
          message: 'Hello, Vue!'
        }
      }
    }
    </script>

    <style>
    div {
      color: red;
    }
    </style>
    "#;

    let formatted_vue_code = format_code(vue_code, "temp.ts");
    println!("Formatted Vue code:\n{}", formatted_vue_code);
}

This results in an error:

Unexpected token `{`. Expected identifier, string literal, numeric literal or [ for the computed key at file:///temp.ts:3:23

                  <div>{{ message }}</div>

Is there a way to extend the functionality of format_text to support vue and svelte files? Or would creating a plugin be a viable solution for this use case?

Any help on this would be highly appreciated.

Additional Information:

  • dprint version: 0.66.2
  • dprint_plugin_typescript version: 0.91.1

Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant