Select the variable name to quickly provide the creation type, such as ref, computed, methods, function, arrowFunction, watch, reactive, etc. According to whether it is currently vue2 or vue3, generate the corresponding variable and jump to the newly created variable location.

Let me explain the function of this plugin. Normally, when we write code, we first write a template, such as el-input, then write v-model or @click and other events, and then go to the top to define ref or function. With this plugin, you can directly generate corresponding variables or methods in js logic (supports generating multiple variables and methods at the same time), and then you can initialize variable values ​​and supplement function logic according to your needs, which will save you a lot of time and the burden of coding to initialize variables.

Currently, this plugin has a paid plan. If you haven’t tried it yet, you can find me on discord and get a one-month free trial.

VUE

JSX

🚀 Support

• vue
• jsx (react)
• svelte

⌨️ Keybindings

• win: ctrl+g
• mac: cmd+g

Configuration

{
  "configuration": {
    "type": "object",
    "title": "fast-create-variable",
    "properties": {
      "fast-create-variable.atTop": {
        "type": "boolean",
        "default": false,
        "description": "Generate data, methods, etc. for vue2 at the top or at the bottom"
      },
      "fast-create-variable.sound": {
        "type": "boolean",
        "default": false,
        "description": "Play sound when variable is created"
      },
      "fast-create-variable.snippet": {
        "type": "array",
        "default": [
          {
            "name": "useRouter",
            "from": "vue-router",
            "position": "top",
            "languageIds": ["vue"],
            "content": "const router = useRouter()"
          }
        ],
        "description": "user code snippet inject to variable"
      }
    }
  }
}

📦 Snippet

// examples
{
  "fast-create-variable.snippet": [
    {
      "name": "useRouter",
      "from": "vue-router", // Dependent packages, if there are dependent packages, it will automatically determine whether to import them in the header
      "position": "top",
      "languageIds": [ // Settings take effect in those languages, vue, typescriptreact, typescript, javascriptreact, vue-vine
        "vue"
      ],
      "content": "const router = useRouter()" // Code Snippet
    },
    {
      "name": "useLocation",
      "from": "react-router-dom", // Dependent packages, if there are dependent packages, it will automatically determine whether to import them in the header
      "position": "top",
      "languageIds": [
        "typescriptreact"
      ],
      "content": "  const locations = useLocation()\n  const params = qs.parse(locations.search, { ignoreQueryPrefix: true })",
      "isInJSX": true,
      "additionalDependencies": [ // When your code snippet may use additional dependencies, you can configure them here
        {
          "name": "qs",
          "from": "qs",
          "isDefault": true // Is it the default import? The default is false. If it is false, { qs } will be imported.
        }
      ]
    },
    {
      "name": "import",
      "from": "",
      "position": "hoist-top", // Insert after the last import
      "languageIds": [
        "vue",
        "typescriptreact",
        "typescript",
        "javascriptreact"
      ],
      "content": "import ${2:moduleName} from '${1:module}'"
    },
    {
      "name": "@click",
      "from": "",
      "position": "current",
      "description": "In the vue template, create a @click event at the current location",
      "languageIds": [
        "vue"
      ],
      "content": "@click=\"${1|clickHandler,handleClick,onClick,removeHandler,onRemove,closeHandler,onClose,openHandler,onOpen,submitHandler,onSubmit,onLogin,onLogout,toggleHandler,onToggle,showHandler,onShow,hideHandler,onHide|}$2\""
    }
  ]
}

💰 Charge plan

• Sponsor me by wechat or alipay, and I will give you more permissions and time to use your GitHub account
• For users who haven't experienced it yet, you can find me on discord to get a one-month free experience qualification.
• Current plan 15Yuan/month, 150Yuan/year
• Any bug or suggestion on the plugin can be communicated on discord, or add me wx: www674949287, pull you into the wx group

:coffee:

buy me a cup of coffee

Sponsors