VScode中的代碼片段

一、關於js常用的代碼片段

{
    // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. 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": {
    //     "scope": "javascript,typescript",
    //     "prefix": "log",
    //     "body": [
    //         "console.log('$1');",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // }
    "set script": { // 片段名稱
        "prefix": "scr1", // 輸入script觸發聯想提升
        "body": [ // 確認后添加的代碼
            "<script type='text/javascript'>",
            "$0", // $0代表光標最后停留的位置
            "</script>"
        ],
        "description": "set_script" // 聲明JS腳本語言
    },
    "set script2": { // 片段名稱
        "prefix": "scr2", // 輸入script觸發聯想提升
        "body": [ // 確認后添加的代碼
            "<script type='text/babel'>",
            "$0", // $0代表光標最后停留的位置
            "</script>"
        ],
        "description": "set_script" // 聲明babel腳本語言
    },
    "set querySelector": {
        "prefix": "dq",
        "body": [ // 確認后添加的代碼
            "document.querySelector('$0')",
        ],
        "description": "set_querySelector" // 提示的內容
    },
    "set querySelectorAll": {
        "prefix": "dqa",
        "body": [ // 確認后添加的代碼
            "document.querySelectorAll('$0')",
        ],
        "description": "set_querySelectorAll" // 提示的內容
    },
    "set getElementById": {
        "prefix": "dgetId",
        "body": [ // 確認后添加的代碼
            "document.getElementById('$0')",
        ],
        "description": "set_getElementById" // 提示的內容
    },
    "set consoleLog": {
        "prefix": "cl",
        "body": [ // 確認后添加的代碼
            "console.log($0)",
        ],
        "description": "set_consoleLog" // 提示的內容
    },
    "set metaVp": {
        "prefix": "meta:vp",
        "body": [ // 確認后添加的代碼
            "<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>",
        ],
        "description": "set_metaVp" // 提示的內容
    },
    "set resetCss": {
        "prefix": "r",
        "body": [ // 確認后添加的代碼
            "*{margin:0;padding:0}",
        ],
        "description": "set_resetCss" // 提示的內容
    },
    "df": {
        "prefix": "df",
        "body": [
            "()=>{",
            "  //輸入函數體$1",
            "}",
        ],
        "description": "箭頭函數"
    },
    "vf": {
        "prefix": "vf",
        "body": [
            "(){",
            "  $1",
            "}",
        ],
        "description": "vue 中methods里邊的回調函數"
    },
    "f1": {
        "prefix": "f1",
        "body": [
            "for (var i=0; i<xxxxxxx.length; i++ ){",
            "  //循環體內容$1",
            "}",
        ],
        "description": "for循環1"
    },
    "f2": {
        "prefix": "f2",
        "body": [
            "for (var j=0; j<xxxxxxx.length; j++ ){",
            "  //循環體內容$1",
            "}",
        ],
        "description": "for循環2"
    },
    "fori": {
        "prefix": "fori",
        "body": [
            "for (let index in arr){",
            "  console.log(arr[index])",
            "}",
        ],
        "description": "for-in遍歷"
    },
    "did": {
        "prefix": "did",
        "body": [
            "document.getElementById('$1')"
        ],
        "description": "document.getElementById"
    },
    "dtag": {
        "prefix": "dtag",
        "body": [
            "document.getElementsByTagName('$1')"
        ],
        "description": "document.getElementsByTagName"
    },
    "jw": {
        "prefix": "jw",
        "body": [
            "javascript:;"
        ],
        "description": "javascript:;"
    },
    "demo": {
        "prefix": "demo",
        "body": [
            "function demo (){",
            "console.log($1)",
            "}"
        ],
        "description": "箭頭函數"
    },
}

二、關於vue常用的代碼片段

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "    <div>\n",
            "    </div>",
            "</template>\n",
            "<script>",
            "export default {",
            "    name:'name',",
            "    props: {\n",
            "    },",
            "    data() {",
            "        return {\n",
            "        };",
            "    },",
            "    components: {\n",
            "    },",
            "};",
            "</script>\n",
            "<style lang='stylus' scoped>\n",
            "</style>\n",
        ],
        "description": "Create vue template"
    },
    "set vuestyle": { // 片段名稱
        "prefix": "sty", // 輸入style觸發聯想提升
        "body": [ // 確認后添加的代碼
            "<style lang='scss' scoped>",
            "$0", // $0代表光標最后停留的位置
            "</style>"
        ],
        "description": "set_style" // 
    },
    "create vuex": { // 創建vuex倉庫
        "prefix": "vuex", // 輸入vuex觸發聯想提升
        "body": [ // 確認后添加的代碼
            "export default new Vue.Store({",
            "    state: {",
            "       count:666",
            "    },",
            "    getters: {\n",
            "    },",
            "    mutations: {\n",
            "    },",
            "    actions: {\n",
            "    },",
            "});",
        ],
        "description": "create_vuex" // 
    },
    "create store": { // 創建vuex倉庫
        "prefix": "ck", // 輸入vuex觸發聯想提升
        "body": [ // 確認后添加的代碼
            "import state from './state.js'",
            "import getters from './getters.js'",
            "import mutations from './mutations.js'",
            "import actions from './actions.js'",
            "export default new Vuex.Store({",
            "    state,",
            "    getters,",
            "    mutations,",
            "    actions,",
            "});",
        ],
        "description": "create_vuex" // 
    },
    "Angle brackets": { //尖括號
        "prefix": "ls",
        "body": [
            "<template$0 />"
        ],
        "description": "Create vue Angle brackets"
    }
}