Hello mọi người,

Bài viết đầu tiên của mình trên VIBLO, mình muốn chia sẻ một trang web đơn giản mình đã xây dựng để liệt kê các extension hữu ích dành cho VS Code.

TL;DR

Dành cho những bạn lười đọc:

• Đây là trang web thành quả
• Đây là mã nguồn

Kỹ thuật sử dụng:

• HTML, JS
• Cú pháp ES6
• Fetch API
• Bulma CSS

Coding

Cấu trúc chính gồm có

vscode-exts
  |_exts.js
  |_get.js
  |_index.html

Đầu tiên mình tạo file exts.js để chứa mảng các extension ID. ID này bạn có thể lấy từ URL của Marketplace, ví dụ: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Tiếp theo, tạo file get.js để thực hiện việc lấy data bằng Fetch API:

const marketUrl = "https://marketplace.visualstudio.com/items?itemName=";
const installUrl = "vscode://";
const selector = {
  name: ".ux-item-name",
  author: ".ux-item-publisher",
  installs: ".ux-item-rating",
};

const promises = extensions.map((ext) =>
  fetch(marketUrl + ext)
    .then((page) => page.text())
    .then((content) => {
      const dom = new DOMParser().parseFromString(content, "text/html");
      return {
        name: dom.querySelector(selector.name).textContent,
        author: dom.querySelector(selector.author).textContent,
        installs: dom.querySelector(selector.installs).textContent.replace(/[^\d,]/g, ""),
        marketUrl: marketUrl + ext,
        installUrl: installUrl + ext,
      };
    })
);

const getExtensions = () => Promise.all(promises);

Ở đây mình dùng Fetch để lấy data trực tiếp từ cây DOM. Mình map các extension ID vào request, sau đó trả về một Promise sau khi tất cả các request cùng hoàn tất.

Cuối cùng là tạo file index.html, nhúng 2 file js vào, sử dụng Bulma CSS để tinh chỉnh giao diện và hiển thị data lên giao diện.

Mong là bài chia sẻ giúp ích cho mọi người.
@khangnd