Prettier 和 "vue/script-indent" 之間的沖突可以通過在 Prettier 配置文件中設置 "vueIndentScriptAndStyle": true 來解決。

在項目根目錄下創(chuàng)建或修改 .prettierrc 文件，添加以下配置：

{
  "vueIndentScriptAndStyle": true
}

這樣，Prettier 就會遵循 "vue/script-indent" 的規(guī)則進行格式化，避免沖突。
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