配置vscode的快速注释生成方式

1.

在文件——首选项-----用户代码片段—搜索vue.json,这是设置的vue文件里边生成模板的,

如果需要在js文件下生成注释的,就搜索javascript。json

2.

把下面的代码复制进去

3.

重启vscode,新建页面的时候输入vue,回车,快速生成vue模板

"Print to console": {

        "prefix": "vue",

        "body": [

            "<template>",

            "  <div></div>",

            "</template>",

            "",

            "<script>",

            "export default {",

            "  components: {},",

            "  props: {},",

            "  data() {",

            "    return {",

            "    };",

            "  },",

            "  watch: {},",

            "  computed: {},",

            "  methods: {},",

            "  created() {},",

            "  mounted() {}",

            "};",

            "</script>",

            "<style lang=\"scss\" scoped>",

            "</style>"

        ],

        "description": "A vue file template"

    },

    "Print to zhushi": {

        "prefix": "zhushi",

        "body": [

            "<!--",

            "* @Description: $0",

            "* @Author: your name",

            "* @Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",

            "* @LastEditTime: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",

            "* @LastEditors: Please set LastEditors",

            "-->"

        ],

        "description": "a zhushi mode"

    },

    "Print to func": {

        "prefix": "func",

        "body": [

            "/**",

            " * @func $1",

            " * @Description $2",

            " * @Author: your name",

            " * @param {$3} $4 $5",

            " * @return {$6} $7",

            " */"

        ],

        "description": "a func mode"

    }




================================分割线==================================

修改了一下vue版本的升级模板vue。json

"Print to console": {

        "prefix": "vue",

        "body": [

            "<!--",

            "* @Description: $0",

            "* @Author: your name",

            "* @Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",

            "* @LastEditTime: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",

            "* @LastEditors: Please set LastEditors",

            "-->",

            "",

            "<template>",

            "  <div></div>",

            "</template>",

            "",

            "<script>",

            "export default {",

            "  // 组件名称",

            "  name: '',",

            "  // 组件参数 接收来自父组件的数据",

            "  props: {},",

            "  // 局部注册的组件",

            "  components: {},",

            "  // 组件状态值",

            "  data() {",

            "    return {",

            "    };",

            "  },",

            "  // 计算属性",

            "  computed: {},",

            "  // 侦听器",

            "  watch: {},",

            "  // 组件方法",

            "  methods: {},",

            "  // 以下是生命周期钩子   注:没用到的钩子请自行删除",

            "  /**",

            "   * 在实例初始化之后,组件属性计算之前,如data属性等",

            "   */",

            "  beforeCreate() {},",

            "  /**",

            "   * 组件实例创建完成,属性已绑定,但DOM还未生成,$ el属性还不存在",

            "   */",

            "  created() {},",

            "  /**",

            "   * 在挂载开始之前被调用:相关的 render 函数首次被调用。",

            "   */",

            "  beforeMount() {},",

            "  /**",

            "   * el 被新创建的 vm.$ el 替换,并挂载到实例上去之后调用该钩子。",

            "   * 如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$ el 也在文档内。",

            "   */",

            "  mounted() {}",

            "};",

            "</script>",

            "<!-- Add 'scoped' attribute to limit CSS to this component only -->",

            "<!-- 使用了scoped属性之后,父组件的style样式将不会渗透到子组件中, -->",

            "<!-- 然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响, -->",

            "<!-- 这么设计的目的是父组件可以对子组件根元素进行布局。 -->",

            "<style lang=\"scss\" scoped>",

            "</style>"

        ],

        "description": "A vue file template"

    },

javascript.json文件

"Print to shuoming": {

        "prefix": "shuoming",

        "body": [

            "/*",

            "* @Description: $0",

            "* @Author: your name",

            "* @Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",

            "* @LastEditTime: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",

            "* @LastEditors: Please set LastEditors",

            "*/"

        ],

        "description": "a zhushi mode"

    },

    "Print to zhushi": {

        "prefix": "zhushi",

        "body": [

            "/**",

            " * @Description $1",

            " * @Author $2",

            " * @param {$3} $4 $5",

            " * @return {$6} $7",

            " */"

        ],

        "description": "a func mode"

    }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容