如何阻止 prettier 在 VS Code 中切换 vue 插值

Question

我正在使用 Visual Studio 更漂亮的 vue 代码，它弄乱了我的插值。每次我保存它时，它都会在将花括号放在带有内容的新行上，或者将它们留在带有标签的行上并且只将内容放在新行上之间切换。

有一段时间他们会一致交换，所以我只需要在提交版本控制之前确保它处于正确的状态。现在，这两个处于相反的周期，因此其中一个总是错误的。

（我正在使用 Bootstrap-Vue 和 i18n 本地化）

保存 1

<b-col>
  <b-button type="button" v-on:click="done()">
    {{ $t('Done') }}
  </b-button>
</b-col>
<b-col>
  <b-button type="button" v-on:click="cannotComplete()">{{
    $t('CannotComplete')
  }}</b-button>
</b-col>

保存 2

<b-row>
  <b-col>
    <b-button type="button" v-on:click="done()">{{
      $t('Done')
    }}</b-button>
  </b-col>
  <b-col>
    <b-button type="button" v-on:click="cannotComplete()">
      {{ $t('CannotComplete') }}
    </b-button>
  </b-col>
</b-row>

更漂亮的配置

module.exports = {
  singleQuote: true,
  semi: false
}

eslintConfig

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'plugin:prettier/recommended',
    '@vue/prettier',
    'prettier'
  ],
  plugins: ['prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': ['error']
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

Answer 1

这个问题一定与冲突的格式化程序有关。我删除了 Prettier 插件并更改了一些 Visual Studio 代码设置。

VS 代码设置：

{
  ...
  "editor.formatOnSave": false,
  "javascript.format.enable": false,
  "eslint.autoFixOnSave": true
  ...
}

eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

如何阻止 prettier 在 VS Code 中切换 vue 插值

How to stop prettier from toggling vue interpolation in VS Code

eslint

vue.js

visual-studio-code

vscode-settings

prettier