快捷符文生成器：css-gum 的 Snippet 模組

17th鐵人賽

jzovvo

2025-10-09 02:49:22

101 瀏覽

分享至

快捷符文生成器：css-gum 的 Snippet 模組

在「手工刻印的快捷符文」中，我們知道了編輯器有個很好用的功能： Snippet，輸入指定的語法可以呼叫對應模板來替換的功能。但是當時我們只能「手動」去寫 Snippet 設定檔，於是 css-gum 提供了 Snippet 模組，它可以「自動」幫你生成設定檔！

完成這件事情需要做兩個步驟：

生成 Snippet 設定。
將 Snippet 設定寫入設定檔。

生成 `Snippet` 設定

Snippet 中有兩個方法：

Snippet.genVSCodeSnippetCore：生成 Gen.genFuncsCore 對應的 Snippet 設定。
Snippet.genVSCodeSnippetDraftWidth：生成 Gen.genFuncsDraftWidth 對應的 Snippet 設定。
- pointsSize: number：
  - 總共有幾張設計稿。
  - 必填。
- firstIndex: number：
  - 批量生成函式的首位數字。
  - 預設值為 0。

通用參數：

scope: string[]：
- Snippet 設定規則中的 scope，例如 {scope: ['javascript', 'typescript']}。
- 預設值： ['html','sass','stylus','css','scss','less']。
nameXxx: string：
- 自定義函式名，例如 {nameVw: 'hello'}。
snippetPrefixXxx: string：
- Snippet 設定規則中的 prefix，例如 {snippetPrefixVw: 'hi'}。
- 預設會使用 nameXxx 的值。

import {Snippet} from 'css-gum'

console.log(Snippet.genVSCodeSnippetCore())
  // {
  //   em: { prefix: 'em', body: 'em($1,$2)$0', scope: 'html,sass,stylus,css,scss,less' },
  //   lh: { prefix: 'lh', body: 'lh($1,$2)$0', scope: 'html,sass,stylus,css,scss,less' },
  //   ...
  // }

console.log(Snippet.genVSCodeSnippetCore({scope: ['c', 'd'], nameEm: 'hello', snippetPrefixEm: 'hi'}))
  // {
  //   hello: { prefix: 'hi', body: 'hello($1,$2)$0', scope: 'c,d' },
  //   lh: { prefix: 'lh', body: 'lh($1,$2)$0', scope: 'c,d' },
  //   ...
  // }

console.log(Snippet.genVSCodeSnippetDraftWidth({pointsSize:3, firstIndex: 10}))
  // {
  //   vw10: { prefix: 'vw10', body: 'vw10($1)$0', scope: 'html,sass,stylus,css,scss,less' },
  //   vw11: { prefix: 'vw11', body: 'vw11($1)$0', scope: 'html,sass,stylus,css,scss,less' },
  //   vw12: { prefix: 'vw12', body: 'vw12($1)$0', scope: 'html,sass,stylus,css,scss,less' },
  //   vwc10: { prefix: 'vwc10', body: 'vwc10($1)$0', scope: 'html,sass,stylus,css,scss,less' },
  //   ...
  // }

這樣我們就能很輕易的生成 Snippet 設定，接著只需將這些設定寫入 .vscode/???.code-snippets 設定檔即可。

將 `Snippet` 設定寫入設定檔

Snippet 模組提供 Snippet.writeSnippetsToFiles 方法，用來寫入 Snippet 設定到指定文件中，總共有兩個參數：

Snippet 設定：就是我們剛才用生成函式所產生的那種資料結構，詳情可參考 Snippet 官方文件。
設定檔路徑：string[]。
- 接收 string[] 是因為有些人想用檔名而非 scope 設定來指定檔案類型，此時可能會需要生成多個 code-snippets 檔案。

node.js

import {Snippet} from 'css-gum'
import {dirname, join} from 'path'
import {fileURLToPath} from 'url'

const __dirname = import.meta.dirname ?? dirname(fileURLToPath(import.meta.url)) ?? ''
const snippetOutput = [
  join(__dirname, '.vscode/css-gum.code-snippets'),
]

const snippetConfig = {
  ...Snippet.genVSCodeSnippetDraftWidth({pointsSize: 2, scope: ['javascript']}),
  ...Snippet.genVSCodeSnippetCore({scope: ['javascript']}),
}

Snippet.writeSnippetsToFiles(snippetConfig, snippetOutput)

結果

% tree -I node_modules -a
.
├── main.js
├── package-lock.json
└── package.json

% node ./main.js

% tree -I node_modules -a
.
├── .vscode
│   └── css-gum.code-snippets # <-
├── main.js
├── package-lock.json
└── package.json

以上就是動態生成 Snippet 文件的基本用法。

Gen 模組生成設定

除了 scope、snippetPrefixXxx、pointsSize 參數以外，Gen 模組的函式參數涵蓋了大部分 Snippet 模組生成設定函式的參數，所以其實 Gen 模組內部也執行了對應的 Snippet 生成設定函式：

pointsSize 直接用 points.length 來獲取。
Gen 模組的函式可以接收 scope、snippetPrefixXxx 參數。
返回的內容除了 core 以外，還有 VSCodeSnippet，讓你可以拿去寫入 snippet 設定檔。

程式碼

import {dirname, join} from 'path'
import {Gen, Snippet} from 'css-gum'
import {fileURLToPath} from 'url'

const __dirname = import.meta.dirname ?? dirname(fileURLToPath(import.meta.url)) ?? ''
const designDraft = [375, 1440]
const snippetOutput = [
  join(__dirname, '.vscode/css-gum.code-snippets'),
]

const nameVw = 'pxToVw'
const snippetPrefixVw = 'vw'

const funcsDraftWidth = Gen.genFuncsDraftWidth({points: designDraft, nameVw, snippetPrefixVw, scope: ['javascript']})

// const snippetConfig = {
//   ...Snippet.genVSCodeSnippetDraftWidth({pointsSize: designDraft.length, nameVw, snippetPrefixVw, scope: ['javascript']}),
// }

Snippet.writeSnippetsToFiles(funcsDraftWidth.VSCodeSnippet, snippetOutput)

結果