M

MLOG

Eesti

Avastage VS Code'i võimekus, õppides looma kohandatud laiendusi. See juhend pakub täielikku ülevaadet, alates seadistamisest kuni avaldamiseni, võimaldades teil oma kodeerimiskeskkonda täiustada ja oma loomingut maailmaga jagada.

VS Code'i laienduste arendamise meisterklass: põhjalik juhend globaalsetele arendajatele

Visual Studio Code'ist (VS Code) on saanud miljonite arendajate eelistatuim koodiredaktor üle maailma. Selle populaarsus tuleneb selle kergusest, võimsatest funktsioonidest ja, mis kõige tähtsam, laiendatavusest. Võimalus luua kohandatud laiendusi lubab arendajatel redaktorit oma spetsiifilistele vajadustele kohandada, suurendades produktiivsust ja optimeerides töövooge. See põhjalik juhend juhatab teid läbi oma VS Code'i laienduste loomise protsessi, alates esialgsest seadistamisest kuni oma loomingu avaldamiseni maailmale.

Miks arendada VS Code'i laiendusi?

VS Code'i laienduste arendamine pakub mitmeid eeliseid nii üksikutele arendajatele kui ka organisatsioonidele:

Eeltingimused

Enne laienduste arendamisega alustamist veenduge, et teil on installitud järgmine:

Arenduskeskkonna seadistamine

Kui eeltingimused on täidetud, olete valmis oma arenduskeskkonda seadistama:

  1. Looge uus laiendusprojekt: Avage oma terminal ja käivitage laiendusgeneraatori alustamiseks järgmine käsk:
    2. yo code
  2. Vastake küsimustele: Generaator esitab rea küsimusi teie laienduse kohta. Siin on ülevaade levinumatest küsimustest ja soovitatavatest vastustest:
    • Mis tüüpi laienduse soovite luua? Valige TypeScriptil põhineva laienduse jaoks "New Extension (TypeScript)", mis on soovitatav lähenemine.
    • Mis on teie laienduse nimi? Valige oma laiendusele kirjeldav ja unikaalne nimi. Näited: "Code Spell Checker," "JavaScript Snippets," "Python Autocomplete."
    • Mis on teie laienduse identifikaator? See on teie laienduse unikaalne identifikaator, tavaliselt formaadis `väljaandja.laienduse-nimi`. Valige väljaandja nimi (nt teie GitHubi kasutajanimi või ettevõtte nimi).
    • Mis on teie laienduse kirjeldus? Esitage lühike ja informatiivne kirjeldus selle kohta, mida teie laiendus teeb.
    • Kas initsialiseerida Git'i repositoorium? Valige "Jah", et initsialiseerida Git'i repositoorium versioonihalduseks.
    • Kas soovite koodi lintimiseks kasutada eslinti? Valige "Jah", et tagada koodistiili järjepidevus.
  3. Avage projekt VS Code'is: Kui generaator on lõpetanud, avage äsja loodud projekti kaust VS Code'is.

Projekti struktuuri mõistmine

Laiendusgeneraator loob põhilise projektistruktuuri järgmiste võtmefailidega:

Esimese laienduse kirjutamine

Alustame lihtsa laienduse loomisega, mis kuvab käsu täitmisel teate "Hello World":

  1. Avage `src/extension.ts`: See fail sisaldab funktsiooni `activate`, mis käivitatakse teie laienduse aktiveerimisel.
  2. Muutke funktsiooni `activate`: Asendage olemasolev kood järgmisega:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Õnnitleme, teie laiendus \"my-extension\" on nüüd aktiivne!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Tere maailm minu laiendusest!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Selgitus:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registreerib käsu ID-ga `my-extension.helloWorld`. See käsk on saadaval VS Code'i käsupaletis.
    • `vscode.window.showInformationMessage('Tere maailm minu laiendusest!')`: Kuvab VS Code'i aknas infoteate.
    • `context.subscriptions.push(disposable)`: Lisab käsu laienduse tellimustele, tagades selle korrektse eemaldamise laienduse deaktiveerimisel.
  4. Muutke faili `package.json`: Lisage käsu defineerimiseks järgmine kood jaotisesse `contributes`:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Tere maailm"
		}]
	}
  5. Selgitus:
    • `"commands"`: Määratleb käsud, mida teie laiendus pakub.
    • `"command": "my-extension.helloWorld"`: Määrab käsu ID, mis vastab `extension.ts`-is kasutatud ID-le.
    • `"title": "Tere maailm"`: Määrab käsu kuvatava nime käsupaletis.

Laienduse testimine

Nüüd on aeg oma laiendust testida:

  1. Vajutage F5: See käivitab uue VS Code'i akna, kuhu on installitud teie laiendus. See on "Extension Development Host".
  2. Avage käsupalett: Vajutage `Ctrl+Shift+P` (või `Cmd+Shift+P` macOS-is), et avada käsupalett.
  3. Sisestage "Tere maailm": Peaksite nägema oma käsku käsupaletis.
  4. Valige "Tere maailm": Käsul klõpsamine käivitab selle ja kuvab VS Code'i aknas teate "Tere maailm minu laiendusest!".

Laienduse silumine

Silumine on ülioluline vigade tuvastamiseks ja parandamiseks teie laienduses. VS Code pakub suurepärast silumistuge:

  1. Määrake katkestuspunkte: Klõpsake koodiredaktori servas reanumbrite kõrval, et oma koodi katkestuspunkte seada.
  2. Vajutage F5: See käivitab Extension Development Host'i silumisrežiimis.
  3. Käivitage oma laiendus: Täitke käsk või tegevus, mis käivitab koodi, mida soovite siluda.
  4. Uurige muutujaid ja kutsepinut: VS Code'i silur peatab täitmise teie katkestuspunktides, võimaldades teil uurida muutujaid, samm-sammult koodi läbida ja kutsepinut (call stack) uurida.

Töötamine VS Code API-ga

VS Code API pakub rikkalikku valikut liideseid ja funktsioone redaktoriga suhtlemiseks. Siin on mõned API võtmevaldkonnad:

Näide: Koodilõigu laienduse loomine

Loome laienduse, mis lisab koodilõigu lihtsa Reacti komponendi loomiseks:

  1. Looge kaust `snippets`: Looge oma projekti juurkausta uus kaust nimega `snippets`.
  2. Looge koodilõigu fail: Looge kausta `snippets` fail nimega `react.json`.
  3. Lisage koodilõigu definitsioon: Lisage `react.json` faili järgmine JSON:
    4. {
	"Reacti komponent": {
		"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": "Loob lihtsa Reacti komponendi"
	}
}
  4. Selgitus:
    • `"Reacti komponent"`: Koodilõigu nimi.
    • `"prefix": "reactcomp"`: Prefiks, mis käivitab koodilõigu. Sisestades `reactcomp` ja vajutades `Tab`, lisatakse koodilõik.
    • `"body"`: Stringide massiiv, mis esindab koodilõigu ridu.
    • `${1:ComponentName}`: Tabulaatoripeatus, mis võimaldab teil kiiresti komponendi nime muuta.
    • `"description"`: Koodilõigu kirjeldus.
  5. Muutke faili `package.json`: Lisage jaotisesse `contributes` järgmine:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Selgitus:
    • `"snippets"`: Määratleb koodilõigud, mida teie laiendus pakub.
    • `"language": "javascriptreact"`: Määrab keele, millele koodilõik on kohaldatav.
    • `"path": "./snippets/react.json"`: Määrab tee koodilõigu failini.
  7. Testige oma koodilõiku: Avage `.jsx` või `.tsx` fail ja sisestage `reactcomp`. Vajutage `Tab`, et koodilõik lisada.

Laienduste arendamise edasijõudnute tehnikad

Kui olete põhitõed omandanud, saate uurida edasijõudnumaid laienduste arendamise tehnikaid:

Internatsionaliseerimine ja lokaliseerimine (i18n ja L10n)

Globaalsele publikule jõudmiseks kaaluge oma laienduse internatsionaliseerimist ja lokaliseerimist. See hõlmab laienduse kohandamist erinevate keelte ja piirkondade toetamiseks.

Laienduse avaldamine

Kui teie laiendus on valmis, saate selle avaldada VS Code'i turuplatsil, et teised saaksid seda kasutada:

  1. Looge Azure DevOps organisatsioon: Oma laienduse avaldamiseks vajate Azure DevOps organisatsiooni. Kui teil seda pole, looge tasuta konto Azure DevOps veebisaidil.
  2. Installige tööriist `vsce`: VS Code Extension Manager (`vsce`) on käsurea tööriist laienduste pakendamiseks ja avaldamiseks. Installige see globaalselt, kasutades npm-i:
    3. npm install -g vsce
  3. Looge väljaandja: Väljaandja on identiteet, mis omab teie laiendusi turuplatsil. Looge väljaandja käsuga `vsce create-publisher`. Peate sisestama väljaandja nime ja isikliku juurdepääsuloa (PAT) Azure DevOps'ist.
  4. Genereerige isiklik juurdepääsuluba (PAT): Minge Azure DevOps'is "User Settings" -> "Personal Access Tokens" ja looge uus PAT ulatusega "Marketplace (Publish)".
  5. Pakendage oma laiendus: Kasutage käsku `vsce package`, et pakendada oma laiendus `.vsix` failiks.
  6. Avaldage oma laiendus: Kasutage käsku `vsce publish`, et oma laiendus turuplatsil avaldada. Peate sisestama oma väljaandja nime ja PAT-i.

Laienduste arendamise parimad tavad

Järgige neid parimaid tavasid, et luua kvaliteetseid ja hooldatavaid VS Code'i laiendusi:

Kogukonna ressursid

Siin on mõned väärtuslikud ressursid VS Code'i laienduste arendamise kohta lisateabe saamiseks:

Kokkuvõte

VS Code'i laienduste arendamine on võimas viis oma kodeerimiskeskkonna kohandamiseks, produktiivsuse suurendamiseks ja oma lahenduste jagamiseks globaalse arendajate kogukonnaga. Järgides seda põhjalikku juhendit, saate omandada laienduste arendamise kunsti ja luua uuenduslikke tööriistu, mis parandavad VS Code'i kogemust nii teile endale kui ka teistele. Ärge unustage omaks võtta kogukonda, panustada avatud lähtekoodiga projektidesse ning pidevalt õppida ja avastada VS Code'i laienduste arendamise pidevalt arenevat maailma. Edu ja head kodeerimist!