M

MLOG

Latviešu

Atklājiet VS Code potenciālu, iemācoties veidot pielāgotus paplašinājumus. Šī rokasgrāmata sniedz pilnīgu pārskatu no iestatīšanas līdz publicēšanai, lai uzlabotu savu kodēšanas vidi un dalītos ar saviem darbiem.

VS Code paplašinājumu izstrādes apgūšana: visaptveroša rokasgrāmata globāliem izstrādātājiem

Visual Studio Code (VS Code) ir kļuvis par iecienītāko koda redaktoru miljoniem izstrādātāju visā pasaulē. Tā popularitāte sakņojas tā vieglajā dabā, jaudīgajās funkcijās un, kas ir vissvarīgākais, tā paplašināmībā. Spēja veidot pielāgotus paplašinājumus ļauj izstrādātājiem pielāgot redaktoru savām specifiskajām vajadzībām, palielinot produktivitāti un optimizējot darba plūsmas. Šī visaptverošā rokasgrāmata jūs iepazīstinās ar savu VS Code paplašinājumu izveides procesu, sākot no sākotnējās iestatīšanas līdz pat jūsu darba publicēšanai, lai to varētu izmantot visa pasaule.

Kāpēc izstrādāt VS Code paplašinājumus?

VS Code paplašinājumu izstrāde piedāvā daudzas priekšrocības gan individuāliem izstrādātājiem, gan organizācijām:

Priekšnosacījumi

Pirms sākat paplašinājumu izstrādi, pārliecinieties, ka jums ir instalēts sekojošais:

Savas izstrādes vides iestatīšana

Ar sagatavotiem priekšnosacījumiem jūs esat gatavs iestatīt savu izstrādes vidi:

  1. Izveidojiet jaunu paplašinājuma projektu: Atveriet termināli un palaidiet šādu komandu, lai startētu paplašinājumu ģeneratoru:
    2. yo code
  2. Atbildiet uz uzvednēm: Ģenerators uzdos virkni jautājumu par jūsu paplašinājumu. Šeit ir biežāko uzvedņu un ieteicamo atbilžu sadalījums:
    • Kāda veida paplašinājumu vēlaties izveidot? Izvēlieties "New Extension (TypeScript)", lai izveidotu paplašinājumu uz TypeScript bāzes, kas ir ieteicamā pieeja.
    • Kāds ir jūsu paplašinājuma nosaukums? Izvēlieties aprakstošu un unikālu nosaukumu savam paplašinājumam. Piemēri: "Code Spell Checker," "JavaScript Snippets," "Python Autocomplete."
    • Kāds ir jūsu paplašinājuma identifikators? Tas ir unikāls identifikators jūsu paplašinājumam, parasti formātā `izdevējs.paplašinājuma-nosaukums`. Izvēlieties izdevēja vārdu (piemēram, jūsu GitHub lietotājvārdu vai uzņēmuma nosaukumu).
    • Kāds ir jūsu paplašinājuma apraksts? Sniedziet kodolīgu un informatīvu aprakstu par to, ko jūsu paplašinājums dara.
    • Inicializēt git repozitoriju? Izvēlieties "Jā", lai inicializētu Git repozitoriju versiju kontrolei.
    • Vai vēlaties izmantot eslint koda pārbaudei? Izvēlieties "Jā", lai nodrošinātu koda stila konsekvenci.
  3. Atveriet projektu VS Code: Kad ģenerators pabeidz darbu, atveriet jaunizveidoto projekta mapi VS Code.

Projekta struktūras izpratne

Paplašinājumu ģenerators izveido pamata projekta struktūru ar šādiem galvenajiem failiem:

Jūsu pirmā paplašinājuma rakstīšana

Sāksim ar vienkārša paplašinājuma izveidi, kas parāda "Hello World" ziņojumu, kad tiek izpildīta komanda:

  1. Atveriet `src/extension.ts`: Šis fails satur `activate` funkciju, kas tiek izsaukta, kad jūsu paplašinājums tiek aktivizēts.
  2. Modificējiet `activate` funkciju: Aizstājiet esošo kodu ar sekojošo:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Apsveicam, jūsu paplašinājums \"my-extension\" tagad ir aktīvs!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Sveika, pasaule, no mana paplašinājuma!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Paskaidrojums:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Reģistrē komandu ar ID `my-extension.helloWorld`. Šī komanda būs pieejama VS Code komandu paletē.
    • `vscode.window.showInformationMessage('Sveika, pasaule, no mana paplašinājuma!')`: Parāda informatīvu ziņojumu VS Code logā.
    • `context.subscriptions.push(disposable)`: Pievieno komandu paplašinājuma abonementiem, nodrošinot, ka tā tiek pareizi atbrīvota, kad paplašinājums tiek deaktivizēts.
  4. Modificējiet `package.json`: Pievienojiet sekojošo `contributes` sadaļai, lai definētu komandu:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Paskaidrojums:
    • `"commands"`: Definē komandas, ko jūsu paplašinājums pievieno.
    • `"command": "my-extension.helloWorld"`: Norāda komandas ID, kas sakrīt ar ID, kas izmantots `extension.ts`.
    • `"title": "Hello World"`: Iestata komandas attēlojamo nosaukumu komandu paletē.

Jūsu paplašinājuma testēšana

Tagad ir laiks testēt jūsu paplašinājumu:

  1. Nospiediet F5: Tas palaidīs jaunu VS Code logu ar instalētu jūsu paplašinājumu. Šis ir "Extension Development Host" (Paplašinājumu izstrādes resursdators).
  2. Atveriet komandu paleti: Nospiediet `Ctrl+Shift+P` (vai `Cmd+Shift+P` macOS) lai atvērtu komandu paleti.
  3. Ierakstiet "Hello World": Jums vajadzētu redzēt savu komandu komandu paletes sarakstā.
  4. Atlasiet "Hello World": Noklikšķinot uz komandas, tā tiks izpildīta un VS Code logā parādīsies "Hello World" ziņojums.

Jūsu paplašinājuma atkļūdošana

Atkļūdošana ir būtiska, lai identificētu un novērstu problēmas jūsu paplašinājumā. VS Code nodrošina izcilu atkļūdošanas atbalstu:

  1. Iestatiet pārtraukuma punktus (Breakpoints): Noklikšķiniet redaktora teknē blakus rindu numuriem, lai iestatītu pārtraukuma punktus savā kodā.
  2. Nospiediet F5: Tas palaidīs paplašinājumu izstrādes resursdatoru atkļūdošanas režīmā.
  3. Aktivizējiet savu paplašinājumu: Izpildiet komandu vai darbību, kas aktivizē kodu, kuru vēlaties atkļūdot.
  4. Pārbaudiet mainīgos un izsaukumu steku (Call Stack): VS Code atkļūdotājs apturēs izpildi jūsu pārtraukuma punktos, ļaujot jums pārbaudīt mainīgos, iziet cauri kodam soli pa solim un pārbaudīt izsaukumu steku.

Darbs ar VS Code API

VS Code API nodrošina bagātīgu saskarņu un funkciju kopumu mijiedarbībai ar redaktoru. Šeit ir dažas galvenās API jomas:

Piemērs: Koda fragmenta paplašinājuma izveide

Izveidosim paplašinājumu, kas pievieno koda fragmentu pamata React komponenta izveidei:

  1. Izveidojiet mapi `snippets`: Izveidojiet jaunu mapi ar nosaukumu `snippets` sava projekta saknes direktorijā.
  2. Izveidojiet fragmenta failu: Izveidojiet failu ar nosaukumu `react.json` mapē `snippets`.
  3. Pievienojiet fragmenta definīciju: Pievienojiet šādu JSON failam `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": "Izveido pamata React komponentu"
	}
}
  4. Paskaidrojums:
    • `"React Component"`: Fragmenta nosaukums.
    • `"prefix": "reactcomp"`: Prefikss, kas aktivizē fragmentu. Ierakstot `reactcomp` un nospiežot `Tab`, tiks ievietots fragments.
    • `"body"`: Virkņu masīvs, kas attēlo koda rindiņas fragmentā.
    • `${1:ComponentName}`: Tabulēšanas pietura, kas ļauj ātri mainīt komponenta nosaukumu.
    • `"description"`: Fragmenta apraksts.
  5. Modificējiet `package.json`: Pievienojiet sekojošo `contributes` sadaļai:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Paskaidrojums:
    • `"snippets"`: Definē fragmentus, ko jūsu paplašinājums pievieno.
    • `"language": "javascriptreact"`: Norāda valodu, kurai fragments ir piemērojams.
    • `"path": "./snippets/react.json"`: Norāda ceļu uz fragmenta failu.
  7. Pārbaudiet savu fragmentu: Atveriet `.jsx` vai `.tsx` failu un ierakstiet `reactcomp`. Nospiediet `Tab`, lai ievietotu fragmentu.

Paplašinātas paplašinājumu izstrādes tehnikas

Kad esat apguvis pamatus, varat izpētīt sarežģītākas paplašinājumu izstrādes tehnikas:

Internacionalizācija un lokalizācija (i18n un L10n)

Lai sasniegtu globālu auditoriju, apsveriet sava paplašinājuma internacionalizāciju un lokalizāciju. Tas ietver jūsu paplašinājuma pielāgošanu, lai atbalstītu dažādas valodas un reģionus.

Jūsu paplašinājuma publicēšana

Kad jūsu paplašinājums ir gatavs, varat to publicēt VS Code Marketplace, lai citi to varētu izmantot:

  1. Izveidojiet Azure DevOps organizāciju: Lai publicētu savu paplašinājumu, jums būs nepieciešama Azure DevOps organizācija. Ja jums tādas nav, izveidojiet bezmaksas kontu Azure DevOps vietnē.
  2. Instalējiet rīku `vsce`: VS Code Extension Manager (`vsce`) ir komandrindas rīks paplašinājumu iepakošanai un publicēšanai. Instalējiet to globāli, izmantojot npm:
    3. npm install -g vsce
  3. Izveidojiet izdevēju: Izdevējs ir identitāte, kurai pieder jūsu paplašinājumi Marketplace. Izveidojiet izdevēju, izmantojot komandu `vsce create-publisher`. Jums būs jānorāda izdevēja nosaukums un personīgās piekļuves pilnvara (PAT) no Azure DevOps.
  4. Ģenerējiet personīgās piekļuves pilnvaru (PAT): Azure DevOps dodieties uz "User Settings" -> "Personal Access Tokens" un izveidojiet jaunu PAT ar "Marketplace (Publish)" tiesībām.
  5. Iepakojiet savu paplašinājumu: Izmantojiet komandu `vsce package`, lai iepakotu savu paplašinājumu `.vsix` failā.
  6. Publicējiet savu paplašinājumu: Izmantojiet komandu `vsce publish`, lai publicētu savu paplašinājumu Marketplace. Jums būs jānorāda savs izdevēja vārds un jūsu PAT.

Labākā prakse paplašinājumu izstrādē

Ievērojiet šo labāko praksi, lai izveidotu augstas kvalitātes un uzturamus VS Code paplašinājumus:

Kopienas resursi

Šeit ir daži vērtīgi resursi, lai uzzinātu vairāk par VS Code paplašinājumu izstrādi:

Noslēgums

VS Code paplašinājumu izstrāde ir spēcīgs veids, kā pielāgot savu kodēšanas vidi, palielināt produktivitāti un dalīties ar saviem risinājumiem ar globālo izstrādātāju kopienu. Sekojot šai visaptverošajai rokasgrāmatai, jūs varat apgūt paplašinājumu izstrādes mākslu un radīt inovatīvus rīkus, kas uzlabo VS Code pieredzi gan sev, gan citiem. Atcerieties pieņemt kopienu, sniegt ieguldījumu atvērtā koda projektos un nepārtraukti mācīties un izpētīt pastāvīgi mainīgo VS Code paplašinājumu izstrādes pasauli. Veiksmi un priecīgu kodēšanu!