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"
    }
}

 新的版本:vue2+vue3的常用代码片段

{
  "Print to console": {
    "prefix": "vue2",
    "body": [
      "<!-- $1 -->",
      "<template>",
      "  <div class=\"$2\">$5</div>",
      "</template>",
      "",
      "<script>",
      "// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
      "// 例如：import 《组件名称》 from '《组件路径》';",
      "",
      "export default {",
      "  // import引入的组件需要注入到对象中才能使用",
      "  components: {},",
      "  name: 'index',",
      "  //props: {",
      "  //  handA: {",
      "  //    type: String,",
      "  //    required: true",
      "  //    default: '100'",
      "  //  }",
      "  //},",
      "  data() {",
      "    // 这里存放数据",
      "    return {",
      "      ",
      "    };",
      "  },",
      "  // 监听属性 类似于data概念",
      "  computed: {},",
      "  // 监控data中的数据变化",
      "  watch: {},",
      "  // 方法集合",
      "  methods: {",
      "    ",
      "  },",
      "  // 生命周期 - 创建完成（可以访问当前this实例）",
      "  created() {",
      "    ",
      "  },",
      "  // 生命周期 - 挂载完成（可以访问DOM元素）",
      "  mounted() {",
      "  ",
      "  },",
      "  beforeCreate() {}, // 生命周期 - 创建之前",
      "  beforeMount() {}, // 生命周期 - 挂载之前",
      "  beforeUpdate() {}, // 生命周期 - 更新之前",
      "  updated() {}, // 生命周期 - 更新之后",
      "  beforeDestroy() {}, // 生命周期 - 销毁之前",
      "  destroyed() {}, // 生命周期 - 销毁完成",
      "  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发",
      "  }",
      "</script>",
      "<style lang='less' scoped>",
      "//  @import url($3); 引入公共css类",
      "$4",
      "</style>"
    ],
    "description": "Log output to console"
  },
  "vue template": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script lang=\"ts\" setup>",
      "import { ref, reactive, toRefs, onMounted, getCurrentInstance, defineProps, defineEmits, defineExpose } from 'vue'",
      "//type Props = {",
      "//   title?: string,",
      "//   data?: number[]",
      "//}",
      "// 下面的是定义获取父组件传过来的参数 withDefaults 是ts写法，第二个参数是定义默认值",
      "//withDefaults(defineProps<Props>(), {",
      "//   title: 'title',",
      "//   data: () => [1, 2, 3]",
      "//})",
      "// 下面是获取组件实例的，不可用于替代选项式api里面的this",
      "//const {proxy} : any = getCurrentInstance()",
      "onMounted(() => {",
      "})",
      "// 下面是定义调用父组件的下穿的方法的",
      "// const emit = defineEmits<{",
      "//     (e: 'on-click', name: string): void",
      "// }>()",
      "// 下面是暴露数据或者方法给父组件使用",
      "//defineExpose({",
      "//    list",
      "//})",
      "// 下面是获取子组件ref ts写法",
      "//const child = ref<InstanceType<typeof childref>>()",
      "</script>",
      "<style lang=\"less\" scoped>",
      "</style>",
    ],
    "description": "Log output to console"
  }
}