M

MLOG

Slovenščina

Odkrijte moč VS Code z učenjem razvoja razširitev po meri. Ta vodnik ponuja popoln pregled, od namestitve do objave, kar vam omogoča izboljšanje vašega kodirnega okolja in deljenje svojih stvaritev s svetom.

Obvladovanje razvoja razširitev za VS Code: Obsežen vodnik za globalne razvijalce

Visual Studio Code (VS Code) je postal urejevalnik kode, ki ga uporabljajo milijoni razvijalcev po vsem svetu. Njegova priljubljenost izhaja iz njegove lahkotnosti, zmogljivih funkcij in, kar je najpomembneje, njegove razširljivosti. Sposobnost ustvarjanja razširitev po meri omogoča razvijalcem, da prilagodijo urejevalnik svojim posebnim potrebam, s čimer povečajo produktivnost in poenostavijo poteke dela. Ta obsežen vodnik vas bo vodil skozi postopek ustvarjanja lastnih razširitev za VS Code, od začetne nastavitve do objave vaše stvaritve za uporabo po vsem svetu.

Zakaj razvijati razširitve za VS Code?

Razvoj razširitev za VS Code ponuja številne prednosti, tako za posamezne razvijalce kot za organizacije:

Predpogoji

Preden se potopite v razvoj razširitev, se prepričajte, da imate nameščeno naslednje:

Nastavitev vašega razvojnega okolja

Ko so predpogoji izpolnjeni, ste pripravljeni na nastavitev razvojnega okolja:

  1. Ustvarite nov projekt razširitve: Odprite svoj terminal in zaženite naslednji ukaz za zagon generatorja razširitev:
    2. yo code
  2. Odgovorite na pozive: Generator bo postavil vrsto vprašanj o vaši razširitvi. Tukaj je razčlenitev pogostih pozivov in priporočenih odgovorov:
    • Katero vrsto razširitve želite ustvariti? Izberite "New Extension (TypeScript)" za razširitev, ki temelji na TypeScript, kar je priporočen pristop.
    • Kako se imenuje vaša razširitev? Izberite opisno in edinstveno ime za svojo razširitev. Primeri: "Code Spell Checker", "JavaScript Snippets", "Python Autocomplete".
    • Kateri je identifikator vaše razširitve? To je edinstven identifikator za vašo razširitev, običajno v obliki `publisher.extension-name`. Izberite ime izdajatelja (npr. vaše uporabniško ime GitHub ali ime podjetja).
    • Kakšen je opis vaše razširitve? Zagotovite jedrnat in informativen opis tega, kar vaša razširitev počne.
    • Inicializirajte repozitorij git? Izberite "Yes" za inicializacijo repozitorija Git za nadzor različic.
    • Ali želite uporabiti eslint za preverjanje sloga kode? Izberite "Yes" za uveljavljanje doslednosti sloga kode.
  3. Odprite projekt v VS Code: Ko generator zaključi, odprite novo ustvarjeno mapo projekta v VS Code.

Razumevanje strukture projekta

Generator razširitev ustvari osnovno strukturo projekta z naslednjimi ključnimi datotekami:

Pisanje vaše prve razširitve

Začnimo z ustvarjanjem preproste razširitve, ki prikaže sporočilo "Hello World", ko se izvede ukaz:

  1. Odprite `src/extension.ts`: Ta datoteka vsebuje funkcijo `activate`, ki se pokliče, ko je vaša razširitev aktivirana.
  2. Spremenite funkcijo `activate`: Zamenjajte obstoječo kodo z naslednjo:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension \"my-extension\" is now active!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from My Extension!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Pojasnilo:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registrira ukaz z ID-jem `my-extension.helloWorld`. Ta ukaz bo na voljo v paleti ukazov VS Code.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: Prikaže informacijsko sporočilo v oknu VS Code.
    • `context.subscriptions.push(disposable)`: Doda ukaz v naročnine razširitve in zagotavlja, da je pravilno odstranjen, ko je razširitev deaktivirana.
  4. Spremenite `package.json`: Dodajte naslednje v razdelek `contributes`, da definirate ukaz:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Pojasnilo:
    • `"commands"`: Določa ukaze, ki jih prispeva vaša razširitev.
    • `"command": "my-extension.helloWorld"`: Določa ID ukaza, ki se ujema z ID-jem, uporabljenim v `extension.ts`.
    • `"title": "Hello World"`: Nastavi prikazno ime za ukaz v paleti ukazov.

Testiranje vaše razširitve

Zdaj je čas, da preizkusite svojo razširitev:

  1. Pritisnite F5: To bo zagnalo novo okno VS Code z nameščeno vašo razširitvijo. To je "Host za razvoj razširitev".
  2. Odprite paleto ukazov: Pritisnite `Ctrl+Shift+P` (ali `Cmd+Shift+P` na macOS), da odprete paleto ukazov.
  3. Vnesite "Hello World": V paleti ukazov bi morali videti svoj ukaz.
  4. Izberite "Hello World": Če kliknete ukaz, ga boste izvedli in prikazali sporočilo "Hello World" v oknu VS Code.

Razhroščevanje vaše razširitve

Razhroščevanje je ključnega pomena za prepoznavanje in odpravljanje težav v vaši razširitvi. VS Code ponuja odlično podporo za razhroščevanje:

  1. Nastavite prelomne točke: Kliknite v odtočni žleb urejevalnika poleg številk vrstic, da nastavite prelomne točke v svoji kodi.
  2. Pritisnite F5: To bo zagnalo Host za razvoj razširitev v načinu razhroščevanja.
  3. Sprožite svojo razširitev: Izvedite ukaz ali dejanje, ki sproži kodo, ki jo želite razhroščevati.
  4. Preglejte spremenljivke in sklad klicov: Razhroščevalnik VS Code bo zaustavil izvajanje na vaših prelomnih točkah, kar vam bo omogočilo pregled spremenljivk, korakanje skozi kodo in preučitev sklada klicov.

Delo z API-jem VS Code

API VS Code ponuja bogat nabor vmesnikov in funkcij za interakcijo z urejevalnikom. Tukaj je nekaj ključnih področij API-ja:

Primer: Ustvarjanje razširitve za izrezke kode

Ustvarimo razširitev, ki doda izrezek kode za ustvarjanje osnovne komponente React:

  1. Ustvarite mapo `snippets`: Ustvarite novo mapo z imenom `snippets` v korenu vašega projekta.
  2. Ustvarite datoteko izrezka: Ustvarite datoteko z imenom `react.json` znotraj mape `snippets`.
  3. Dodajte definicijo izrezka: Dodajte naslednji JSON v `react.json`:
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
  4. Pojasnilo:
    • `"React Component"`: Ime izrezka.
    • `"prefix": "reactcomp"`: Predpona, ki sproži izrezek. Če vnesete `reactcomp` in pritisnete `Tab`, se vstavi izrezek.
    • `"body"`: Niz nizov, ki predstavljajo vrstice kode v izrezku.
    • `${1:ComponentName}`: Postanek s tabulatorko, ki vam omogoča hitro spreminjanje imena komponente.
    • `"description"`: Opis izrezka.
  5. Spremenite `package.json`: Dodajte naslednje v razdelek `contributes`:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Pojasnilo:
    • `"snippets"`: Določa izrezke, ki jih prispeva vaša razširitev.
    • `"language": "javascriptreact"`: Določa jezik, za katerega se izrezek uporablja.
    • `"path": "./snippets/react.json"`: Določa pot do datoteke izrezka.
  7. Testirajte svoj izrezek: Odprite datoteko `.jsx` ali `.tsx` in vnesite `reactcomp`. Pritisnite `Tab`, da vstavite izrezek.

Napredne tehnike razvoja razširitev

Ko obvladate osnove, lahko raziščete naprednejše tehnike razvoja razširitev:

Internacionalizacija in lokalizacija (i18n in L10n)

Če želite doseči globalno občinstvo, razmislite o internacionalizaciji in lokalizaciji svoje razširitve. To vključuje prilagajanje vaše razširitve za podporo različnim jezikom in regijam.

Objava vaše razširitve

Ko je vaša razširitev pripravljena, jo lahko objavite v VS Code Marketplace, da jo lahko uporabljajo drugi:

  1. Ustvarite organizacijo Azure DevOps: Za objavo razširitve potrebujete organizacijo Azure DevOps. Če je nimate, ustvarite brezplačen račun na spletnem mestu Azure DevOps.
  2. Namestite orodje `vsce`: VS Code Extension Manager (`vsce`) je orodje ukazne vrstice za pakiranje in objavljanje razširitev. Namestite ga globalno z uporabo npm:
    3. npm install -g vsce
  3. Ustvarite izdajatelja: Izdajatelj je identiteta, ki ima v lasti vaše razširitve v Marketplace. Ustvarite izdajatelja z ukazom `vsce create-publisher`. Navesti boste morali ime izdajatelja in osebni žeton za dostop (PAT) iz Azure DevOps.
  4. Ustvarite osebni žeton za dostop (PAT): V Azure DevOps pojdite na "User Settings" -> "Personal Access Tokens" in ustvarite nov PAT z obsegom "Marketplace (Publish)".
  5. Pakirajte svojo razširitev: Uporabite ukaz `vsce package`, da zapakirate svojo razširitev v datoteko `.vsix`.
  6. Objavite svojo razširitev: Uporabite ukaz `vsce publish`, da objavite svojo razširitev v Marketplace. Navesti boste morali ime izdajatelja in svoj PAT.

Najboljše prakse za razvoj razširitev

Sledite tem najboljšim praksam za ustvarjanje visokokakovostnih in vzdržljivih razširitev za VS Code:

Viri skupnosti

Tukaj je nekaj dragocenih virov za več informacij o razvoju razširitev za VS Code:

Zaključek

Razvoj razširitev za VS Code je močan način za prilagajanje vašega kodirnega okolja, povečanje produktivnosti in deljenje vaših rešitev z globalno razvojno skupnostjo. S tem obsežnim vodnikom lahko obvladate umetnost razvoja razširitev in ustvarite inovativna orodja, ki izboljšujejo izkušnjo VS Code za vas in druge. Ne pozabite sprejeti skupnosti, prispevati k projektom odprte kode ter se nenehno učiti in raziskovati nenehno razvijajoči se svet razvoja razširitev za VS Code. Vso srečo in veselo kodiranje!

Obvladovanje razvoja razširitev za VS Code: Obsežen vodnik za globalne razvijalce | MLOG