Vue HTML 中的错误格式

Question

我从 Vue 开始，我已经配置 ESLint 和 Prettier 以使用我自己的风格格式化代码，但它没有按预期工作。当我想在模板中打印一个变量时，VS Code 中的格式化程序会做一些奇怪的事情（我附上一些代码）

我希望为 msg 保持这种格式（它是一个字符串）

<template>
    <div class="test">
        <ul>
            {{ msg }}
        </ul>
    </div>
</template>

但我得到了这个（格式化程序在 msg 行中插入 2 个换行符）

<template>
    <div class="test">
        <ul>
            {{
                msg
            }}
        </ul>
    </div>
</template>

我使用更漂亮的 (.prettierrc.json)

{
    "useTabs": true,
    "tabWidth": 2,
    "endOfLine": "lf",
    "arrowParens": "always",
    "semi": true,
    "singleQuote": true,
    "trailingComma": "none",
    "htmlWhitespaceSensitivity": "ignore"
}

和 ESLint (.eslintrc.js)

module.exports = {
    env: {
        browser: true,
        es6: true,
        node: true
    },
    extends: ['plugin:vue/essential', 'standard', 'prettier'],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly'
    },
    parserOptions: {
        ecmaVersion: '2020',
        sourceType: 'module'
    },
    plugins: ['vue']
};

我已尝试禁用 VS Code 中的格式设置，但无法解决此问题。

有人知道我该如何解决这个“问题”吗？

Answer 1

对我来说最好只使用 ESlint ，您可以在下面找到我的配置

module.exports = {
    env: {
        'browser': true,
        'es6': true,
        'node': true
    },
    parserOptions: {
        'parser': 'babel-eslint'
    },
    extends: [
        '@vue/standard',
        'plugin:vue/recommended'
    ],
    rules: {
        "vue/html-indent": ["error", 4, {
            "attribute": 1,
            "closeBracket": 0,
            "switchCase": 0,
            "ignores": []
        }],

        "vue/max-attributes-per-line": [2, {
            "singleline": 10,
            "multiline": {
              "max": 1,
              "allowFirstLine": false
            }
          }],
        'indent': ['error', 4],
        'vue/component-name-in-template-casing': ['error', 'kebab-case'],
        'vue/script-indent': [
            'error',
            4,
            { 'baseIndent': 1 }
        ],
        'space-before-function-paren': ['error', 'never'],
        'semi': [2, "never"],
        'vue/singleline-html-element-content-newline': 'off',
        'vue/multiline-html-element-content-newline': 'off'
    },
    overrides: [
        {
            'files': ['*.vue'],
            'rules': {
                'indent': 'off'
            }
        }
    ]
}

很多时间更漂亮会破坏您的 eslint 格式并且您会遇到问题，最好使用一个视觉修复程序配置您的程序。尝试使用我给你的 eslint 格式和更漂亮的禁用格式，并告诉我问题是否仍然存在！