【推荐】Vue代码格式化插件Vue 3 Support - All In One
会将同一个节点里面的不同属性换行排列对齐，这样看起来更加清晰，尤其是一个节点绑定十几个属性、事件的时候，这样的排列方式更有效、快捷进行修改、删除
Vue 2/3 代码片段 语法高亮 格式化插件
这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。
你可以在 VS Code 编辑器底部栏右下角打开Auto Format Vue开关，它可能帮你在代码保存的时候自动格式化vue文件的格式，默认是关闭状态。
如果你不想自动格式化vue文件，你也可以在vue文件中点击鼠标右键，在出现的菜单栏中选择Format Document菜单项，则文件会执行一次格式化。
你可以在文件夹右键的菜单栏中使用Vue Generator Component，弹窗中填入组件名，会自动生成一个默认组件模板，便于你快速创建一个组件。
代码片段
Vue 3 代码片段
包含常用 Vue3 代码片段，比如你输入reactive，选择reactive的代码片段，则编辑器会自动帮你生成const data = reactive({...})代码，提高你的开发效率。
| 关键字 | JavaScript 代码片段 |
|---|---|
import |
import {...} from "@vue/composition-api" |
import |
import {...} from 'vue' |
newVue |
newVue({...}) |
defineComponent |
defineComponent({...}) |
export |
export default { ... } |
setup |
setup(${...}) {...} |
reactive |
const data = reactive({...}) |
watch |
watch(..., ...) |
watchFn |
watch(() => {...}) |
watchArray |
watch([...]) => {...} |
watchEffect |
watchEffect(() => {...}) |
computed |
computed(() => { get: () => {...}, set: () => {...}}) |
toRefs |
toRefs(...) |
ref |
ref(...) |
props |
props(...) |
onBeforeMount |
onBeforeMount(...) |
onMounted |
onMounted(...) |
onBeforeUpdate |
onBeforeUpdate(...) |
onUpdated |
onUpdated(...) |
onBeforeUnmount |
onBeforeUnmount(...) |
onUnmounted |
onUnmounted(...) |
onErrorCaptured |
onErrorCaptured(...) |
Vue 2 代码片段
兼容所有常用 Vue 2 代码片段，如下：
| 关键字 | JavaScript 代码片段 |
|---|---|
import |
import ... from ... |
newVue |
new Vue({...}) |
VueConfigSilent |
Vue.config.silent = true |
VueConfigOptionMergeStrategie |
