M

MLOG

Polski

Uwolnij moc VS Code, ucząc się budować niestandardowe rozszerzenia. Ten przewodnik poprowadzi Cię od konfiguracji po publikację, zwiększając produktywność.

Opanowanie Tworzenia Rozszerzeń VS Code: Kompleksowy Przewodnik dla Globalnych Deweloperów

Visual Studio Code (VS Code) stał się edytorem kodu dla milionów deweloperów na całym świecie. Jego popularność wynika z lekkiej natury, potężnych funkcji i, co najważniejsze, możliwości rozbudowy. Możliwość tworzenia niestandardowych rozszerzeń pozwala deweloperom dostosować edytor do swoich specyficznych potrzeb, zwiększając produktywność i usprawniając przepływy pracy. Ten kompleksowy przewodnik przeprowadzi Cię przez proces tworzenia własnych rozszerzeń VS Code, od początkowej konfiguracji po publikację Twojego dzieła, aby reszta świata mogła z niego korzystać.

Dlaczego warto tworzyć rozszerzenia VS Code?

Tworzenie rozszerzeń VS Code oferuje liczne korzyści, zarówno dla poszczególnych deweloperów, jak i dla organizacji:

Wymagania wstępne

Zanim zagłębisz się w tworzenie rozszerzeń, upewnij się, że masz zainstalowane następujące elementy:

Konfiguracja środowiska deweloperskiego

Mając już zainstalowane wymagania wstępne, możesz skonfigurować środowisko deweloperskie:

  1. Utwórz nowy projekt rozszerzenia: Otwórz swój terminal i uruchom następujące polecenie, aby uruchomić generator rozszerzeń:
    2. yo code
  2. Odpowiedz na pytania: Generator zada szereg pytań dotyczących Twojego rozszerzenia. Oto podział typowych pytań i zalecanych odpowiedzi:
    • Jakiego typu rozszerzenie chcesz utworzyć? Wybierz "New Extension (TypeScript)" dla rozszerzenia opartego na TypeScript, co jest zalecanym podejściem.
    • Jak nazywa się Twoje rozszerzenie? Wybierz opisową i unikalną nazwę dla swojego rozszerzenia. Przykłady: "Code Spell Checker", "JavaScript Snippets", "Python Autocomplete".
    • Jaki jest identyfikator Twojego rozszerzenia? Jest to unikalny identyfikator Twojego rozszerzenia, zwykle w formacie `publisher.extension-name`. Wybierz nazwę wydawcy (np. Twoją nazwę użytkownika GitHub lub nazwę firmy).
    • Jaki jest opis Twojego rozszerzenia? Podaj zwięzły i informacyjny opis tego, co robi Twoje rozszerzenie.
    • Zainicjować repozytorium git? Wybierz "Tak", aby zainicjować repozytorium Git do kontroli wersji.
    • Czy chcesz używać eslint do sprawdzania kodu? Wybierz "Tak", aby wymusić spójność stylu kodu.
  3. Otwórz projekt w VS Code: Po zakończeniu działania generatora, otwórz nowo utworzony folder projektu w VS Code.

Zrozumienie struktury projektu

Generator rozszerzeń tworzy podstawową strukturę projektu z następującymi kluczowymi plikami:

Pisanie Twojego pierwszego rozszerzenia

Zacznijmy od utworzenia prostego rozszerzenia, które wyświetla komunikat "Hello World" po wykonaniu polecenia:

  1. Otwórz `src/extension.ts`: Ten plik zawiera funkcję `activate`, która jest wywoływana po aktywowaniu rozszerzenia.
  2. Zmodyfikuj funkcję `activate`: Zastąp istniejący kod następującym: 
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Gratulacje, Twoje rozszerzenie \"my-extension\" jest teraz aktywne!');

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

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Wyjaśnienie:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Rejestruje polecenie z identyfikatorem `my-extension.helloWorld`. To polecenie będzie dostępne w palecie poleceń VS Code.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: Wyświetla komunikat informacyjny w oknie VS Code.
    • `context.subscriptions.push(disposable)`: Dodaje polecenie do subskrypcji rozszerzenia, zapewniając jego prawidłowe usunięcie po dezaktywacji rozszerzenia.
  4. Zmodyfikuj `package.json`: Dodaj następujące elementy do sekcji `contributes`, aby zdefiniować polecenie:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Wyjaśnienie:
    • `"commands"`: Definiuje polecenia, które wnosi Twoje rozszerzenie.
    • `"command": "my-extension.helloWorld"`: Określa identyfikator polecenia, który pasuje do identyfikatora użytego w `extension.ts`.
    • `"title": "Hello World"`: Ustawia nazwę wyświetlaną dla polecenia w palecie poleceń.

Testowanie Twojego rozszerzenia

Teraz czas przetestować Twoje rozszerzenie:

  1. Naciśnij F5: Spowoduje to uruchomienie nowego okna VS Code z zainstalowanym rozszerzeniem. To jest "Extension Development Host".
  2. Otwórz paletę poleceń: Naciśnij `Ctrl+Shift+P` (lub `Cmd+Shift+P` na macOS), aby otworzyć paletę poleceń.
  3. Wpisz "Hello World": Powinieneś zobaczyć swoje polecenie na liście w palecie poleceń.
  4. Wybierz "Hello World": Kliknięcie polecenia spowoduje jego wykonanie i wyświetlenie komunikatu "Hello World" w oknie VS Code.

Debugowanie Twojego rozszerzenia

Debugowanie jest kluczowe dla identyfikacji i naprawiania problemów w Twoim rozszerzeniu. VS Code zapewnia doskonałe wsparcie dla debugowania:

  1. Ustaw punkty przerwania: Kliknij w marginesie edytora obok numerów wierszy, aby ustawić punkty przerwania w swoim kodzie.
  2. Naciśnij F5: Spowoduje to uruchomienie Extension Development Host w trybie debugowania.
  3. Uruchom swoje rozszerzenie: Wykonaj polecenie lub akcję, która uruchamia kod, który chcesz zdebugować.
  4. Sprawdź zmienne i stos wywołań: Debuger VS Code wstrzyma wykonywanie w punktach przerwania, pozwalając na sprawdzenie zmiennych, krok po kroku przez kod i zbadanie stosu wywołań.

Praca z API VS Code

API VS Code zapewnia bogaty zestaw interfejsów i funkcji do interakcji z edytorem. Oto kilka kluczowych obszarów API:

Przykład: Tworzenie rozszerzenia fragmentu kodu

Stwórzmy rozszerzenie, które dodaje fragment kodu do tworzenia podstawowego komponentu React:

  1. Utwórz folder `snippets`: Utwórz nowy folder o nazwie `snippets` w głównym katalogu projektu.
  2. Utwórz plik fragmentu kodu: Utwórz plik o nazwie `react.json` w folderze `snippets`.
  3. Dodaj definicję fragmentu kodu: Dodaj następujący kod JSON do `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. Wyjaśnienie:
    • `"React Component"`: Nazwa fragmentu kodu.
    • `"prefix": "reactcomp"`: Prefiks, który uruchamia fragment kodu. Wpisanie `reactcomp` i naciśnięcie `Tab` spowoduje wstawienie fragmentu kodu.
    • `"body"`: Tablica ciągów reprezentujących wiersze kodu w fragmencie.
    • `${1:ComponentName}`: Zakładka, która pozwala na szybką zmianę nazwy komponentu.
    • `"description"`: Opis fragmentu kodu.
  5. Zmodyfikuj `package.json`: Dodaj następujące elementy do sekcji `contributes`: 
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Wyjaśnienie:
    • `"snippets"`: Definiuje fragmenty kodu, które wnosi Twoje rozszerzenie.
    • `"language": "javascriptreact"`: Określa język, dla którego fragment kodu jest odpowiedni.
    • `"path": "./snippets/react.json"`: Określa ścieżkę do pliku fragmentu kodu.
  7. Przetestuj swój fragment kodu: Otwórz plik `.jsx` lub `.tsx` i wpisz `reactcomp`. Naciśnij `Tab`, aby wstawić fragment kodu.

Zaawansowane techniki tworzenia rozszerzeń

Po opanowaniu podstaw, możesz odkrywać bardziej zaawansowane techniki tworzenia rozszerzeń:

Internacjonalizacja i lokalizacja (i18n i L10n)

Aby dotrzeć do globalnej publiczności, rozważ internacjonalizację i lokalizację swojego rozszerzenia. Obejmuje to dostosowanie rozszerzenia do obsługi różnych języków i regionów.

Publikowanie Twojego rozszerzenia

Gdy Twoje rozszerzenie będzie gotowe, możesz opublikować je w VS Code Marketplace, aby inni mogli z niego korzystać:

  1. Utwórz organizację Azure DevOps: Będziesz potrzebować organizacji Azure DevOps, aby opublikować swoje rozszerzenie. Jeśli jej nie masz, utwórz darmowe konto na stronie internetowej Azure DevOps.
  2. Zainstaluj narzędzie `vsce`: VS Code Extension Manager (`vsce`) to narzędzie wiersza poleceń do pakowania i publikowania rozszerzeń. Zainstaluj je globalnie za pomocą npm:
    3. npm install -g vsce
  3. Utwórz wydawcę: Wydawca to tożsamość, która posiada Twoje rozszerzenia na Marketplace. Utwórz wydawcę za pomocą polecenia `vsce create-publisher`. Będziesz musiał podać nazwę wydawcy i osobisty token dostępu (PAT) z Azure DevOps.
  4. Wygeneruj osobisty token dostępu (PAT): W Azure DevOps przejdź do "Ustawienia użytkownika" -> "Osobiste tokeny dostępu" i utwórz nowy PAT z zakresem "Marketplace (Publikuj)".
  5. Spakuj swoje rozszerzenie: Użyj polecenia `vsce package`, aby spakować swoje rozszerzenie do pliku `.vsix`.
  6. Opublikuj swoje rozszerzenie: Użyj polecenia `vsce publish`, aby opublikować swoje rozszerzenie w Marketplace. Będziesz musiał podać nazwę swojego wydawcy i swój PAT.

Najlepsze praktyki dla tworzenia rozszerzeń

Postępuj zgodnie z tymi najlepszymi praktykami, aby tworzyć wysokiej jakości i łatwe w utrzymaniu rozszerzenia VS Code:

Zasoby społeczności

Oto kilka cennych zasobów, aby dowiedzieć się więcej o tworzeniu rozszerzeń VS Code:

Wnioski

Tworzenie rozszerzeń VS Code to potężny sposób na dostosowanie środowiska kodowania, zwiększenie produktywności i dzielenie się swoimi rozwiązaniami z globalną społecznością deweloperów. Postępując zgodnie z tym kompleksowym przewodnikiem, możesz opanować sztukę tworzenia rozszerzeń i tworzyć innowacyjne narzędzia, które ulepszają doświadczenia VS Code dla siebie i innych. Pamiętaj, aby zaangażować się w społeczność, wnosić wkład w projekty open source i nieustannie uczyć się i odkrywać wciąż ewoluujący świat tworzenia rozszerzeń VS Code. Powodzenia i miłego kodowania!