当我不希望它时，更漂亮地格式化 Vue 组件答案

【问题标题】：Prettier formatting a Vue component when I don't want it to当我不希望它时，更漂亮地格式化 Vue 组件
【发布时间】：2020-12-14 12:34:30
【问题描述】：

我已将 Prettier 配置为保存时格式化。

我正在使用从 npm 获得的 Vue 组件来显示来自 API 的数据。

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

组件需要 dataset 属性。

问题是 Prettier 每次保存时都想将 dataset 更改为 data-set。我想是因为它认为我正在尝试创建一个 HTML 数据属性。

根据 Prettier 文档，我尝试在组件上方添加 ，但这似乎不起作用（可能是因为我在保存时触发了格式化，或者因为它是 Vue 模板而不是 HTML？）。

谁能解释我如何强迫 Prettier 忽略这个道具？

非常感谢！

【问题讨论】：

如果你将冒号: 像这样添加到:dataset 中，那么:data-set 的变化还是更漂亮？
我无法在启用 Prettier 的项目中重现该问题。为什么你觉得它更漂亮？您能否链接到存在此问题的 GitHub 存储库？
@tony19 我没有安装任何其他格式化程序。抱歉无法分享回购
@Syed 它没有格式化它。作为一种解决方法，我将使用分号来引用数据中的字符串，这比关闭 prettier 更好！谢谢
@bjurtown 很高兴这个技巧对您有所帮助，我已将其添加为我的答案，所以请不要忘记投票并接受答案:)

标签： prettier

【解决方案1】：

将冒号: 添加到:dataset 应该可以解决问题，如果它只是在dataset 中执行的静态字符串，那么使用反引号(`) 执行:dataset="`my string`"。如果您从data(){}、computed 或methods 获取数据，如下所述，那么只需执行:dataset="yourData"：

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

【讨论】：