1. 先 選擇 首選項(xiàng) 里面的 代碼片段 （建議直接選擇 全局作用域）

image

<br />

2. Vue 部分代碼塊

{
    // 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"
    // }
    // 代碼塊里面的 命令 解析
    // scope：作用文件類型。 例如： 指定作用范圍類型"css, javascript"   建議 不用添加這個屬性
    // prefix： 觸發(fā)代碼塊的字符串。  喚醒代碼塊的 快捷命令
    // body：代碼塊的主體內(nèi)容。
    // description：代碼塊的簡單介紹與描述。
    // 重要：
    // 1  代碼塊書寫格式：  在 原文件 中 將代碼粘貼過來、 每一行的代碼都需要加上 雙引號 ""
    // 2. $ 在代碼塊里不顯示的問題、  $$ 打兩個 $ 即可。 第二個 $ 會被展示出來
    // 3. 多個代碼塊用逗號 ,  隔開
    // 4. Expected comma；缺少逗號的意思。 檢查代碼塊前后是否缺少逗號。
    // 5. 選中一樣的英語詞， 再按快捷鍵 Ctrl + D 就可以將多個一樣的英文詞快速選中
    "message error": {
        "prefix": "error", //喚醒代碼塊的命令
        "body": [
            "this.$$message.error('獲取參數(shù)列表失敗！')",
        ], //代碼塊的主體
        "description": "error" // 獲取參數(shù)錯誤提示
    },
    "message success": {
        "prefix": "success", //喚醒代碼塊的命令
        "body": [
            "this.$$message.success('獲取參數(shù)列表成功！')",
        ], //代碼塊的主體
        "description": "success" // 獲取參數(shù)成功提示
    },
    "message info": {
        "prefix": "info", //喚醒代碼塊的命令
        "body": [
            "this.$$message.info('獲取參數(shù)提示信息！')",
        ], //代碼塊的主體
        "description": "info" // 獲取參數(shù)成功提示
    },
    "message warning": {
        "prefix": "warning", //喚醒代碼塊的命令
        "body": [
            "this.$$message.warning('獲取參數(shù)提示信息！')",
        ], //代碼塊的主體
        "description": "warning" // 獲取參數(shù)警告提示
    },
    // vue 單文件 代碼塊
    "message vueComponent": {
        "prefix": "vueComponent", //喚醒代碼塊的命令
        "body": [
            "<template>",
            "<div>",
            "這是 Home 根組件",
            "</div>",
            "</template>",
            "<script>",
            "export default {",
            "data() {",
            "return {};",
            "},",
            "created() {},",
            "methods: {},",
            // 計(jì)算屬性
            "computed: {},",
            "}",
            "</script>",
            // scoped 防止 css 重疊
            // 注意： 這里是單引號  （但應(yīng)該是雙引號）
            "<style lang='less' scoped>",
            "</style>",
        ], //代碼塊的主體
        "description": "vueComponent" // 獲取參數(shù)成功提示
    },
    // 搭建 axios 請求路徑
    "message axiosPath": {
        "prefix": "axiosPath", //喚醒代碼塊的命令
        "body": [
            // 導(dǎo)入 axios 并設(shè)置 默認(rèn)地址
            "import axios from 'axios'",
            "axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'",
            "Vue.prototype.$http = axios",
            // 調(diào)用接口
            //   獲取左側(cè)菜單數(shù)據(jù)
            "async getMenuList() {",
            "const {data: res} = await this.$$http.get('menus')",
            "console.log(res)",
            "}",
        ], //代碼塊的主體
        "description": "axiosPath" // 配置 axios 的請求路徑
    },
    // 發(fā)送 http 請求代碼塊 get 請求
    "message get": {
        "prefix": "get", //喚醒代碼塊的命令
        "body": [
            // 在發(fā)送請求之前， 需要添加 awiat  和 async  async 是添加在父級函數(shù)上
            "const {data: res} = await this.$$http.get('')",
        ], //代碼塊的主體
        "description": "get" // 獲取參數(shù)錯誤提示
    },
    // post 請求
    "message post": {
        "prefix": "post", //喚醒代碼塊的命令
        "body": [
            // 在發(fā)送請求之前， 需要添加 awiat  和 async  async 是添加在父級函數(shù)上
            "const {data: res} = await this.$$http.post('')",
        ], //代碼塊的主體
        "description": "post" // 獲取參數(shù)錯誤提示
    },
    // put 請求
    "message put": {
        "prefix": "put", //喚醒代碼塊的命令
        "body": [
            // 在發(fā)送請求之前， 需要添加 awiat  和 async  async 是添加在父級函數(shù)上
            "const {data: res} = await this.$$http.put('')",
        ], //代碼塊的主體
        "description": "put" // 獲取參數(shù)錯誤提示
    },
    // delete 請求
    "message delete": {
        "prefix": "delete", //喚醒代碼塊的命令
        "body": [
            // 在發(fā)送請求之前， 需要添加 awiat  和 async  async 是添加在父級函數(shù)上
            "const {data: res} = await this.$$http.delete('')",
        ], //代碼塊的主體
        "description": "delete" // 獲取參數(shù)錯誤提示
    },
    //  添加 全局樣式 global
    "message global": {
        "prefix": "global", //喚醒代碼塊的命令
        "body": [
            "html, body, #app {",
            "height: 100%;",
            "margin: 0;",
            "padding: 0;",
            "}",
            // 導(dǎo)入 css 全局樣式  在main.js中導(dǎo)入 css文件
            // 不要忘記導(dǎo)入到某一個 css 的頁面
            "import './assets/css/global.css'",
        ], //代碼塊的主體
        "description": "global" // 獲取參數(shù)錯誤提示
    },
    // vue table 展開列 和 索引列
    "message expand": {
        "prefix": "expand", //喚醒代碼塊的命令
        "body": [
            "<!-- 展開列  下面的單引號建議改為雙引號 -->",
            "<el-table-column type='expand'></el-table-column>",
            "<!-- 添加 index 索引 -->",
            "<el-table-column type='index' label='#'></el-table-column>",
        ], //代碼塊的主體
        "description": "expand" // 獲取參數(shù)錯誤提示
    },
    // vue form 表單重置
    "message reset": {
        "prefix": "reset", //喚醒代碼塊的命令
        "body": [
            // 重置表單  addFormRef 是表單的引用
            "this.$$refs.addFormRef.resetFields()",
        ], //代碼塊的主體
        "description": "reset" // 獲取參數(shù)錯誤提示
    },
    // vue form 表單預(yù)驗(yàn)證
    "message valid": {
        "prefix": "valid", //喚醒代碼塊的命令
        "body": [
            // 表單預(yù)驗(yàn)證  addFormRef 是表單的引用
            "this.$refs.addFormRef.validate(valid => {",
            // console.log(validate) 返回 的是 false 和 true
            // true 表示 預(yù)驗(yàn)證 通過、 false 表示 預(yù)驗(yàn)證 沒通過
                "if(!valid) {",
                  "return this.$$message.error('請?zhí)砑颖匾膮?shù)項(xiàng)??！')",
                "}",
                // 執(zhí)行添加的業(yè)務(wù)邏輯  表單校驗(yàn)完成后， 就可以發(fā)起請求了
                "this.$$message.success('成功！')",
        
              "})",
        ], //代碼塊的主體
        "description": "valid" // 獲取參數(shù)錯誤提示
    },
    // vue Message Box 彈框
    "message messageBox": {
        "prefix": "messageBox", //喚醒代碼塊的命令
        "body": [
            // 根據(jù)Id刪除對應(yīng)的用戶信息
            "async removeUserById() {",
            "const confirmResult = await this.$$confirm('此操作將永久刪除該用戶, 是否繼續(xù)?', '提示', {",
            "confirmButtonText: '確定',",
            "cancelButtonText: '取消',",
            "type: 'warning'",
            "}).catch( err => {",
            "return err",
            "})",
            // 如果用戶確認(rèn)刪除，則返回值為字符串 confirm
            // 如果用戶取消了刪除，則返回值為字符串 cancel
            // console.log(confirmResult)
            "if(confirmResult !== 'confirm') {",
            "return this.$$message.info('已取消刪除該用戶')",
            "}",
            "console.log('刪除成功')",
        ], //代碼塊的主體
        "description": "messageBox" // Message Box 彈框
    },
    // console.log() 代碼塊
    "message log": {
        "prefix": "log", //喚醒代碼塊的命令
        "body": [
            "console.log('ok')",
        ], //代碼塊的主體
        "description": "log" // log 的代碼塊
    },
    // 作用域插槽 代碼塊
    "message scope": {
        "prefix": "scope", //喚醒代碼塊的命令
        "body": [
            "<template slot-scope='scope'>",
            "</template>"
        ], //代碼塊的主體
        "description": "scope" // scope 的代碼塊
    },
    // 定義全局的時(shí)間過濾器 dataFormat 調(diào)用
    "message dataFormat": {
        "prefix": "dataFormat", //喚醒代碼塊的命令
        "body": [
            // 定義一個全局的 時(shí)間過濾器
            "Vue.filter('dataFormat', function(originVal) {",

                "const dt = new Date(originVal)",
            
                // 年月日 y-m-d
                "const y = dt.getFullYear()",
                // 月份是從 0 開始的，所以需要加1 
                // padStart() 方法用另一個字符串填充當(dāng)前字符串
                "const m = (dt.getMonth() + 1 +'').padStart(2, '0')",
                "const d = (dt.getDate() + '').padStart(2, '0')",
            
                // 小時(shí)分鐘秒  hh:mm:ss
                "const hh = (dt.getHours() + '').padStart(2, '0')",
                "const mm = (dt.getMinutes() + '').padStart(2, '0')",
                "const ss = (dt.getSeconds() + '').padStart(2, '0')",
            
                // return 年月日 時(shí)分秒
                "return `${y",
                            "}-${m",
                            "}-${d",
                            "} ${hh",
                            "}:${mm",
                            "}:${ss",
                            "}`",
            "})",
        ], //代碼塊的主體
        "description": "dataFormat" // 時(shí)間過濾器 將時(shí)間戳轉(zhuǎn)換為年月日 時(shí)分秒
    },
    // 表單校驗(yàn)規(guī)則 required
    "message required": {
        "prefix": "required", //喚醒代碼塊的命令
        "body": [
            "{ required: true, message: '請輸入商品名稱', trigger: 'blur' },",
        ], //代碼塊的主體
        "description": "required" // 表單校驗(yàn)規(guī)則
    },
}