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:
- Telepítse a
yo
ésgenerator-code
csomagokat globálisan anpm install -g yo generator-code
futtatásával. - 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.