How to stop prettier from toggling vue interpolation in VS Code

Question

I am using Visual Studio Code with prettier for vue, and it is messing up my interpolations. Every time that I save it switches between having the curly braces on the new line with the content, or leaving them on the line with the tags and only putting the content on the new line.

For a while they would swap in unison, so I would just have to make sure it was in the correct state before committing to version control. Now, these two are on opposite cycles and therefore one of them is always wrong.

(I am using Bootstrap-Vue and i18n localization)

Save 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>

Save 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>

Prettier Config

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

The issue must have been something to do with conflicting formaters. I removed the Prettier plugin and changed some Visual Studio Code settings.

VS Code Settings:

{
  ...
  "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'
  }
}

Relevant SO Post