分享VSCode簡單的代碼片段

這篇文章主要介紹“分享VSCode簡單的代碼片段”，在日常操作中，相信很多人在分享VSCode簡單的代碼片段問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”分享VSCode簡單的代碼片段”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

比如我們創(chuàng)建一個 vue 組件的時候，通常會輸入：

<template>   <div class="wrap">        </div> </template>  <script lang="ts"> </script>  <style lang="stylus" scoped> </style>

我們習慣了粘貼復制，其實可以把這個代碼定義成代碼片段，以后輸入一個字母既可以輸入這些代碼。

打開 VSCode，依次點擊：

Code -> Preferences -> User Snippets -> New Global Snippets  file，輸入一個 snippet 文件名，我起名 vue，定義了兩個代碼片段：

(1) 打印輸出

(2) vue 組件

{   "console": {     "scope": "javascript,typescript",     "prefix": "sy_log",     "body": [       "console.log('$1');",       "$2"     ],     "description": "wsy to console"   },   "component": {     "scope": "",     "prefix": "sy_component",     "body": [       "<template>",           "    <div class=\"wrap\">",           "    </div>",         "</template>",         "",       "<script lang=\"ts\">",       "$3",         "</script>",         "",       "<style lang=\"stylus\" scoped>",       "$4",         "</style>"     ],     "description": "component of vue"   } }

當在 VSCode 代碼區(qū)域中輸入 sy 的時候會提示 sy_component 和 sy_log。

選擇 sy_log ，按回車，輸入的代碼如下：

console.log('');

選擇 sy_component，按回車，輸入的代碼如下：

到此，關于“分享VSCode簡單的代碼片段”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>