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'
  }
}

brenthompson2 · Accepted Answer · 2019-03-04T16:09:38.577

0

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

edited Mar 04 '19 at 16:09

answered Mar 04 '19 at 16:02

brenthompson2

391
3
9

So if you have `editor.formatOnSave: false`, does it no longer fix your files when you save? I'm wondering if I'm having a similar issue, but in my case it's formatting on save, but then I still get prettier warnings when serving the app. – redOctober13 Mar 28 '19 at 12:17
@redOctober13 Yes, these settings make it format on save using only eslint – brenthompson2 Mar 28 '19 at 12:20

How to stop prettier from toggling vue interpolation in VS Code

1 Answers1