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个就好了。

  • 3
    点赞
  • 2
    评论
  • 6
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 2 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

grimejow

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值