Format Vue Style Code

Features

重排前

let timer;
import App from "./App.vue";
import { func1 } from "@/utils/func.js";
import { func2 } from "@/utils/func.js";
import Vue from "vue";

重排后

import Vue from "vue";
import { func1, func2 } from "@/utils/func.js";
import App from "./App.vue";
let timer;

引入文件将会按照以下规则进行排序，并且自动去除重复引入的文件。

重排前

export default {
  methods: {    3️⃣
    func1() {},
  },
  data() {      2️⃣
    return {};
  },
  name: "App",  1️⃣
};

重排后

export default {
  name: "App",  1️⃣
  data() {      2️⃣
    return {};
  },
  methods: {    3️⃣
    func1() {},
  },
};

如何修改默认顺序？快捷键：ctrl + shift + p 或者 command + shift + p，输入format-vue-style-code: change option order，输入你想要的排序即可。

template part

<template>
  <div>
    <div>{{ a }}</div>
    <div>{{ b }}</div>
  </div>
</template>

script part

export default {
  data() {
    return {
        b: 2,
        a: 1,
    };
  },
  created() {
    console.log(this.a)
  },
};

在此例子中，data 中的 a: 1 将会被放到 b: 2 的前面；因为不管在template中还是生命周期函数中，a 变量都是优先使用的。如果有冲突，那会以生命周期函数 > template进行排序。

此外，我们对日常使用的option（components、computed、data、filters、methods、props、watch）都进行了类似的排序:
- 第一个用到的component将会排在components的第一位置
- 第一个用到的method将会排在methods的第一位置
- ......

在 vscode 扩展中搜索 format-vue-style-code 即可找到该插件。