Visual Studio Code extension: แชร์ประสบการณ์ในการพัฒนา

VSCode Extension — content

1. แรงบัลดาลใจ

Visual Studio Code Marketplace

2. กำหนดขอบเขตของงาน

3. รายละเอียด project

Search result Cheatsheet in VSCode marketplace
1. pdf version, 2. website version, 3. webview version

4. ประสบการณ์ระหว่างการพัฒนา

// example command
npm install -g yo generator-code && yo code
Project structure after run “yo code” with “New Extension (TypeScript)”
คำสั่ง “lint:fix”
https://github.com/jojoee/vscode-conda-cheatsheet/blob/master/src/extension.ts
Code และ description ซึ่งเป็นสองส่วนหลักๆในการทำ cheatsheet
https://github.com/pugjs/pug
ทำให้ support ทั้ง 2 themes — ซ้าย: dark theme, ขวา: lighttheme
https://github.com/jojoee/vscode-conda-cheatsheet/blob/master/asset/custom.css
Conda Cheatsheet: Webview — screenshot
main.js เป็นตัวส่ง event และ extension.ts เป็นตัวรับ event
ก่อน (เปลี่ยน .pug เป็น .html ขณะใช้งาน)
- ทำเป็น VSCode extension package เพื่อขึ้น VSCode marketplace
- user เรียกใช้งานคำสั่ง
- VSCode extension เรียกใช้งาน module “pug” เพื่อแปลง .pug เป็น .html
- นำ html ไปใช้งานใน webview
หลัง (pre-compile เป็น html ก่อนทำเป็น VSCode extension package)
- เขียน script ขึ้นมาทำการ แปลง .pug เป็น .html เตรียมไว้เลย
- ทำเป็น VSCode extension package เพื่อขึ้น VSCode marketplace
- user เรียกใช้งานคำสั่ง
- VSCode extension จะเรียกใช้งาน .html (ที่ compile ไว้แล้ว) ไปใช้งานได้เลย
conda-cheatsheet-1.2.2.vsix (3513 files, 3.37MB) - before
conda-cheatsheet-1.2.3.vsix (14 files, 359.68KB) - after
Demo of Conda Cheatsheet VSCode extension
Travis CI build of jojoee/vscode-conda-cheatsheet

5. สิ่งที่ควรปรับปรุงแก้ไขและศึกษาทำเพิ่ม

6. ส่งท้าย

Conda Cheatsheet — extension preview inside VSCode editor

--

--

Web / Game / AI

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store