Visual Studio Code - Các extension hữu ích

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:

Kỹ thuật sử dụng:

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
Github Linkedin Dev.to Fandom


All Rights Reserved