Question

我正在将Visual Studio Code与更漂亮的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 Code设置。

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

Relevant SO Post

如何在VS Code中停止更漂亮的切换vue插值

1 个答案: