时间戳

首页 > 解决方案 > 当我不希望它时，更漂亮地格式化一个 Vue 组件

prettier - 当我不希望它时，更漂亮地格式化一个 Vue 组件

问题描述

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

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

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

该道具dataset是组件所必需的。

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

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

谁能阐明我如何迫使 Prettier 忽略道具？

非常感谢！

标签： prettier

解决方案

添加冒号:，:dataset这应该可以解决问题，如果它只是在里面做的静态字符串，dataset那么:dataset="`my string`"用 backtick做(`)。如果您从或从如下所述获取数据data(){}，则只需执行以下操作：computedmethods:dataset="yourData"

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

推荐阅读