Prettier formatting a Vue component when I don't want it to

Question

I've got Prettier configured to format on save.

I'm using a Vue component I got from npm to display data from an API.

<ExampleComponent 
    :aDynamicProp="foo"
    dataset="bar"
/>

The prop dataset is required by the component.

The issue is Prettier wants to change dataset to data-set every time I save. I imagine because it thinks i'm trying to create a HTML data attribute.

As per Prettier docs i've tried adding  above the component but this doesn't seem to work (perhaps because I'm triggering formatting on save, or because it's a Vue template and not HTML?).

Can anyone shed light as to how I can force Prettier to ignore the prop?

Many thanks!

if you add colon `:` like this to `:dataset` then still the prettier does the change `:data-set`? — Syed, Aug 25 '20 at 19:12
I can't reproduce the issue in my project, which has Prettier enabled. Why do you think it's Prettier? Can you link to a GitHub repo that exhibits this problem? — tony19, Aug 26 '20 at 03:30
@tony19 I don't have any other formatter install. Sorry can't share the repo — bjurtown, Aug 26 '20 at 14:03
@Syed it didn't format it. As a work-around I'll use the semi-colon to refer to the string in the data, it's better than turning prettier off! Thank you — bjurtown, Aug 26 '20 at 14:05
@bjurtown glad that this trick helped you, I have added it as my answer so pls don't forget to upvote and accept the answer :) — Syed, Aug 26 '20 at 23:50
you could turn prettier off on save too https://stackoverflow.com/questions/50261161/how-do-i-stop-prettier-from-formatting-html-files — Jujubes, Aug 26 '20 at 23:55

score 1 · Accepted Answer · answered Aug 26 '20 at 23:49

Add colon : to :dataset and that should do the trick, if it's just static string that's doing inside dataset then do :dataset="`my string`" with backtick (`). If you are getting data from data(){}, computed or from methods as mentioned below then just do :dataset="yourData":

export default {
  data() {
    return {
      yourData: 'Your String'
    }
  },
  // or
  computed: {
    yourData() {
      return 'Your String'
    },
  },
  // or
  methods: {
    yourData() {
      return 'Your String'
    },
  },
};

Prettier formatting a Vue component when I don't want it to

1 Answers1