Vue.js VueJS Prettier 4空间缩进

我想让我的代码在.vue文件中缩进4个空格，并且更漂亮。我已经完成了所有设置，并且正在使用ESLint+Prettier。我可以确认我的Pretter配置中的设置会影响.vue文件。我唯一无法控制的是缩进的大小。当我真的想用4个空格时，所有的东西都缩进2个空格

更漂亮：

module.exports = {
    semi: true,
    trailingComma: 'none',
    singleQuote: true,
    tabWidth: 4,
    useTabs: true,
    quoteProps: 'as-needed',
    jsxSingleQuote: false,
    bracketSpacing: true,
    jsxBracketSameLine: false,
    arrowParens: 'always',
    endOfLine: 'lf',
    vueIndentScriptAndStyle: true
};

埃斯林：

{
  "root": true,
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "parser": "babel-eslint"
  },
  "env": {
    "browser": true,
    "amd": true,
    "node": true,
    "jest/globals": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:vue/vue3-essential",
    "@vue/typescript"
  ],
  "plugins": [
    "jest"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {},
      {
        "usePrettierrc": true
      }
    ],
    "no-console": [
      "error",
      {
        "allow": [
          "error"
        ]
      }
    ],
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "@material-ui/core",
            "message": "Please use more detailed import: \"@material-ui/core/ITEM\""
          },
          {
            "name": "@material-ui/icons",
            "message": "Please use more detailed import: \"@material-ui/icons/ITEM\""
          },
          {
            "name": "@material-ui/lab",
            "message": "Please use more detailed import: \"@material-ui/lab/ITEM\""
          },
          {
            "name": "date-fns",
            "message": "Please use more detailed import: \"date-fns/ITEM/index\""
          },
          {
            "name": "date-fns-tz",
            "message": "Please use more detailed import: \"date-fns-tz/esm/ITEM\""
          },
          {
            "name": "moment",
            "message": "MomentJS is a heavy library. Please use date-fns instead"
          }
        ],
        "patterns": [
          "fp-ts/lib/*"
        ]
      }
    ],
    "vue/script-indent": 0
  },
  "parser": "vue-eslint-parser",
  "overrides": [
    {
      "files": [
        "**/*.ts?(x)",
        "**/*.vue"
      ],
      "parser": "vue-eslint-parser",
      "extends": [
        "plugin:@typescript-eslint/recommended"
      ],
      "settings": {
        "import/resolver": {
          "typescript": {
            "project": "/home/craig/Development/Applications/stock-tracker-ui/tsconfig.json"
          }
        }
      },
      "rules": {
        "@typescript-eslint/no-unused-vars": "error",
        "@typescript-eslint/no-explicit-any": "error"
      },
      "parserOptions": {
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
      }
    }
  ]
}

---

Prettier的关键不在于它是不可自定义的，并且代码样式是一致的，并且是由工具预先设置的吗？Prettier确实有一些选项，其中一个选项是4个空格缩进，我正在使用这个选项。你不应该将

useTabs

设置为

false

而使用空格缩进吗？