Vetur: need configure indent size

[jamesfancy]

• [x] I have searched through existing issues
• [x] I have read through docs at https://vuejs.github.io/vetur/
• [x] I have read FAQ: https://github.com/vuejs/vetur/wiki/FAQ

Info

• Platform: Windows 10
• Vetur version: 0.11.0
• VS Code version: 1.18.0

Problem

I hope indenting 4 spaces.
I have configured .editorconfig to set indent_size = 4
I haven't found any settings of vetur for indent setting.

Thus, is there a way to configure? Or would vetur support that in the near future?

[octref]

We do not support .editorconfig.
Use editor.tabSize in VS Code.

[jamesfancy]

@octref editor.tabSize also be configured to 4. but something always indent 2 spaces when I use Format Document command.

Format command cannot format HTMLs in <template></template>. And, styles and scripts are idented by 2 spaces. such as:

<template>
    <div class="comsumables-list">
        <mt-header fixed title="出入库配置">
            <router-link to="/" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>
        <mt-search v-model="search" placeholder="搜索" />
    </div>
</template>

<style lang="less" scoped>
.comsumables-list {
  margin-top: -20px;
}
</style>

<script>
export default {
  name: "comsumables-list",
  data() {
    return {
      search: ""
    };
  }
};
</script>

[jamesfancy]

I found the reson is about Prettier. How can I configure to use VSCode build-in formatter for HTML/TS/JS？

[octref]

You can 1) add prettier.tabWidth in your VS Code workspace setting. 2) Create a .prettierrc with tabWidth set to 4.

[jamesfancy]

@octref Thank you. I have done with prettier.tabWidth.

However, I hope vetur can be configured to use build-in formatter for HTML, JavaScript and TypeScript.

[octref]

Having multiple places for formatting options can be confusing. I'd much rather let prettier only read settings from .prettierrc or VS Code's prettier.* settings. With that being said I do need to update docs for formatting.