小编Tim*_*tus的帖子

我正在使用 VScode 使用 Prettier 和 Eslint 进行 Vue 开发。

目前，Prettier 正在格式化我的代码，如下所示：

我想要的是强制执行以下操作

如果我手动将其更改为我想要的格式，它不会将其标记为不正确，但默认情况下它也不会执行此格式。

有没有办法默认实现这一点？

我的相关VScode Settings.json

"prettier.disableLanguages": ["json"],
  "[scss, css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.validation.template": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "html.format.wrapAttributes": "force-aligned",
  "sync.gist": "30b867ce7d7d1360ee7bad0cf5599fc3",
  "sync.autoDownload": true,
  "sync.autoUpload": true,
  "sync.forceUpload": false,
  "sync.removeExtensions": false,
  "sync.quietSync": true,
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },

我的.prettierrc设置

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

我的eslintrc.js设置

extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier/vue',
    'plugin:prettier/recommended'
  ], …

我目前有一个v-for根据名称值数组创建组件列表的组件。根据检查step === 'name'，我将显示相关组件。此方法要求我用 a 列出每个可能的组件，v-if并且我认为应该有一种更简洁的方法来实现此目的。

    <div v-for="(step, idx) in steps" :key="idx">
      <div v-if="step === 'url'">
        <Goto @removeStep="removeStep(idx)" />
      </div>
      <div v-if="step === 'click'">
        <Click @removeStep="removeStep(idx)" />
      </div>
      <div v-if="step === 'search'">
        <Search @removeStep="removeStep(idx)" />
      </div>
      ...
    </div>

我宁愿直接在 for 循环中插入组件。

例如，类似...

 <div v-for="(step, idx) in steps" :key="idx">
   <[step.component] @removeStep="removeStep(idx)" :title="step.title" />
 </div>

我的动态组件数组将如下所示：

steps: [
 {
  component: 'Goto',
  title: 'Go to Url'
 },
 {
  component: 'Click',
  title: 'Click Something'
 }
]

我不想将所有组件选项放在单个文件组件中，并且希望它们像我目前一样保留为单独的组件。

我可以使用某种形式的插值或计算的道具来完成上述任务吗？