站長資訊網(wǎng)
最全最豐富的資訊網(wǎng)站

VSCode中怎么定義代碼片段,讓編碼快到飛起!

VSCode中怎么定義代碼片段?下面本篇文章給大家介紹一下給VSCode定義代碼片段的方法,讓coding速度快到飛起,希望對大家有所幫助!

VSCode中怎么定義代碼片段,讓編碼快到飛起!

代碼片段可以理解為模板,當我們輸入指定時,按下【tab】或者【enter】即可出現(xiàn)對應(yīng)的模板。【推薦學習:《vscode入門教程》】

只要代碼片段寫的好,升職加薪少不了~

代碼片段的好處與壞處

coder對代碼片段的評價褒貶不一,下面這張圖解釋了代碼片段的好處與壞處:

VSCode中怎么定義代碼片段,讓編碼快到飛起!

何時使用代碼片段

關(guān)于什么時候使用代碼片段,我的建議是:

  • 當你對一個東西足夠熟練,例如console.log(),這個時候可以為其設(shè)置代碼片段。
  • 有些東西特別繁瑣,每次都需要寫一遍,例如Vue單文件中的初步定義的內(nèi)容。

當然,上面的內(nèi)容僅僅是我的建議。

如何設(shè)置代碼片段

首先你準備一個VSCode,然后確定你操作系統(tǒng),然后開始操作:

  • Windows系統(tǒng):【 文件】→【首選項】→【用戶片段】
  • Mac系統(tǒng): 【Code】→【首選項】→【用戶片段】

然后你就可以看到下面這個內(nèi)容

VSCode中怎么定義代碼片段,讓編碼快到飛起!

然后你就可以對現(xiàn)有的代碼片段進行修改,或者創(chuàng)建一個新的代碼片段,這里我們創(chuàng)建一個名為test-snippets的全局代碼片段,來進行演示。

代碼片段語法

我們創(chuàng)建完成以后,會出現(xiàn)一個類似于JSON的語法,內(nèi)容如下:

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

接下來我們對VSCode中的代碼片段語法進行學習。

首先中的內(nèi)容是被一個對象進行包裹,對象中的每一個屬性表示一個代碼片段,屬性名為代碼片段的名稱,在觸發(fā)代碼片段的時候會展示匹配到的代碼片段名稱,例子中的屬性名稱為Print to console

接下來我們學習代碼片段內(nèi)每個屬性是干什么的。

  • scope:表示代碼片段作用于哪種語言。 不同語言之間以,隔開。 常用的有javascript, typescript,html,css,vue等。 如果設(shè)置為""就代表所有地方都生效。
  • prefix:對應(yīng)觸發(fā)代碼片段的字符。
  • description:代碼片段的描述。
  • body:對象代碼片段的內(nèi)容,通常為一個數(shù)組,數(shù)組內(nèi)的一行對應(yīng)生成代碼片段后的一行。

推薦一個用于生成代碼片段的網(wǎng)站,鏈接如下:https://snippet-generator.app/

$占位符

上面的例子中,我們輸入log按下【tab】鍵即可出現(xiàn)如下代碼:

console.log();

出現(xiàn)這段內(nèi)容后,光標在()內(nèi),然后按下【tab】鍵,光標即可調(diào)到下一行,也就是$2的位置,同樣的道理,我們還可以設(shè)置$3$4 等等

值得注意的是:$0用于設(shè)置最終光標的位置。

默認與可選項

如果想讓占位符中具有一個默認值,可以通過${1:defalt}的形式來編寫。

如果行提供一些選項,可以通過${1|one,two,three|}的形式來編寫,例如:

{   "import": {     "scope": "javascript,typescript",     "prefix": "import",     "body": [       "import { $2 } from "${1|axios,lodash,day|}"",       "$3"     ],     "description": "導入模塊"   } }

測試如下:

VSCode中怎么定義代碼片段,讓編碼快到飛起!

然后按下【tab】后如下圖

VSCode中怎么定義代碼片段,讓編碼快到飛起!

常量

在代碼片段中,VSCode為我們提供了一些常量,使用方式也比較簡單,例如$TM_FILENAME

TM_SELECTED_TEXT       當前選定的文本或空字符串 TM_CURRENT_LINE        當前行的內(nèi)容 TM_CURRENT_WORD        光標下的單詞的內(nèi)容或空字符串 TM_LINE_INDEX          基于零索引的行號 TM_LINE_NUMBER         基于一索引的行號 TM_FILENAME            當前文檔的文件名 TM_FILENAME_BASE       當前文檔的文件名(不含后綴名) TM_DIRECTORY           當前文檔的目錄 TM_FILEPATH            當前文檔的完整文件路徑 CLIPBOARD              剪切板里的內(nèi)容 WORKSPACE_NAME         已打開的工作空間或文件夾的名稱  CURRENT_YEAR           當前年(四位數(shù)) CURRENT_MONTH          當前月 CURRENT_DATE           當前日 CURRENT_DAY_NAME_SHORT 當天的短名稱(’Mon’) CURRENT_HOUR           當前小時 CURRENT_MINUTE         當前分鐘 CURRENT_SECOND         當前秒  BLOCK_COMMENT_START   塊注釋開始標識,如 PHP /* 或 HTML <!-- BLOCK_COMMENT_END     塊注釋結(jié)束標識,如 PHP */ 或 HTML --> LINE_COMMENT          行注釋,如: PHP // 或 HTML <!-- -->

為項目創(chuàng)建代碼片段

有些時候我們需要為具體的項目創(chuàng)建一些代碼片段,其實也比較簡單,我們只需要在當前項目的根目錄創(chuàng)建一個.vscode文件夾,然后創(chuàng)建以.code-snippets的結(jié)尾的文件即可,寫法與上面一致。

寫在最后

這里我創(chuàng)建了一個GitHub倉庫,放一些VSCode中的代碼片段,倉庫地址如下:https://github.com/ywanzhou/vscode-snippets

都看到這了,還不點贊支持一下~

贊(0)
分享到: 更多 (0)
網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
久久天堂AV女色优精品| 精品久久久久中文字幕日本| 一色屋精品视频任你曰| 国产99精品在线观看| 精品哟哟哟国产在线观看不卡| 99久久精品午夜一区二区| 精品人妻久久久久久888| 久久国产乱子伦精品免费看| 久久精品嫩草影院| 亚洲精品无码精品mV在线观看| 久久精品?ⅴ无码中文字幕| 亚洲av无码国产精品色在线看不卡| 亚洲国产精品日韩在线| 日韩电影手机在线观看| 国产精品国产香蕉在线观看网| 青青草国产精品视频| 国产精品卡一卡二卡三 | 国产一区精品视频| 国产精品嫩草影院在线| 国产精品亚洲一区二区三区| 国产精品高清m3u8在线播放 | 精品综合久久久久久88小说| 亚洲精品国产V片在线观看| 亚洲国产综合精品中文字幕| 亚洲国产综合精品中文字幕 | 国产a∨精品一区二区三区不卡| 国内精品久久久久久野外| 久久91精品久久91综合| 亚洲AV永久无码精品水牛影视| 亚洲国产精品无码久久久不卡| 久草视频在线这里精品| 久久精品夜色国产亚洲av| 少妇人妻偷人精品视频| 91精品国产闺蜜国产在线闺蜜| 91免费福利精品国产| 中文字幕色婷婷在线精品中| 国产精品揄拍一区二区| 欧美日韩精品一区二区在线视频| WWW国产精品内射熟女| 国产精品露脸国语对白河北| 国产成人久久精品|