M

MLOG

Hrvatski

Otključajte snagu VS Code-a učenjem kako izgraditi prilagođene ekstenzije. Ovaj vodič nudi kompletan pregled, od postavljanja do objavljivanja, omogućujući vam da poboljšate svoje okruženje za kodiranje.

Savladavanje razvoja ekstenzija za VS Code: Sveobuhvatan vodič za globalne developere

Visual Studio Code (VS Code) postao je omiljeni uređivač koda za milijune developera diljem svijeta. Njegova popularnost proizlazi iz njegove lagane prirode, moćnih značajki i, što je najvažnije, njegove proširivosti. Mogućnost stvaranja prilagođenih ekstenzija omogućuje developerima da prilagode uređivač svojim specifičnim potrebama, povećavajući produktivnost i pojednostavljujući tijekove rada. Ovaj sveobuhvatni vodič provest će vas kroz proces stvaranja vlastitih VS Code ekstenzija, od početnog postavljanja do objavljivanja vaše kreacije za korištenje u cijelom svijetu.

Zašto razvijati VS Code ekstenzije?

Razvoj VS Code ekstenzija nudi brojne prednosti, kako za pojedinačne developere, tako i za organizacije:

Preduvjeti

Prije nego što se upustite u razvoj ekstenzija, provjerite jeste li instalirali sljedeće:

Postavljanje razvojnog okruženja

S instaliranim preduvjetima, spremni ste postaviti svoje razvojno okruženje:

  1. Stvorite novi projekt ekstenzije: Otvorite svoj terminal i pokrenite sljedeću naredbu kako biste pokrenuli generator ekstenzije:
    2. yo code
  2. Odgovorite na upite: Generator će postaviti niz pitanja o vašoj ekstenziji. Ovdje je pregled uobičajenih upita i preporučenih odgovora:
    • Koju vrstu ekstenzije želite stvoriti? Odaberite "New Extension (TypeScript)" za ekstenziju baziranu na TypeScriptu, što je preporučeni pristup.
    • Kako se zove vaša ekstenzija? Odaberite opisno i jedinstveno ime za svoju ekstenziju. Primjeri: "Code Spell Checker", "JavaScript Snippets", "Python Autocomplete".
    • Koji je identifikator vaše ekstenzije? Ovo je jedinstveni identifikator za vašu ekstenziju, obično u formatu `publisher.extension-name`. Odaberite ime izdavača (npr. vaše korisničko ime na GitHubu ili naziv tvrtke).
    • Koji je opis vaše ekstenzije? Navedite sažeti i informativni opis onoga što vaša ekstenzija radi.
    • Inicijalizirati git spremište? Odaberite "Yes" za inicijalizaciju Git spremišta za kontrolu verzija.
    • Želite li koristiti eslint za provjeru koda? Odaberite "Yes" kako biste osigurali dosljednost stila koda.
  3. Otvorite projekt u VS Code-u: Nakon što generator završi, otvorite novo stvorenu mapu projekta u VS Code-u.

Razumijevanje strukture projekta

Generator ekstenzije stvara osnovnu strukturu projekta sa sljedećim ključnim datotekama:

Pisanje vaše prve ekstenzije

Počnimo stvaranjem jednostavne ekstenzije koja prikazuje poruku "Hello World" kada se izvrši naredba:

  1. Otvorite `src/extension.ts`: Ova datoteka sadrži funkciju `activate`, koja se poziva kada se vaša ekstenzija aktivira.
  2. Izmijenite funkciju `activate`: Zamijenite postojeći kod sljedećim:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Čestitamo, vaša ekstenzija \"my-extension\" je sada aktivna!');

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

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Objašnjenje:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Registrira naredbu s ID-om `my-extension.helloWorld`. Ova naredba bit će dostupna u paleti naredbi VS Code.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: Prikazuje informativnu poruku u prozoru VS Code.
    • `context.subscriptions.push(disposable)`: Dodaje naredbu pretplatama ekstenzije, osiguravajući da se pravilno odbaci kada se ekstenzija deaktivira.
  4. Izmijenite `package.json`: Dodajte sljedeće u odjeljak `contributes` kako biste definirali naredbu:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Objašnjenje:
    • `"commands"`: Definira naredbe koje vaša ekstenzija doprinosi.
    • `"command": "my-extension.helloWorld"`: Određuje ID naredbe koji odgovara ID-u korištenom u `extension.ts`.
    • `"title": "Hello World"`: Postavlja prikazno ime za naredbu u paleti naredbi.

Testiranje vaše ekstenzije

Sada je vrijeme da testirate svoju ekstenziju:

  1. Pritisnite F5: To će pokrenuti novi prozor VS Code s instaliranom ekstenzijom. Ovo je "Extension Development Host".
  2. Otvorite paletu naredbi: Pritisnite `Ctrl+Shift+P` (ili `Cmd+Shift+P` na macOS-u) da biste otvorili paletu naredbi.
  3. Upišite "Hello World": Trebali biste vidjeti svoju naredbu navedenu u paleti naredbi.
  4. Odaberite "Hello World": Klikom na naredbu izvršit će se i prikazati poruka "Hello World" u prozoru VS Code.

Otklanjanje pogrešaka u vašoj ekstenziji

Otklanjanje pogrešaka ključno je za identificiranje i rješavanje problema u vašoj ekstenziji. VS Code pruža izvrsnu podršku za otklanjanje pogrešaka:

  1. Postavite točke prekida: Kliknite u udubljenju uređivača pored brojeva linija kako biste postavili točke prekida u svom kodu.
  2. Pritisnite F5: To će pokrenuti Extension Development Host u načinu otklanjanja pogrešaka.
  3. Pokrenite svoju ekstenziju: Izvršite naredbu ili radnju koja pokreće kod koji želite otkloniti.
  4. Provjerite varijable i stog poziva: Debugger VS Code će pauzirati izvršavanje na vašim točkama prekida, omogućujući vam da pregledate varijable, prolazite kroz kod korak po korak i pregledate stog poziva.

Rad s VS Code API-jem

VS Code API pruža bogat skup sučelja i funkcija za interakciju s uređivačem. Evo nekih ključnih područja API-ja:

Primjer: Stvaranje ekstenzije isječka koda

Stvorimo ekstenziju koja dodaje isječak koda za stvaranje osnovne React komponente:

  1. Stvorite mapu `snippets`: Stvorite novu mapu s imenom `snippets` u korijenu vašeg projekta.
  2. Stvorite datoteku isječka: Stvorite datoteku s imenom `react.json` unutar mape `snippets`.
  3. Dodajte definiciju isječka: Dodajte sljedeći JSON u `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. Objašnjenje:
    • `"React Component"`: Naziv isječka.
    • `"prefix": "reactcomp"`: Prefiks koji pokreće isječak. Upisivanjem `reactcomp` i pritiskom na `Tab` umetnut će se isječak.
    • `"body"`: Polje nizova koje predstavlja linije koda u isječku.
    • `${1:ComponentName}`: Zaustavljanje kartice koje vam omogućuje brzo mijenjanje naziva komponente.
    • `"description"`: Opis isječka.
  5. Izmijenite `package.json`: Dodajte sljedeće u odjeljak `contributes`:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Objašnjenje:
    • `"snippets"`: Definira isječke koje vaša ekstenzija doprinosi.
    • `"language": "javascriptreact"`: Određuje jezik za koji je isječak primjenjiv.
    • `"path": "./snippets/react.json"`: Određuje put do datoteke isječka.
  7. Testirajte svoj isječak: Otvorite `.jsx` ili `.tsx` datoteku i upišite `reactcomp`. Pritisnite `Tab` da biste umetnuli isječak.

Napredne tehnike razvoja ekstenzija

Nakon što savladate osnove, možete istražiti naprednije tehnike razvoja ekstenzija:

Internacionalizacija i lokalizacija (i18n i L10n)

Kako biste dosegli globalnu publiku, razmotrite internacionalizaciju i lokalizaciju svoje ekstenzije. To uključuje prilagođavanje vaše ekstenzije za podršku različitim jezicima i regijama.

Objavljivanje vaše ekstenzije

Nakon što je vaša ekstenzija spremna, možete je objaviti na VS Code Marketplaceu kako bi je drugi mogli koristiti:

  1. Stvorite Azure DevOps organizaciju: Trebat će vam Azure DevOps organizacija za objavljivanje svoje ekstenzije. Ako je nemate, stvorite besplatni račun na web stranici Azure DevOps.
  2. Instalirajte alat `vsce`: Upravitelj ekstenzija VS Code (`vsce`) je alat naredbenog retka za pakiranje i objavljivanje ekstenzija. Instalirajte ga globalno pomoću npm-a:
    3. npm install -g vsce
  3. Stvorite izdavača: Izdavač je identitet koji posjeduje vaše ekstenzije na Marketplaceu. Stvorite izdavača pomoću naredbe `vsce create-publisher`. Morat ćete navesti ime izdavača i osobni pristupni token (PAT) iz Azure DevOps-a.
  4. Generirajte osobni pristupni token (PAT): U Azure DevOpsu idite na "User Settings" -> "Personal Access Tokens" i stvorite novi PAT s opsegom "Marketplace (Publish)".
  5. Pakirajte svoju ekstenziju: Koristite naredbu `vsce package` da biste svoju ekstenziju spakirali u `.vsix` datoteku.
  6. Objavite svoju ekstenziju: Koristite naredbu `vsce publish` da biste svoju ekstenziju objavili na Marketplaceu. Morat ćete navesti svoje ime izdavača i svoj PAT.

Najbolje prakse za razvoj ekstenzija

Slijedite ove najbolje prakse kako biste stvorili visokokvalitetne i održive VS Code ekstenzije:

Resursi zajednice

Ovdje su neki vrijedni resursi za učenje više o razvoju VS Code ekstenzija:

Zaključak

Razvoj VS Code ekstenzija moćan je način za prilagodbu vašeg okruženja za kodiranje, povećanje produktivnosti i dijeljenje svojih rješenja s globalnom developerskom zajednicom. Slijedeći ovaj sveobuhvatni vodič, možete svladati umjetnost razvoja ekstenzija i stvoriti inovativne alate koji poboljšavaju iskustvo rada s VS Codeom za sebe i druge. Ne zaboravite prihvatiti zajednicu, doprinositi projektima otvorenog koda i kontinuirano učiti i istraživati svijet razvoja VS Code ekstenzija koji se stalno razvija. Sretno i sretno kodiranje!