个人 vue3 VSCode 快捷代码

前言

配置

• 文件->首选项->用户片段

snippet-generator

一个案例学会 VSCode Snippets，极大提高开发效率

snippets 变量

插件

• JavaScript (ES6) code snippets 补全js代码
• Path Intellisense 补全路径
• Rainbow Brackets 括号颜色
• Tailwind CSS 框架class补全
• Code Spell Checker 代码字母拼写错误提示
• Vue Language Features (Volar) vue3 插件

全局代码

vue js

sc [script 前两个字母]

<script setup lang="ts">
import {ref,reactive} from 'vue'

</script>

vue all

vue3

<template>
<div>

</div>
 </template>
 
<script setup lang="ts">
import {ref,reactive} from 'vue'

</script>

<style lang="scss" scoped>

</style>

json

{
"ts script vue code": {
      "prefix": "sc",
      "body": [
        "<script setup lang=\"ts\">",
        "import {ref,reactive} from 'vue'",
        "$0",
        "</script>",
      ],
      "description": "js 代码位置"
    },
    "vue3 script vue code": {
      "prefix": "vue3",
      "body": [
        "<template>",
        "<div>",
        "$0",
        "</div>",
        " </template>",
        " ",
        "<script setup lang=\"ts\">",
        "import {ref,reactive} from 'vue'",
        "",
        "</script>",
        "",
        "<style lang=\"scss\" scoped>",
        "",
        "</style>",
      ],
      "description": "vue3 模板"
    },
}

typescript 代码

const

cv [const value 首字母]

const  

ref

cvf [const value ref 首字母]

const  = ref()   

reactive

cr [const reactive 首字母]

const state = reactive({
  
})  

props

cp [const props 首字母]

const props = defineProps({
    
})  

方法

cv [const function 首字母]

const  = ()=>{
    
}  

匿名方法

af [anonymous function 首字母]

()=>{
    
}  

watch

wat [watch 前三个字母]

  
watch(() => , (newValue, oldValue) => {
    
 })  

toRefs

ctr [const toRefs 首字母]

const {} = toRefs(state)  

hook

use [useName.vue ]

export default function use() {
 
 
function demo() {
 
}
 
return {
    demo
}
}  

变量

sp [store pinia 首字母]

import { defineStore } from 'pinia'

export const useDemoStore = defineStore('demo', {
  state: () => ({
    count: 1,
  }), 
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
  actions: {
    addCount(num: number) {
      this.count += num;
    }
  }  

json

{
"ts const value code": {
    "prefix": "cv",
    "body": [
      //  = $3 
      "const $2 "
    ],
    "description": "变量"
  },
  "ts const ref value code": {
    "prefix": "cvf",
    "body": [
      "const $2 = ref($3) ",
      " $0 "
    ],
    "description": "变量 ref"
  },
  "ts reactive value code": {
    "prefix": "cr",
    "body": [
      "const state = reactive({",
      "  $0",
      "})"
    ],
    "description": "变量 reactive"
  },
  "ts props value code": {
    "prefix": "cp",
    "body": [
      "const props = defineProps({",
      "  $2",
      "})"
    ],
    "description": "接收父组件参数"
  },
  "ts const function code": {
    "prefix": "cf",
    "body": [
      "const $2 = ()=>{",
      "    $3",
      "}"
    ],
    "description": "方法简写"
  },
  "ts anonymous function vue code": {
    "prefix": "af",
    "body": [
      "()=>{",
      "    $2",
      "}"
    ],
    "description": "匿名方法"
  },
  "ts watch vue code": {
    "prefix": "wat",
    "body": [
      "watch(() => $2, (newValue, oldValue) => {",
      "    $3",
      " })"
    ],
    "description": "监听变量"
  },
  "ts const state vue code": {
    "prefix": "ctr",
    "body": [
      "const {$0} = toRefs(state$1)",
    ],
    "description": "解构变量"
  },
  "ts use hook vue code": {
    "prefix": "use",
    "body": [
      " ",
      "export default function use$1() {",
      " ",
      " ",
      "function demo$0() {",
      " ",
      "}",
      " ",
      "return {",
      "    demo",
      "}",
      "}"
    ],
    "description": "代码分离 hook"
  },
  "ts pinia vue code": {
    "prefix": "sp",
    "body": [
      " ",
      "import { defineStore } from 'pinia'",
      "",
      "export const useDemoStore = defineStore('demo', {",
      "  state: () => ({",
      "    count: 1,",
      "  }), ",
      "  getters: {",
      "    doubleCount(state) {",
      "      return state.count * 2;",
      "    },",
      "  },",
      "  actions: {",
      "    addCount(num: number) {",
      "      this.count += num;",
      "    }",
      "  }",
    })
  ],
  "description": "代码分离"
},
}

结语

• 分享就是这些, 其他的可以按照常用的话就扩展
• 欢迎加我讨论