如何阻止更漂亮地在 VS Code 中切换 vue 插值

Posted 2023-02-22

【中文标题】如何阻止更漂亮地在 VS Code 中切换 vue 插值

【英文标题】：How to stop prettier from toggling vue interpolation in VS Code

【发布时间】：2019-07-25 22:24:32

【问题描述】：

我正在使用 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'
  

【参考方案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

【讨论】：

那么如果你有editor.formatOnSave: false，当你保存时它不再修复你的文件了吗？我想知道我是否有类似的问题，但在我的情况下，它是在保存时格式化，但是在提供应用程序时我仍然会收到更漂亮的警告。

@redOctober13 是的，这些设置使它在保存时仅使用 eslint 格式化