eslint - vue3 项目使用.prettierrc自动保存，元素标签换行风格如何配置？

Question

如图所示，我如何配置保存成我想要的结果。

Answer 1

https://prettier.io/docs/en/options#html-whitespace-sensitivity

Answer 2

您好，根据您提供的图片和问题，看起来您希望在Vue3项目中配置Prettier以自动保存并按照您的期望格式化元素标签。Prettier是一个代码格式化工具，可以自动将您的代码格式化为一种易于阅读和理解的形式。

首先，确保您已经在项目中安装了Prettier。如果尚未安装，您可以使用以下命令进行安装：

npm install --save-dev --save-exact prettier

然后，您需要在项目的根目录下创建一个.prettierrc文件，并在其中定义您的格式化规则。这个文件应该包含一个JSON对象，该对象指定了Prettier应该如何格式化您的代码。

针对您的问题，您可能需要使用"singleQuote": true以使用单引号而不是双引号来包围属性。另外，"trailingComma": "all"将为所有对象添加尾逗号。对于换行，您可以使用"printWidth": 80来设置一行最多80个字符，如果超过这个限制，Prettier将自动换行。此外，"useTabs": false和"tabWidth": 2设置使用空格进行缩进而不是制表符，并设置每个缩进级别的空格数为2。最后，"bracketSpacing": true将在大括号之间添加空格。

因此，您的.prettierrc文件可能如下所示：

{  "singleQuote": true,  "trailingComma": "all",  "printWidth": 80,  "useTabs": false,  "tabWidth": 2,  "bracketSpacing": true}

在创建了.prettierrc文件并保存之后，Prettier将按照这些规则自动格式化您的代码。希望这可以解决您的问题！如果您有任何其他问题或需要进一步的解释，请随时告诉我。