登录
format-vue-style-code
分类:工具软件 访问:50 下载量:0

软件介绍

更新时间:2025-07-31

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 部分:

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

本站所有资源都是由网友投稿发布,或转载各大下载站, 请自行检测软件的完整性!

本站所有资源仅供学习与参考,请勿用于商业用途,否则 产生的一切后果将由您自己承担!

如有侵权请联系我们删除下架,联系方式:study_golang@163.com

最新教程

查看更多
  • Golang云原生架构师课程
    Golang云原生架构师课程
    Go是一门并发支持、垃圾回收的编译型系统编程语言;本课程转载自哔哩哔哩:https://www.bilibili.com/video/BV1Mh411M7A
  • MySQL数据管理之备份恢复案例解析视频教程
    MySQL数据管理之备份恢复案例解析视频教程
    《MySQL数据管理之备份恢复案例解析视频教程》MySQL是一个开放源码的小型关联式数据库管理系统,目前MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。
  • MySQL索引优化解决方案
    MySQL索引优化解决方案
    本套课程是根据MySQL索引的设计理念与数据结构、索引使用场景、索引分类、索引运用场景、索引性能分析、查询优化、MySQL索引的慢查询等组成,主要讲述了MySQL索引优化的解决方案,非常适合有MySQL使用基础或者有一定工作经验的同学。课程讲解了解决大数量查询慢的问题、如何编写一个高效的SQL、查询语句应该如何优化、索引的实现原理是什么、索引又应该如何优化...等诸多SQL索引优化的难点和面试点。
  • 极客学院Docker视频教程
    极客学院Docker视频教程
    Docker是PaaS提供商dotCloud开源的一个基于LXC的高级容器引擎,源代码托管在Github上,基于go语言并遵从Apache2.0协议开源。Docker自2013年以来非常火热,无论是从github上的代码活跃度,还是各大厂商的支持,都使Docker成为了时下最受关注的技术,甚至微软都声称在下一代WindowsServer中集成对Docker的支持。所以我们收集了《极客学院Docke
  • Golang进阶实战编程
    Golang进阶实战编程
    本课程是在《Go语言基础视频》基础之上录制的,是Go语言基础的后半部分。包括包的管理,IO操作,Go语言最大的亮点:高并发,goroutine,channel,反射等。本视频主要为了帮助Go语言的初学者,从零到一的快速入门。学完本套课程,可以学会如果通过包管理Go项目,并发模型,以及并发实现,channel通道如何传递数据,反射等等。
  • JavaScript极速入门
    JavaScript极速入门
    本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。知识点简单明了,让你学习0压力,适合新手观看学习......