Format Vue Style Code:提升Vue代码格式化效率的VSCode插件
Format Vue Style Code是一款专为Vue开发者设计的VSCode插件,旨在优化Vue代码的格式化,提升代码的可读性和维护性。无论您是使用Vue2还是期待未来对Vue3的支持,该插件都能显著改善您的开发体验。
主要功能:
重排前:
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() {},
},
};
将按照 name、components...等顺序进行排列。如果需要修改默认顺序,可以使用快捷键:ctrl shift p 或者 command shift p,输入format-vue-style-code: change option order
,然后输入您想要的排序即可。
template 部分:
{{ a }}
{{ b }}
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)都进行了类似的排序:
如何使用:
未完成的功能:
下载:
在 VSCode 扩展中搜索 format-vue-style-code
即可找到该插件。
问题反馈:
使用中遇到问题可以在这里提问:https://github.com/leemathew1998/format-you-code/issues
源码与交流:
插件源码及沟通交流在这里:https://github.com/leemathew1998/format-you-code
本站所有资源都是由网友投稿发布,或转载各大下载站, 请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则 产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:study_golang@163.com