目錄
如何设置代码片段
代码片段语法
为项目创建代码片段
寫在最後
首頁 開發工具 VSCode VSCode中怎麼定義程式碼片段,讓編碼快到飛起!

VSCode中怎麼定義程式碼片段,讓編碼快到飛起!

Jan 05, 2022 pm 07:13 PM
vscode

VSCode中怎么定义代码片段?下面本篇文章给大家介绍一下给VSCode定义代码片段的方法,让coding速度快到飞起,希望对大家有所帮助!

VSCode中怎麼定義程式碼片段,讓編碼快到飛起!

代码片段可以理解为模板,当我们输入指定时,按下【tab】或者【enter】即可出现对应的模板。【推荐学习:《vscode入门教程》】

只要代码片段写的好,升职加薪少不了~

代码片段的好处与坏处

coder对代码片段的评价褒贬不一,下面这张图解释了代码片段的好处与坏处:

VSCode中怎麼定義程式碼片段,讓編碼快到飛起!

何时使用代码片段

关于什么时候使用代码片段,我的建议是:

  • 当你对一个东西足够熟练,例如console.log(),这个时候可以为其设置代码片段。
  • 有些东西特别繁琐,每次都需要写一遍,例如Vue单文件中的初步定义的内容。

当然,上面的内容仅仅是我的建议。

如何设置代码片段

首先你准备一个VSCode,然后确定你操作系统,然后开始操作:

  • Windows系统:【 文件】→【首选项】→【用户片段】
  • Mac系统: 【Code】→【首选项】→【用户片段】

然后你就可以看到下面这个内容

VSCode中怎麼定義程式碼片段,讓編碼快到飛起!

然后你就可以对现有的代码片段进行修改,或者创建一个新的代码片段,这里我们创建一个名为test-snippets的全局代码片段,来进行演示。

代码片段语法

我们创建完成以后,会出现一个类似于JSON的语法,内容如下:

{
  // 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中的代码片段语法进行学习。

首先中的内容是被一个对象进行包裹,对象中的每一个属性表示一个代码片段,属性名为代码片段的名称,在触发代码片段的时候会展示匹配到的代码片段名称,例子中的属性名称为Print to console

接下来我们学习代码片段内每个属性是干什么的。

  • scope:表示代码片段作用于哪种语言。 不同语言之间以,隔开。 常用的有javascript, typescript,html,css,vue等。 如果设置为""就代表所有地方都生效。
  • prefix:对应触发代码片段的字符。
  • description:代码片段的描述。
  • body:对象代码片段的内容,通常为一个数组,数组内的一行对应生成代码片段后的一行。

推荐一个用于生成代码片段的网站,链接如下:https://snippet-generator.app/

$占位符

上面的例子中,我们输入log按下【tab】键即可出现如下代码:

console.log();
登入後複製

出现这段内容后,光标在()内,然后按下【tab】键,光标即可调到下一行,也就是$2的位置,同样的道理,我们还可以设置$3$4 等等

值得注意的是:$0用于设置最终光标的位置。

默认与可选项

如果想让占位符中具有一个默认值,可以通过${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        当前行的内容
TM_CURRENT_WORD        光标下的单词的内容或空字符串
TM_LINE_INDEX          基于零索引的行号
TM_LINE_NUMBER         基于一索引的行号
TM_FILENAME            当前文档的文件名
TM_FILENAME_BASE       当前文档的文件名(不含后缀名)
TM_DIRECTORY           当前文档的目录
TM_FILEPATH            当前文档的完整文件路径
CLIPBOARD              剪切板里的内容
WORKSPACE_NAME         已打开的工作空间或文件夹的名称

CURRENT_YEAR           当前年(四位数)
CURRENT_MONTH          当前月
CURRENT_DATE           当前日
CURRENT_DAY_NAME_SHORT 当天的短名称(’Mon’)
CURRENT_HOUR           当前小时
CURRENT_MINUTE         当前分钟
CURRENT_SECOND         当前秒

BLOCK_COMMENT_START   块注释开始标识,如 PHP /* 或 HTML <!--
BLOCK_COMMENT_END     块注释结束标识,如 PHP */ 或 HTML -->
LINE_COMMENT          行注释,如: PHP // 或 HTML <!-- -->
登入後複製

为项目创建代码片段

有些时候我们需要为具体的项目创建一些代码片段,其实也比较简单,我们只需要在当前项目的根目录创建一个.vscode文件夹,然后创建以.code-snippets的结尾的文件即可,写法与上面一致。

寫在最後

這裡我創建了一個GitHub倉庫,放一些VSCode中的程式碼片段,倉庫地址如下:https://github.com/ywanzhou/vscode-snippets

都看到這裡了,還不按讚支持~

更多關於VSCode的相關知識,請造訪:vscode教學! !

以上是VSCode中怎麼定義程式碼片段,讓編碼快到飛起!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vscode需要什麼電腦配置 vscode需要什麼電腦配置 Apr 15, 2025 pm 09:48 PM

VS Code 系統要求:操作系統:Windows 10 及以上、macOS 10.12 及以上、Linux 發行版處理器:最低 1.6 GHz,推薦 2.0 GHz 及以上內存:最低 512 MB,推薦 4 GB 及以上存儲空間:最低 250 MB,推薦 1 GB 及以上其他要求:穩定網絡連接,Xorg/Wayland(Linux)

vscode怎麼定義頭文件 vscode怎麼定義頭文件 Apr 15, 2025 pm 09:09 PM

如何使用 Visual Studio Code 定義頭文件?創建頭文件並使用 .h 或 .hpp 後綴命名在頭文件中聲明符號(例如類、函數、變量)使用 #include 指令在源文件中包含頭文件編譯程序,頭文件將被包含並使聲明的符號可用

vscode開始怎麼設置 vscode開始怎麼設置 Apr 15, 2025 pm 10:45 PM

要開啟並設置 VSCode,請按照以下步驟操作:安裝並啟動 VSCode。自定義首選項,包括主題、字體、空格和代碼格式化。安裝擴展以增強功能,例如插件、主題和工具。創建項目或打開現有項目。使用 IntelliSense 獲得代碼提示和補全。調試代碼以步進代碼、設置斷點和檢查變量。連接版本控制系統以管理更改和提交代碼。

vscode啟動前端項目命令 vscode啟動前端項目命令 Apr 15, 2025 pm 10:00 PM

啟動前端項目在 VSCode 中的命令是 code .。具體步驟包括:打開項目文件夾。啟動 VSCode。打開項目。在終端面板中輸入啟動命令 code .。按回車鍵啟動項目。

vscode什麼語言寫的 vscode什麼語言寫的 Apr 15, 2025 pm 11:51 PM

VSCode 是用 TypeScript 和 JavaScript 編寫的。首先,它的核心代碼庫是用 TypeScript 編寫的,這是一種擴展了 JavaScript 並增加了類型檢查功能的開源編程語言。其次,VSCode 的一些擴展和插件是用 JavaScript 編寫的。這種組合使 VSCode 成為一款靈活且可擴展的代碼編輯器。

vscode上一步下一步快捷鍵 vscode上一步下一步快捷鍵 Apr 15, 2025 pm 10:51 PM

VS Code 一步/下一步快捷鍵的使用方法:一步(向後):Windows/Linux:Ctrl ←;macOS:Cmd ←下一步(向前):Windows/Linux:Ctrl →;macOS:Cmd →

vscode用的是什麼語言 vscode用的是什麼語言 Apr 15, 2025 pm 11:03 PM

Visual Studio Code (VSCode) 由 Microsoft 開發,使用 Electron 框架構建,主要以 JavaScript 編寫。它支持廣泛的編程語言,包括 JavaScript、Python、C 、Java、HTML、CSS 等,並且可以通過擴展程序添加對其他語言的支持。

vscode設置中文方法 vscode設置中文方法 Apr 15, 2025 pm 09:27 PM

在 Visual Studio Code 中設置中文語言有兩種方法:1. 安裝中文語言包;2. 修改配置文件中的"locale"設置。確保 Visual Studio Code 版本為 1.17 或更高。

See all articles