VSCode中如何用snippets來提升開發效率

小編今天帶大家了解VSCode中如何用snippets來提升開發效率，文中知識點介紹的非常詳細。覺得有幫助的朋友可以跟著小編一起瀏覽文章的內容，希望能夠幫助更多想解決這個問題的朋友找到問題的答案，下面跟著小編一起深入學習“VSCode中如何用snippets來提升開發效率”的知識吧。

snippets 是片段的意思，VSCode 支持自定義 snippets，寫代碼的時候可以基于它快速完成一段代碼的編寫。

不只是 VSCode，基本所有的主流編輯器都支持 snipeets。

一個功能被這么多編輯器都支持，那肯定是很有用的，但是這功能大多數人都沒用起來。

我之前寫的 snippets 文章中講了 snippets 支持的各種語法和配置方式，但是并沒有用這些來做一個真實的案例。

所以，這篇文章就來講一個真實的 snippets，基本用到了所有的 snippets 語法。能獨立把它寫出來，就可以說 snippets 已經掌握了。

我們還是先回顧下 VSCode 的 snippets 語法

snippets 基礎

snippets 是這樣的 json 格式：

{
    "alpha": {
        "prefix": ["a", "z"],
        "body": [
            "abcdefghijklmnopqrstuvwxyz"
        ],
        "description": "字母",
        "scope": "javascript"
    }
}

• prefix 是觸發的前綴，可以指定多個

• body 是插入到編輯器中的內容，支持很多語法

• description 是描述

• scope 是生效的語言，不指定的話就是所有語言都生效

body 部分就是待插入的代碼，支持很多語法，也是一種 DSL（領域特定語言）。

支持通過 $1、$2 指定光標位置：

"$1  xxxx",
"yyyy $2"

可以多光標同時編輯：

"$1  xxxx $1"

可以加上 placeholader，也可以做默認值：

"${1:aaa}  xxxx",
"yyyy ${2:bbb}"

可以提供多個值來選擇：

"${1|卡頌,神光,yck|}最帥"

還提供了一些變量可以取：

"當前文件： $TM_FILENAME",
"當前日期： $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE"

而且還能對變量做正則替換：

"${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}"

基本語法過了一遍，大家知道支持啥就行，后面我們來做個真實的案例，把這些用一遍就會了。

通過 command + shift + p，輸入 snippets 然后選擇一種范圍：

snippets 有 project、global、language 3 種生效范圍。我個人寫 global 級別的比較多，項目和語言級別的也可以。

基礎過完了，接下來我們就來寫一個 snippets 吧。

實戰案例

我最近在做 vue 的項目，寫 router-link 比較多，所以封裝了個 router-link 代碼的 snippets。

我們先寫個最簡單的版本：

{
    "routerLink": {
        "prefix": "link",
        "body": [
            "<router-link to={ name:'xxx', params: {id: 1} } target='_blank'>link</router-link>"
        ],
        "description": "router-link 跳轉"
    }
}

這個沒啥好說的，就是根據前綴補全內容：

然后在 name、id、鏈接文字處加三個光標，也就是 $1、$2、$3：

{
    "routerLink": {
        "prefix": "link",
        "body": [
            "<router-link to={ name: $1, params: {id: $2} } target='_blank'>$3</router-link>"
        ],
        "description": "router-link 跳轉"
    }
}

可以按 tab 鍵快速編輯其中變化的部分：

然后加上 placeholder：

{
    "routerLink": {
        "prefix": "link",
        "body": [
            "<router-link to={ name: '${1:RouteName}', params: {id: ${2:id}} } target='_blank'>${3:link}</router-link>"
        ],
        "description": "router-link 跳轉"
    }
}

其實 target 部分也是可選的，這里我們用多選來做：

選項有兩個，就是 target="_blank" 或者空格。

${3| ,target=\"_blank\"|}

所以 snippets 就變成了這樣：

{
    "routerLink": {
        "prefix": "link",
        "body": [
            "<router-link to={ name: '${1:RouteName}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>"
        ],
        "description": "router-link 跳轉"
    }
}

跳轉地址大多數是和當前文件名有關，比如 XxxYyyZzzList 跳轉 XxxYyyZzzDetail 的比較多。

所以我們默認值取當前文件名，用 TM_FILENAME 變量（所有可用變量可以在 vscode 官網查）：

${1:$TM_FILENAME}

現在的 snippets：

{
    "routerLink": {
        "prefix": "link",
        "body": [
            "<router-link to={ name: '${1:$TM_FILENAME}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>"
        ],
        "description": "router-link 跳轉"
    }
}

確實把文件名填上去了，但是還要手動改，能不能填上去的就是改了之后的呢？

可以，變量支持做 transform，也就是正則替換：

XxxList.vue 要取出 Xxx 來，然后拼上 Detail，這樣的正則不難寫：

用 js 寫是這樣的：

'XxxList.vue'.replace(/(.*)List\.vue/,'$1Detail')

在 snippets 里也差不多，只不過用 / 分開：

${TM_FILENAME/(.*)List\\.vue/$1Detail/i

所以 snippets 就變成了這樣：

{
    "routerLink": {
        "prefix": "link",
        "body": [
            "<router-link to={ name: '${1:${TM_FILENAME/(.*)List\\.vue/$1Detail/i}}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:link}</router-link>"
        ],
        "description": "router-link 跳轉"
    }
}

填入的代碼都是替換好了的

鏈接的內容我們希望用選中的內容，這個也有變量，就是 TM_SELECTED_TEXT。

最后，我們希望 router-link 這個標簽也可以變，而且改的時候開閉標簽可以一起改。

這個要用多光標編輯，指定多個 $x 為同一個數字就行。

<${5:router-link}></${5:router-link}>

最終的 snippets是所有 snippets 語法都用了一遍。

完整 snippets 如下，大家可以在 VSCode 里用用看，用起來體驗還是很爽的：

{
    "routerLink": {
        "prefix": "link",
        "body": [
            "<${5:router-link} to={ name: '${1:${TM_FILENAME/(.*)List\\.vue/$1Detail/i}}', params: {id: ${2:id}} } ${3| ,target=\"_blank\"|}>${4:$TM_SELECTED_TEXT}</${5:router-link}>"
        ],
        "description": "router-link 跳轉"
    }
}

基本所有主流編輯器都支持 snippets，也就是配置代碼片段來提高開發效率，VSCode 也不例外，這是一個很有用的功能。

VSCode snippets 支持 global、project、language 3 種生效范圍。我個人用全局的比較多。

它也算是一種 DSL 了，支持很多語法，比如指定光標位置、多光標編輯、placeholder、多選值、變量、對變量做轉換等語法。

• 指定光標位置：$x

• 多光標編輯：$x $x

• 指定 placeholder 文本：${x:placeholder}

• 指定多選值：${x|aaa,bbb|}

• 取變量：$VariableName

• 對變量做轉換：${VariableName/正則/替換的文本/}

我們寫了一個 router-link 的 snippets，綜合運用了這些語法，過一遍就會了。

能自己定義適合自己的 snippets，對于提高開發效率是很有幫助的。

vscode有什么用

Visual Studio Code 是一個運行于 OS X，Windows和 Linux 之上的，針對于編寫現代 web 和云應用的跨平臺編輯器，它為開發者們提供了對多種編程語言的內置支持，并且正如 Microsoft 在Build 大會的 keynote 中所指出的，這款編輯器也會為這些語言都提供了豐富的代碼補全和導航功能。

感謝大家的閱讀，以上就是“VSCode中如何用snippets來提升開發效率”的全部內容了，學會的朋友趕緊操作起來吧。相信億速云小編一定會給大家帶來更優質的文章。謝謝大家對億速云網站的支持！