配置ESLint+Prettier后Vue模板插值被强制换行如何解决？

修复方案 #

1. 调整Prettier配置 #

在你现有的.prettierrc.json中新增2个配置项，原有配置保持不变：

{
  "useTabs": true,
  "tabWidth": 2,
  "endOfLine": "lf",
  "arrowParens": "always",
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "htmlWhitespaceSensitivity": "ignore",
  // 新增以下两项
  "printWidth": 120,
  "bracketSameLine": true
}

• printWidth 是Prettier判断是否需要换行的宽度阈值，默认值80过小，调大后短插值内容不会被轻易判定为需要换行
• bracketSameLine 会让括号包裹的短内容尽量保持在同一行，不会强制拆分括号内的内容到多行

2. 补充ESLint Vue规则 #

如果调整Prettier配置后仍未生效，在.eslintrc.js中新增rules字段，添加以下规则：

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'],
  // 新增以下规则
  rules: {
    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "never"
    }],
    "vue/multiline-html-element-content-newline": "off",
    "vue/singleline-html-element-content-newline": "off"
  }
};

以上规则会关闭Vue模板中不必要的内容自动换行逻辑，优先保留短内容的单行格式。

3. 校验VS Code格式化器关联 #

打开VS Code设置，确认以下配置：

• 全局默认格式化器选择esbenp.prettier-vscode（Prettier官方插件），不要同时启用多个格式化器避免规则冲突
• 如果你使用Volar作为Vue开发插件，搜索Volar > Format: Default Formatter，设置为prettier即可

内容的提问来源于stack exchange，提问作者scastd