format-vue-style-code 0.4.3

Format Vue Style Code：提升Vue代码格式化效率的VSCode插件

Format Vue Style Code是一款专为Vue开发者设计的VSCode插件，旨在优化Vue代码的格式化，提升代码的可读性和维护性。无论您是使用Vue2还是期待未来对Vue3的支持，该插件都能显著改善您的开发体验。

主要功能：

1️⃣ 重排 import 文件顺序 ✅

重排前：

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;

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

1. 依赖文件
2. 带有@或者~的引入文件
3. 相对路径引入的文件或者定义的变量

2️⃣ 对 Vue2 中的 option API 写法进行格式化 ✅

重排前：

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

重排后：

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

将按照 name、components...等顺序进行排列。如果需要修改默认顺序，可以使用快捷键：ctrl shift p 或者 command shift p，输入format-vue-style-code: change option order，然后输入您想要的排序即可。

3️⃣ 对 data 等 options 中的内容进行排序 ✅

template 部分：

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

script 部分：

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的第一位置
• ......

如何使用：

• 通过右键菜单中的"Format You Code"选项
• 使用快捷键：ctrl shift p 或者 command shift p，输入"Format You Code"

未完成的功能：

• [ ] 对 Vue3 中的 composition API 进行格式化
• [ ] 代码重构

下载：

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

问题反馈：

使用中遇到问题可以在这里提问：https://github.com/leemathew1998/format-you-code/issues

源码与交流：

插件源码及沟通交流在这里：https://github.com/leemathew1998/format-you-code