如何解决Nuxt2中ESLint、Prettier与Stylelint的分号冲突问题

问题原因 #

Prettier的semi配置仅作用于JS/TS等脚本文件，对Vue模板中的HTML style属性分号规则独立处理：当style属性只有单个样式声明时，Prettier默认会移除末尾分号。而你的ESLint通过prettier/prettier规则强制执行这个逻辑，与Stylelint中declaration-block-trailing-semicolon: 'always'要求保留分号的规则冲突。

解决方案 #

方案1：禁用ESLint对模板中style属性的Prettier检查

修改ESLint配置，让Stylelint完全接管模板style属性的格式检查，同时调整Prettier对Vue文件的处理规则：

extends: [
  '@nuxtjs',
  'plugin:nuxt/recommended',
  'prettier'
],
plugins: [
  'modules-newlines',
  'prettier',
],
rules: {
  'semi': [2, 'always'],
  'prettier/prettier': ['error', {
    htmlWhitespaceSensitivity: 'css',
    overrides: [
      {
        files: ['*.vue'],
        options: {
          parser: 'vue',
          vueIndentScriptAndStyle: true
        }
      }
    ]
  }],
  // 禁用ESLint中干扰Stylelint的模板样式检查规则
  'vue/style-indent': 'off'
}

方案2：局部注释忽略单个冲突

如果不想全局修改配置，可在模板的style属性前添加注释，让Prettier跳过该属性的格式化：

<template>
  <div /* prettier-ignore */ style="color: red;" />
</template>

方案3：调整Stylelint规则与Prettier一致（仅当可接受单声明移除分号时使用）

修改Stylelint规则，允许单个样式声明时省略分号：

rules: {
  'declaration-block-trailing-semicolon': ['always', {
    ignore: ['single-declaration']
  }]
}

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