Ez az oktatóanyag bemutatja, hogyan hozhat létre Visual Studio Code (VS Code) bővítményt, amely lekéri a Medium blogbejegyzéseket, és lehetővé teszi, hogy közvetlenül a szerkesztőn belül keressen bennük. Kövesse az alábbi lépéseket saját bővítmény létrehozásához és a VS Code élményének testreszabásához:

  1. Telepítse a yo és generator-code csomagokat globálisan a npm install -g yo generator-code futtatásával.
  2. Futtassa a yo code programot a termináljában. A rendszer felkéri, hogy válasszon opciókat a bővítményhez. Válassza a következő lehetőségeket:
  • Kiterjesztés típusa: New Extension (javascript)
  • Bővítmény neve: mediumBlog
  • Bővítmény azonosítója: Blog
  • Leírás: Hagyja üresen
  • A git adattár inicializálása: Yes
  • Forráskód kötegelése webcsomaggal: No
  • Csomagkezelő: npm
  • Új mappa megnyitása VS kóddal: Open with code

3. Másolja ki és illessze be a következő kódot a package.json fájlba:

{
  "name": "medium-blog-ashish",
  "displayName": "Medium Blog",
  "description": "Search Medium Blog Of @kingofthepirates",
  "version": "1.0.1",
  "publisher": "AshishPandey",
  "repository": {
    "url": "https://github.com/Pandeyashish17/vs-code-extension-medium-blog"
  },
  "icon": "logo.png",
  "engines": {
    "vscode": "^1.52.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:extension.searchMedium"
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      {
        "command": "extension.searchMedium",
        "title": "Search Medium"
      }
    ]
  },
  "scripts": {
    "lint": "eslint .",
    "pretest": "npm run lint",
    "test": "node ./test/runTest.js"
  },
  "devDependencies": {
    "@types/vscode": "^1.52.0",
    "@types/glob": "^7.1.3",
    "@types/mocha": "^8.0.4",
    "@types/node": "^12.11.7",
    "eslint": "^7.15.0",
    "glob": "^7.1.6",
    "mocha": "^8.1.3",
    "typescript": "^4.1.2",
    "vscode-test": "^1.4.1"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "fast-xml-parser": "^3.17.6"
  }
}

4. A extension.js fájlba illessze be a következő kódot:

const vscode = require("vscode");
const axios = require("axios");
const xmlParser = require("fast-xml-parser");

async function activate(context) {
  const res = await axios.get("https://medium.com/feed/@kingofthepirates");
  // Replace "kingofthepirates" with the desired Medium username.

  const articles = xmlParser
    .parse(res.data)
    .rss.channel.item
    .sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate))
    .map((article) => {
      return {
        label: article.title,
        detail: article.description,
        link: article.link,
      };
    });

  let disposable = vscode.commands.registerCommand(
    "extension.searchMedium",
    async function () {
      const article = await vscode.window.showQuickPick(articles, {
        matchOnDetail: true,
      });

      if (article == null) return;

      vscode.commands.executeCommand("vscode.open", vscode.Uri.parse(article.link));
    }
  );

  context.subscriptions.push(disposable);
}

module.exports = {
  activate,
};

Ez a kód a axios könyvtárat használja a Medium RSS feed lekérésére a megadott felhasználónévhez, elemzi a hírfolyamot a fast-xml-parser használatával, és tömbben tárolja a cikkeket. Ezután regisztrál egy parancsot, amely megjeleníti a cikkek listáját a showQuickPick függvény használatával, és lehetővé teszi a felhasználó számára, hogy a open parancs meghívásával megnyitja a kiválasztott cikket a böngészőjében.

5. Futtassa a npm install parancsot a szükséges függőségek telepítéséhez.

6. Tesztelje bővítményét a npm run test futtatásával.

7. A bővítmény közzétételéhez kövesse a VS Code Extension documentation című részben található utasításokat.

Ez az! Mostantól van egy működő VS Code kiterjesztése, amely lehetővé teszi, hogy közvetlenül a szerkesztőből keressen a Medium cikkek között. A kiterjesztés testreszabható a kód módosításával és további funkciók hozzáadásával.