M

MLOG

Lietuvių

Atskleiskite VS Code galią mokydamiesi kurti pasirinktinius plėtinius. Šis vadovas pateikia išsamų aprašymą nuo sąrankos iki publikavimo, leidžiantį patobulinti savo kodavimo aplinką ir pasidalinti savo kūriniais su pasauliu.

VS Code plėtinių kūrimo įvaldymas: išsamus vadovas pasauliniams kūrėjams

Visual Studio Code (VS Code) tapo populiariausia kodo redagavimo priemone milijonams kūrėjų visame pasaulyje. Jos populiarumas kyla iš lengvo pobūdžio, galingų funkcijų ir, svarbiausia, išplečiamumo. Galimybė kurti pasirinktinius plėtinius leidžia kūrėjams pritaikyti redaktorių prie savo specifinių poreikių, didinant produktyvumą ir supaprastinant darbo eigas. Šis išsamus vadovas padės jums sukurti savo VS Code plėtinius, nuo pradinės sąrankos iki jūsų kūrinio paskelbimo, kad juo galėtų naudotis visas pasaulis.

Kodėl verta kurti VS Code plėtinius?

VS Code plėtinių kūrimas siūlo daug privalumų tiek individualiems kūrėjams, tiek organizacijoms:

Būtinosios sąlygos

Prieš pradedant plėtinių kūrimą, įsitikinkite, kad turite įdiegtą:

Kūrimo aplinkos nustatymas

Kai įvykdytos būtinosios sąlygos, esate pasiruošę nustatyti savo kūrimo aplinką:

  1. Sukurkite naują plėtinio projektą: Atidarykite savo terminalą ir paleiskite šią komandą, kad paleistumėte plėtinio generatorių:
    2. yo code
  2. Atsakykite į raginimus: Generatorius užduos keletą klausimų apie jūsų plėtinį. Štai dažniausiai užduodamų klausimų ir rekomenduojamų atsakymų sąrašas:
    • Kokio tipo plėtinį norite sukurti? Pasirinkite "New Extension (TypeScript)" TypeScript pagrindu sukurtam plėtiniui, kuris yra rekomenduojamas būdas.
    • Koks jūsų plėtinio pavadinimas? Pasirinkite aprašomąjį ir unikalų savo plėtinio pavadinimą. Pavyzdžiai: "Code Spell Checker", "JavaScript Snippets", "Python Autocomplete".
    • Koks jūsų plėtinio identifikatorius? Tai unikalus jūsų plėtinio identifikatorius, paprastai formatu `publisher.extension-name`. Pasirinkite leidėjo pavadinimą (pvz., savo GitHub vartotojo vardą arba įmonės pavadinimą).
    • Koks jūsų plėtinio aprašymas? Pateikite glaustą ir informatyvų aprašymą, ką daro jūsų plėtinys.
    • Inicializuoti git saugyklą? Pasirinkite "Yes", kad inicializuotumėte Git saugyklą versijų valdymui.
    • Ar norite naudoti eslint kodo tikrinimui? Pasirinkite "Yes", kad užtikrintumėte kodo stiliaus nuoseklumą.
  3. Atidarykite projektą VS Code: Kai generatorius baigs darbą, atidarykite naujai sukurtą projekto aplanką VS Code.

Projekto struktūros supratimas

Plėtinių generatorius sukuria pagrindinę projekto struktūrą su šiais pagrindiniais failais:

Pirmojo plėtinio rašymas

Pradėkime nuo paprasto plėtinio, kuris rodo "Hello World" pranešimą, kai vykdoma komanda:

  1. Atidarykite `src/extension.ts`: Šiame faile yra `activate` funkcija, kuri iškviečiama, kai jūsų plėtinys yra aktyvuojamas.
  2. Modifikuokite `activate` funkciją: Pakeiskite esamą kodą šiuo:
    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. Paaiškinimas:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registruoja komandą su ID `my-extension.helloWorld`. Ši komanda bus prieinama VS Code komandų paletėje.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: Rodo informacinį pranešimą VS Code lange.
    • `context.subscriptions.push(disposable)`: Prideda komandą prie plėtinio prenumeratų, užtikrinant, kad ji būtų tinkamai pašalinta, kai plėtinys yra deaktyvuojamas.
  4. Modifikuokite `package.json`: Pridėkite šį kodą prie `contributes` skilties, kad apibrėžtumėte komandą:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Paaiškinimas:
    • `"commands"`: Apibrėžia komandas, kurias prisideda jūsų plėtinys.
    • `"command": "my-extension.helloWorld"`: Nurodo komandos ID, kuris atitinka ID, naudojamą `extension.ts`.
    • `"title": "Hello World"`: Nustato komandos rodomą pavadinimą komandų paletėje.

Plėtinio testavimas

Dabar atėjo laikas išbandyti savo plėtinį:

  1. Paspauskite F5: Tai paleis naują VS Code langą su įdiegtu jūsų plėtiniu. Tai yra "Extension Development Host".
  2. Atidarykite komandų paletę: Paspauskite `Ctrl+Shift+P` (arba `Cmd+Shift+P` macOS), kad atidarytumėte komandų paletę.
  3. Įveskite "Hello World": Turėtumėte pamatyti savo komandą, nurodytą komandų paletėje.
  4. Pasirinkite "Hello World": Spustelėjus komandą ji bus įvykdyta ir VS Code lange bus rodomas pranešimas "Hello World".

Plėtinio derinimas

Derinimas yra labai svarbus norint nustatyti ir ištaisyti problemas plėtiniuose. VS Code suteikia puikų derinimo palaikymą:

  1. Nustatykite lūžio taškus: Spustelėkite redaktoriaus paraštėje šalia eilučių numerių, kad nustatytumėte lūžio taškus savo kode.
  2. Paspauskite F5: Tai paleis Extension Development Host derinimo režimu.
  3. Suaktyvinkite savo plėtinį: Įvykdykite komandą arba veiksmą, kuris suaktyvina kodą, kurį norite derinti.
  4. Patikrinkite kintamuosius ir iškvietimo dėklą: VS Code derintuvas sustabdys vykdymą ties jūsų lūžio taškais, leisdamas jums patikrinti kintamuosius, žingsniuoti per kodą ir ištirti iškvietimo dėklą.

Darbas su VS Code API

VS Code API suteikia turtingą sąsajų ir funkcijų rinkinį, skirtą sąveikai su redaktoriumi. Štai kelios pagrindinės API sritys:

Pavyzdys: kodo fragmento plėtinio kūrimas

Sukurkime plėtinį, kuris prideda kodo fragmentą, skirtą sukurti pagrindinį React komponentą:

  1. Sukurkite `snippets` aplanką: Sukurkite naują aplanką pavadinimu `snippets` savo projekto šakniniame kataloge.
  2. Sukurkite fragmento failą: Sukurkite failą pavadinimu `react.json` aplanke `snippets`.
  3. Pridėkite fragmento apibrėžimą: Pridėkite šį JSON į `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. Paaiškinimas:
    • `"React Component"`: Fragmento pavadinimas.
    • `"prefix": "reactcomp"`: Prefiksas, kuris suaktyvina fragmentą. Įvedus `reactcomp` ir paspaudus `Tab`, bus įterptas fragmentas.
    • `"body"`: Eilučių masyvas, vaizduojantis kodo eilutes fragmente.
    • `${1:ComponentName}`: Tabuliavimo sustojimas, leidžiantis greitai pakeisti komponento pavadinimą.
    • `"description"`: Fragmento aprašymas.
  5. Modifikuokite `package.json`: Pridėkite šį kodą prie `contributes` skilties:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Paaiškinimas:
    • `"snippets"`: Apibrėžia fragmentus, kuriuos prisideda jūsų plėtinys.
    • `"language": "javascriptreact"`: Nurodo kalbą, kuriai fragmentas yra taikomas.
    • `"path": "./snippets/react.json"`: Nurodo kelią į fragmento failą.
  7. Išbandykite savo fragmentą: Atidarykite `.jsx` arba `.tsx` failą ir įveskite `reactcomp`. Paspauskite `Tab`, kad įterptumėte fragmentą.

Pažangios plėtinių kūrimo technikos

Kai įvaldysite pagrindus, galite ištirti pažangesnes plėtinių kūrimo technikas:

Internacionalizacija ir lokalizacija (i18n ir L10n)

Norėdami pasiekti pasaulinę auditoriją, apsvarstykite galimybę internacionalizuoti ir lokalizuoti savo plėtinį. Tai apima jūsų plėtinio pritaikymą, kad palaikytų skirtingas kalbas ir regionus.

Plėtinio publikavimas

Kai jūsų plėtinys bus paruoštas, galite jį paskelbti VS Code Marketplace, kad kiti galėtų juo naudotis:

  1. Sukurkite Azure DevOps organizaciją: Norėdami paskelbti savo plėtinį, jums reikės Azure DevOps organizacijos. Jei neturite, sukurkite nemokamą paskyrą Azure DevOps svetainėje.
  2. Įdiekite `vsce` įrankį: VS Code Extension Manager (`vsce`) yra komandų eilutės įrankis, skirtas plėtinių pakavimui ir publikavimui. Įdiekite jį globaliai naudodami npm:
    3. npm install -g vsce
  3. Sukurkite leidėją: Leidėjas yra tapatybė, kuriai priklauso jūsų plėtiniai Marketplace. Sukurkite leidėją naudodami `vsce create-publisher` komandą. Jums reikės pateikti leidėjo pavadinimą ir asmeninio prieigos rakto (PAT) iš Azure DevOps.
  4. Sugeneruokite asmeninį prieigos raktą (PAT): Azure DevOps eikite į "User Settings" -> "Personal Access Tokens" ir sukurkite naują PAT su "Marketplace (Publish)" aprėptimi.
  5. Supakuokite savo plėtinį: Naudokite `vsce package` komandą, kad supakuotumėte savo plėtinį į `.vsix` failą.
  6. Paskelbkite savo plėtinį: Naudokite `vsce publish` komandą, kad paskelbtumėte savo plėtinį Marketplace. Jums reikės pateikti savo leidėjo pavadinimą ir savo PAT.

Geriausia plėtinių kūrimo praktika

Vadovaukitės šiomis geriausiomis praktikomis, kad sukurtumėte aukštos kokybės ir prižiūrimus VS Code plėtinius:

Bendruomenės ištekliai

Štai keletas vertingų išteklių, kuriuose galite sužinoti daugiau apie VS Code plėtinių kūrimą:

Išvada

VS Code plėtinių kūrimas yra galingas būdas pritaikyti savo kodavimo aplinką, padidinti produktyvumą ir pasidalinti savo sprendimais su pasauline kūrėjų bendruomene. Vadovaudamiesi šiuo išsamiu vadovu, galite įvaldyti plėtinių kūrimo meną ir sukurti novatoriškus įrankius, kurie pagerins VS Code patirtį jums ir kitiems. Nepamirškite priimti bendruomenę, prisidėti prie atvirojo kodo projektų ir nuolat mokytis bei tyrinėti nuolat besikeičiantį VS Code plėtinių kūrimo pasaulį. Sėkmės ir laimingo kodavimo!