本文使用 Zhihu On VSCode 創作并發布

作為一名程序員，在編碼的過程中，難免會遇到要寫些重復性的代碼；假如每次都重新碼一遍，既浪費了時間，也有傷身體。倘若可以配置一個像快捷鍵一樣，輸入簡單的字母單詞，立即就能調出代碼片段，豈不美哉？在本篇文章中，就跟大家分享下，如何在 IDE 中配置和使用代碼片段，從而讓我們可以如極客一般，高效編碼，節省時間。

原文首發于如何優雅地配置快應用的代碼片段 | vivo 快應用官方博客。

---

如何使用

打開配置用戶代碼片段

快速應用開發工具（Windows 用戶在文件下）=> 首選項 => 用戶片段 => 新建代碼片段文件 => 輸入文件名；

或者利用快捷鍵：Mac：? + ? + p（Windows：ctrl + shift + p）=> 輸入 snippet => 選擇配置用戶代碼片段；

快應用 IDE - 代碼片段

編寫自己的代碼片段

首先，需要了解一下 snippets 的語法：

• prefix：代碼片段名字，即輸入此名字就可以調用代碼片段；
• scope：采用一個或多個語言標識符的附加屬性，這使該代碼段僅可用于那些指定的語言。如果未提供任何 scope 屬性，則全局代碼段適用于所有語言；
• body：這個是代碼段的主體。需要編寫的代碼放在這里，換行符和嵌入的選項卡將根據插入代碼段的上下文進行格式化；
• $1：生成代碼后光標的初始位置；
• $2：生成代碼后光標的第二個位置,按 tab 鍵可進行快速切換,還可以有 $3,$4,$5.....；
• ${1,字符}：生成代碼后光標的初始位置(其中 1 表示光標開始的序號，字符表示生成代碼后光標會直接選中字符；
• description：代碼段描述,輸入名字后編輯器顯示的提示信息；

除此之外，需要補充說明的是：

• 如果沒有 description，默認提示信息是類似下面例子中的 console（即 key 值）
• 代碼多行語句的以 , 隔開
• 每行代碼需要用引號包裹住
• 特殊字符需要用 進行轉義

實戰例子：

在日常開發中，我們經常需要打印日志，可以配置一個 console.log 的代碼片段：

{// 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:"console": {"scope": "javascript,typescript","prefix": "cl","body": ["console.log('quickapp $1 = ', $2)"],"description": "Log output to console"} }

具體效果如下圖例所示：

快應用 IDE - 代碼片段

在輸入 cl 之后，直接可以回車選擇代碼片段，第一個參數可以填充參數名稱，插入 tab 鍵之后，定位到第二個參數，填充需要打印的變量即可，可謂非常方便。

注：

如果遇到定義的代碼片段不在最上方，而在最下方，打開設置，搜索代碼段，則將其下方的分段轉換為內聯即可。打開設置，搜索 snippet，則將其下方的分段轉換為 inline 即可。

快應用 IDE - 代碼片段

常用的代碼片段

{"console": {"scope": "javascript,typescript","prefix": "cl","body": ["console.log('quickapp $1 = ', $2)"],"description": "Log output to console"},"callback": {"scope": "javascript,typescript","prefix": "cb","body": ["success: ($1) => {","t$2","},","fail: ($3) => {","t$4","},","complete: ($5) => {","t$6","}"],"description": "Callback Success And Fail"},"ux": {"prefix": "ux","body": ["<template>"," <div class="$1">n"," </div>","</template>n","<script>","export default {"," data() {"," return {}"," }","}","</script>n","<style>","","</style>",],"description": "ux file"} }

說明：

cl：打印日志；

cb：回調的 success，fail 和 complete；

ux：初始化 ux 文件；

總結

以上是生活随笔為你收集整理的对文本根据特殊字符进行分段代码_如何优雅地配置快应用的代码片段的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。