Visual Studio Code 中 ESLint 和 Prettier 的自动换行难题：深入解析和解决方案

Visual Studio Code 中 ESLint 和 Prettier 的自动换行难题

导言

在 Visual Studio Code（VS Code）中使用 ESLint 和 Prettier 扩展程序进行 .vue 文件开发时，您可能会遇到一个棘手的问题：无法正确自动格式化代码，尤其是在应用 vue/max-attributes-per-line 规则时。本文将深入探讨这个问题，提供解决方案，并帮助您了解影响此行为的因素。

问题

问题在于，即使手动添加换行符，ESLint 也会将长 .vue 元素重新格式化为单行，即使您已将 vue/max-attributes-per-line 设置为 'off'。这是在尝试处理跨多行的 HTML 元素时面临的常见问题。

例如，考虑如下 .vue 片段：

<template>
  <font-awesome-icon v-if="statusOptions.icon" :icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />
</template>

无论您做什么，都无法将该元素分解为多行。当 'vue/max-attributes-per-line': 'off' 时，每次保存时，VS Code 都会强制将该元素的整行放置在一行上。

解决方法

为了解决此问题，我们需要禁用 ESLint 的 vue/max-attributes-per-line 规则。虽然您可以在 .eslintrc.js 文件中手动禁用此规则，但这会影响所有 .vue 文件。一种更好的方法是创建或更新您的 .vue 文件中的