Vscode编辑 editor.code-snippets 代码块(snippets)

154 阅读1分钟

使用场景:

在使用Vscode 开发时 在每一个页面增加相同备注 例如:

那么可以直接新建个代码块 便于使用:

Vscode编辑器上 选择   文件 > 首选项 > 用户代码片段   新代码片段

代码:

{      
    "file template": {        
        "prefix": "editor",        
        "body": [          
            "<!-- @description: ${TM_FILENAME} -->",          
            "<!-- @author: lsy -->",          
            "<!-- @e-mail: 673924239@qq.com -->",          
            "<!-- @date: ${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE} ${CURRENT_DAY_NAME} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND} -->",          
            "<!-- @desc:  -->"        
        ],        
        "description": "Adds editor infoMation"      
    }    
}

这样,使用时 直接在所在位置输入代码块名

就可以了。

附赠:vue模板页面代码片段代码

{    
    "alog": {        
        "prefix": "alog",        
        "body": [            
            "console.log('$1');"        
        ],        
    "description": "Log output to console"    
    },    
    "avue": {        
        "prefix": "avue",        
        "body": [            
            "<template>",            
            "<div>$5</div>",            
            "</template>",            
            "",            
            "<script>",            
            "//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",            
            "//例如:import 《组件名称》 from '《组件路径》';",            
            "export default {",            
                "//引入组件",            
                "props: [",            
                "",            
                "],",            
                "//引入混淆",            
                "mixins: [",            
                "",            
                "],",            
                "//import引入的组件需要注入到对象中才能使用",            
                "components: {",            
                "",            
                "},",            
                "data() {",            
                    "//这里存放数据",            
                    "return {",            
                        "",            
                    "};",            
                "},",            
                "//监听属性 类似于data概念",            
                "computed: {",            
                "",            
                "},",            
                "//监控data中的数据变化",            
                "watch: {",            
                    "",            
                "},",            
                "//方法集合",            
                "methods: {",            
                    "",            
                "},",            
                "//生命周期 - 创建完成(可以访问当前this实例)",            
                "created() {",            
                    "",            
                "},",            
                "//生命周期 - 挂载完成(可以访问DOM元素)",            
                "mounted() {",            
                    "",            
                "},",            
                "//生命周期 - 创建之前",            
                "beforeCreate() {",            
                    "",            
                "},",            
                "//生命周期 - 挂载之前",            
                "beforeMount() {",            
                    "",            
                "},",            
                "//生命周期 - 更新之前",            
                "beforeUpdate() {",            
                    "",            
                "},",            
                "//生命周期 - 更新之后",            
                "updated() {",            
                    "",            
                "},",            
                "//生命周期 - 销毁之前",            
                "beforeDestroy() {",            
                    "",            
                "},",            
                "//生命周期 - 销毁完成",            
                "destroyed() {",            
                    "",            
                "},",            
                "//如果页面有keep-alive缓存功能,这个函数会触发",            
                "activated() {",            
                    "",            
                "},",            
            "}",            
            "</script>",            
            "<style scoped lang='scss'>\n",            
            "</style>"        
        ],    
    }
}

nice