VSCode 如何操做用户自定义代码片断

时间 2019-11-08

标签 vscode 如何用户自定义代码片断繁體版

原文原文链接

本身写了一些根据本身习惯弄成的自定义代码片断，不喜跳过javascript

很简单，快速过一下，F1，而后输入 snippetscss

vue代码片断html

{
    // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //     "prefix": "log",
    //     "body": [
    //         "console.log('$1');",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // },
    "doc for vue": {
        "prefix": "vue",
        "body": [
            "<template>",
            "    <div>",
            "        ${1:标题}",
            "    </div>",
            "</template>",
            
            "<script>",
            "    export default{",
            "        data(){",
            "            return{",
            "    ${2}",
            "            }",
            "        },",
            "        created() {//在实例建立完成后被当即调用",
            "    ${2}",
            "        },",
            "        methods:{",
            "    ${2}",
            "        }",
            "    }",
            "</script>",
            "<style lang=\"scss\" scoped>",
            "    ${2}",
            "</style>"
        ],
        "description": "快速生成vue"
    },
    "doc for vue父组件": {
        "prefix": "vue父组件",
        "body": [
            "<template>",
            "    <div>",
            "        ${1:标题}",
            "    </div>",
            "</template>",
            
            "<script>",
            "    //1.0导入 xx 组件",
            "    import xxx from '路径'",
            "    export default{",
            "        data(){",
            "            return{",
            "    ${2}",
            "            }",
            "        },",
            "        created() {//在实例建立完成后被当即调用",
            "    ${2}",
            "        },",
            "        methods:{",
            "    ${2}",
            "        },",
            "        components:{//1.1 注册 xx 子组件",
            "    ${2}",
            "        }",
            "    }",
            "</script>",
            "<style lang=\"scss\" scoped>",
            "    ${2}",
            "</style>"
        ],
        "description": "vue使用父组件模板"
    },
    "doc for vue子组件": {
        "prefix": "vue子组件",
        "body": [
            "<template>",
            "    <div>",
            "        ${1:标题}",
            "    </div>",
            "</template>",
            
            "<script>",
            "    export default{",
            "        data(){",
            "            return{",
            "    ${2}",
            "            }",
            "        },",
            "        created() {//在实例建立完成后被当即调用",
            "    ${2}",
            "        },",
            "        methods:{",
            "    ${2}",
            "        },",
            "        props:['xx']//接收父组件传的值",
            "    }",
            "</script>",
            "<style lang=\"scss\" scoped>",
            "    ${2}",
            "</style>"
        ],
        "description": "vue使用子组件模板"
    },
}

View Code

html代码vue

{
    "doc for html5": {
        "prefix": "html5",
        "body": [
            "<!DOCTYPE html>",
            "<html>",
            "<head>",
            "    <meta charset=\"utf-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\" />",
            "    <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">",
            "    <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\">",
            "    <title>${1:标题}</title>",
            "    <script src=\"js/flexible.js\"></script>",
            "    <script src=\"js/jquery-1.11.3.min.js\"></script>",
            "</head>",
            "<body>",
            "    ${2}",
            "</body>",
            "</html>"
        ],
        "description": "快速生成HTML5"
    },
    "doc for html5vue": {
        "prefix": "html5vue",
        "body": [
            "<!DOCTYPE html>",
            "<html>",
            "<head>",
            "    <meta charset=\"utf-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\" />",
            "    <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">",
            "    <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\">",
            "    <title>${1:标题}</title>",
            "    <script src=\"js/flexible.js\"></script>",
            "    <script src=\"js/jquery-1.11.3.min.js\"></script>",
            "</head>",
            "<body>",
            "<div id=\"app\">",
            "    ${2}",
            "</div>",
            "<script type=\"text/javascript\">",
            "    var vm = new Vue({",
            "        el: '#app',",
            "        data: {",
            "            ${2}",
            "        },",
            "        methods: {",
            "            ${2}",
            "        }",
            "    })",
            "</script>",
            "</body>",
            "</html>"
        ],
        "description": "快速生成h5vue"
    }
}

View Code

本身习惯的快捷键html5

// Place your key bindings in this file to override the defaults
[
        
        {// ctrl+d 删除一行
        "key": "ctrl+d",
        "command": "editor.action.deleteLines",
        "when": "editorTextFocus"
        },
        {// 选中当前文件中全部相同的内容 
        "key": "ctrl+q",
        "command": "editor.action.addSelectionToNextFindMatch",
        "when": "editorFocus"
        },
        {//浏览器打开
        "key": "ctrl+f1",
        "command": "extension.viewInBrowser",
        "when": "editorTextFocus"
        },
        {//浏览器打开
        "key": "ctrl+r",
        "command": "extension.openInDefaultBrowser"
        },
        {
        "key": "alt+b",
        "command": "-extension.openInDefaultBrowser"
        },
        {//终端打开cmd
        "key": "ctrl+shift+t",
        "command": "workbench.action.terminal.new"
        },
        {
        "key": "ctrl+shift+oem_3",
        "command": "-workbench.action.terminal.new"
        },
        {//在特有的.js中实现注释 (选中方法以后，使用快捷键)
        "key": "alt+shift+l",
        "command": "docthis.documentThis"
        },
        {
            "key": "ctrl+oem_2",
            "command": "editor.action.commentLine",
            "when": "editorTextFocus && !editorReadonly"
        },
        {
            "key": "ctrl+oem_2",
            "command": "-editor.action.commentLine",
            "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "ctrl+shift+oem_2",
        "command": "editor.action.blockComment",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+alt+a",
        "command": "-editor.action.blockComment",
        "when": "editorTextFocus && !editorReadonly"
    },
        ]

View Code

收藏的vscode 插件地址 java

https://www.cnblogs.com/QQ-Monarch/p/7130783.html?tdsourcetag=s_pcqq_aiomsgjquery

http://www.javashuo.com/article/p-siswngwy-dp.htmlweb