如何找到将HTML换行开头的>移至上一行的Lint规则？

你可以通过配置代码格式化工具Prettier来实现想要的HTML标签格式，具体步骤如下：

1. 配置Prettier #

在项目根目录创建或修改.prettierrc.js文件，添加以下配置：

module.exports = {
  bracketSameLine: true,
  htmlWhitespaceSensitivity: 'css',
  vueIndentScriptAndStyle: true,
  printWidth: 100 // 可根据需求调整行宽阈值
};

• bracketSameLine: true：强制HTML标签的闭合尖括号>与最后一个属性处于同一行，解决你反感的换行后以>开头的问题。
• htmlWhitespaceSensitivity: 'css'：确保格式化后的HTML空格符合CSS规则，避免样式异常。
• vueIndentScriptAndStyle: true：保持Vue组件内script、style区块的缩进一致性。

2. 应用格式化 #

• 如果使用VS Code，安装Prettier插件后，设置默认格式化工具为Prettier，保存代码时会自动按配置格式化。
• 也可以通过命令行批量格式化所有Vue文件：

npx prettier --write "src/**/*.vue"

效果对比 #

原始代码：

<span v-if="item.editable">
  <v-icon color="primary" @click="openApplicantEditCreateDialog(item)"
    >mdi-pencil</v-icon
  >
  <v-icon color="primary" @click="openApplicantDeleteDialog(item)"
    >mdi-delete-forever</v-icon
  >
</span>

格式化后代码：

<span v-if="item.editable">
  <v-icon color="primary" @click="openApplicantEditCreateDialog(item)">
    mdi-pencil
  </v-icon>
  <v-icon color="primary" @click="openApplicantDeleteDialog(item)">
    mdi-delete-forever
  </v-icon>
</span>

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