配置过程

引言

为了便于开发,提高生产效率,我们通常会复制粘贴一些共同代码,在WebStorm中,可以将这些共同代码制作成模板,在使用的时候,只需要输入关键字+点击按键即可将模板的代码粘贴到代码文件中,简直是爽歪歪。

步骤(以WebStorm2023版本展示)

以下是配置的过程,请不要眨眼睛:

打开设置

首先找到设置,一般长成齿轮的模样,每个版本的WebStorm的设置位置可能会有些许不同,用你的火眼金睛找到即可。
在这里插入图片描述
打开设置
在这里插入图片描述

进行配置

进入设置之后,界面如下图所示,首先依次点击step1step2step3所示按钮。后面的操作不分先后顺序,需要设置关键词、复制粘贴共同代码、设置输入关键词之后的键位、勾选、设置关键词生效的文件
在这里插入图片描述
在这里插入图片描述
最后点击窗口右下角的ok,配置到此结束
在这里插入图片描述

使用

首先在需要使用模板代码的文件里面输入关键词,我这里的关键词是vue,如下图所示
在这里插入图片描述
接着,按下键盘的按键tab,代码就全部出来了,是不是非常舒服
在这里插入图片描述

Vue模板

下面是我的vue通用代码模板,直接复制粘贴进去即可,如果你觉得不行,改成你的就行

<template>
    <div>

    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {};
    },
    computed: {},
    watch: {},
    methods: {},
    beforeCreate() {
    },

    created() {

    },

    beforeMount() {

    },

    mounted() {

    },

    beforeUpdate() {

    },

    updated() {

    },

    beforeDestroy() {

    },
    destroyed() {

    },

    activated() {

    },
}


</script>

<style scoped>

</style>

Logo

前往低代码交流专区

更多推荐