Cara Membuat Tema Vscode Sendiri

Untuk memulainya kita bisa menggunakan alat yang namanya Yo Generator yaitu adalah alat untuk membuatkan kita boilerplate dalam membuat extensi di vscode.

Untuk memulainya Anda bisa install terlebih dahulu node package nya secara global seperti

1npm install -g yo generator-code
2
bashCopy

Setelah itu selesai, maka sekarang Anda bisa membuat tema dengan menjalankan perintah yo code seperti:

1yo code
2
bashCopy

Maka dia akan mengeluarkan output pertanyaan bahwa sebenarnya kita ingin membuat extensi apa.

1     _-----_     ╭──────────────────────────╮
2    |       |    │   Welcome to the Visual  │
3    |--(o)--|    │   Studio Code Extension  │
4   `---------´   │        generator!        │
5    ( _´U`_ )    ╰──────────────────────────╯
6    /___A___\   /
7     |  ~  |
8   __'.___.'__
9 ´   `  |° ´ Y `
10
11? What type of extension do you want to create? (Use arrow keys)
12❯ New Extension (TypeScript)
13  New Extension (JavaScript)
14  New Color Theme
15  New Language Support
16  New Code Snippets
17  New Keymap
18  New Extension Pack
19  New Language Pack (Localization)
20  New Web Extension (TypeScript)
21  New Notebook Renderer (TypeScript)
22
bashCopy

Jika Anda ingin membuat tema, maka Anda bisa pilih "New Color Theme", dan selanjutnya dia akan bertanya apakah kita ingin mulai dari awal atau ada extensi tema yang ingin ditiru? Jika tidak ada maka Anda bisa pilih "No, start fresh" seperti:

1? What type of extension do you want to create? New Color Theme
2? Do you want to import or convert an existing TextMate color theme? (Use arrow keys)
3❯ No, start fresh
4  Yes, import an existing theme but keep it as tmTheme file.
5  Yes, import an existing theme and inline it in the Visual Studio Code color theme file.
6
bashCopy

Selanjutnya dia akan menanya informasi seperti apa nama tema, pembuat, deskripsi singkat, dll. Dan setelah itu selesai, terakhir kalinya dia akan bertanya bahwa apakah kita ingin membukanya langsung dengan vscode, maka Anda jawab "y".

Jika sudah, maka dia menggenerasi beberap folder dan file untuk kemudian kita edit seperti tree di bawah ini:

1├── CHANGELOG.md
2├── README.md
3├── package.json
4├── themes
5│   └── irsyadadl-color-theme.json
6└── vsc-extension-quickstart.md
7
bashCopy

1 yang Anda perlu lihat adalah file yang ada di dalam folder themes yaitu irsyadadl-color-theme.json, disitulah tempat Anda mengedit semuanya. Berikut adalah boilerplate yang diberikannya.

1{
2	"name": "irsyadadl",
3	"colors": {...},
4	"tokenColors": [...]
5}
6
jsonCopy

colors itu untuk workbench, dan tokenColors untuk warna syntax, atau markup kita. Untuk contoh saja, saya akan langsung peraktekkan untuk colors terlebih dahulu.

1{
2    "name": "irsyadadl",
3    "colors": {
4        "editor.background": "#1F2937",
5        "editorGutter.background": "#1F2937",
6        "editorGroupHeader.noTabsBackground": "#1F2937",
7        "editorGroupHeader.border": "#374151",
8        "sideBar.background": "#111827",
9        "scrollbar.shadow": "#1E293B",
10        "sideBar.border": "#374151",
11        "sideBar.foreground": "#9CA3AF"
12    },
13    "tokenColors": [...]
14}
15
jsonCopy

Lanjut untuk tokenColors nya bisa Anda buat seperti ini saja dahulu.

1{
2    "name": "irsyadadl",
3    "colors": {...},
4    "tokenColors": [
5        {
6            "name": "String",
7            "scope": [
8                "string.quoted.double.json.comments",
9                "string.quoted.single.html",
10                "string.quoted.double.js.jsx",
11                "string.quoted.single.php",
12                "string.quoted.double.html",
13                "strings"
14            ],
15            "settings": {
16                "foreground": "#EFD5AF"
17            }
18        }
19    ]
20}
21
bashCopy

Mungkin Anda akan bingung dan bertanya bagaimana cara mengetahui tag, function, comments, dll. Tenang! Anda bisa tekan ctrl/cmd + shift + p pada keyboard dan cari "Inspect Editor Tokens And Scopes". Anda hanya perlu arahkan cursor tepat dimana warna yang ingin dirobah seperti gambar berikut:

Jika sudah seperti itu, maka akan muncul textmate scopes, atau keyword.operator yang bisa Anda cari di dalam file x-theme.json tersebut. Kemudian untuk sidebar, activityBar, dll Anda bisa lihat langsung di sini.

Setelah kalian selesai membuat temanya, waktunya untuk menerbitkannya. Pertama, Anda harus mendaptar dahulu di Azure DevOps, ikuti langkah selanjutnya seperti membuat organisasi, mendaftarkan tema yang telah dibuat, dan kemudian terbitkan.

Semoga artikel ini bermanfaat, until next time. 👋🏻