Prettier 和 "vue/script-indent" 格式冲突

Prettier 和 "vue/script-indent" 之间的冲突可以通过在 Prettier 配置文件中设置 "vueIndentScriptAndStyle": true 来解决。

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

{
  "vueIndentScriptAndStyle": true
}

这样，Prettier 就会遵循 "vue/script-indent" 的规则进行格式化，避免冲突。
vue文件script内缩进2tab的 .eslintrc文件配置：

{
  "rules":  {
      "vue/script-indent": ["error", 2, {
          "baseIndent": 1
       }] 
   },
 "overrides": [
  {
    "files":['*.vue'],
    "rules":{
        "indent": "off"
    }
    }
  ]
}

完整.eslintrc配置

{
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": [
    "import", "simple-import-sort"
  ],
  "parser": "vue-eslint-parser", // 解析.vue文件
  "parserOptions": {
    "parser": "@typescript-eslint/parser", // 解析<script>标签中的代码
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "modules": true,
      "jsx": true
    }
  },
  "ignorePatterns": ["dist", "build", "node_modules", ".husky", ".vscode","**/*.min.js", "**/*.md", "**/*.css"],
  "rules": {
    // eslint-plugin-import 导入顺序
    "import/order": ["error", { "groups": ["builtin", "external", "internal"] }],
    "@typescript-eslint/no-explicit-any": "off", // @ts-ignore
    "vue/multi-word-component-names": "off", // .vue文件明明必须是多个单词命名
    "vue/script-indent": ["error", 2, {
      "baseIndent": 1
    }] // 对script标签内的JavaScript缩进2个tab
  },
  "overrides":[
    {
      "files": [
        "*.vue"
      ],
      "rules": {
        "indent": "off"
      }
    }
  ]
}

设置前样式

image.png

.prettierrc文件配置

image.png

设置后样式：

image.png