Format Vue Style Code是一个VSCODE 插件，他能够帮助你做以下事情

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,
        a: 1,// => b: 2,
    };
  },
  created() {
    console.log(this.a)
  },
};

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

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

使用中遇到问题可以在这里提问。 github.com/leemathew19…

插件源码，沟通交流在这里。 github.com/leemathew19…