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

 

相關文章
相關標籤/搜索