vscode中，vue/cli 3.x 设置代码自动格式化时的缩进问题

当我们在vscode中对vue-cli脚手架进行代码规范设置时，有时候会遇到代码缩进的问题，我们可能会根据个人习惯来设置tabSize,一般是2或者4吧。

当在setting.json里添加

"editor.tabSize": 4,
"editor.formatOnSave": true, 
"editor.detectIndentation": false,//关掉编辑器根据文件类型进行的检测

上面的设置会使得保存时代码自动缩进4个空格，但是却发现只对除了.vue之外的文件有效。

如图

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <div class="aa">asdasdasd</div>
    <div></div>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  methods: {
    aa() {
      console.log(222222);
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

上面的代码的缩进还是2个空格，一翻查找，发现还需要在setting.json里添加

   "vetur.format.options.tabSize": 4,

这样vue文件就成功缩进4个空格了。

<template>
    <div id="app">
        <HelloWorld msg="Welcome to Your Vue.js App" />
        <div class="aa">asdasdasd</div>
        <div></div>
    </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
    name: "App",
    components: {
        HelloWorld
    },
    methods: {
        aa() {
            console.log(222222);
        }
    }
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

原因就是vetur插件的默认缩进是2个，改成4个就好了。