wtorek, 2024-03-05

Edytor Brackets: Proste rozszerzenie

Tworzenie rozszerzeń edytora Brackets wymaga pewnej znajomości specyfikacji API Brackets i wiedzy o sposobie zarządzania rozszerzeniami przez program. Konieczne są także podstawy JavaScript. Bardzo pomocne w tym procesie są dokumentacja API i inne zasoby dostępne na stronie projektu. Omawiane rozszerzenie jest bardzo proste, jednak stanowi dobry punkt wyjścia do tworzenia bardziej zaawansowanych rozwiązań.

Struktura rozszerzenia

Rozszerzenie Brackets zazwyczaj zawiera następujące pliki:

• main.js – główny plik JavaScript, który zawiera logikę rozszerzenia;
• package.json – plik konfiguracyjny, który zawiera metadane o rozszerzeniu;
• dodatkowe pliki, takie jak HTML i CSS, jeśli są potrzebne.

Tworzenie rozszerzenia

Prezentowane rozszerzenie wstawia tekst w miejscu kursora.

Utworzenie pliku package.json

Ten plik definiuje podstawowe informacje o rozszerzeniu. Przykład:

{
  "name": "simple-extension",
  "title": "Simple Extension",
  "version": "1.0.0",
  "author": "CKZiU",
  "description": "Proste rozszerzenie dla Brackets",
  "engines": {
    "brackets": ">=1.0"
  }
}

Utworzenie pliku main.js

Ten plik zawiera główną logikę rozszerzenia:

define(function (require, exports, module) {
    var EditorManager = brackets.getModule("editor/EditorManager"),
        CommandManager = brackets.getModule("command/CommandManager"),
        Menus = brackets.getModule("command/Menus");

    function insertText() {
        var editor = EditorManager.getFocusedEditor();
        if (editor) {
            var insertionPos = editor.getCursorPos();
            editor.document.replaceRange("Hello CKZiU!", insertionPos);
        }
    }

    var MY_COMMAND_ID = "insertText.customInsertText";
    CommandManager.register("Wstaw Tekst", MY_COMMAND_ID, insertText);

    var menu = Menus.getMenu(Menus.AppMenuBar.EDIT_MENU);
    menu.addMenuItem(MY_COMMAND_ID);
});

Testowanie Rozszerzenia

• Umieść przygotowane pliki w folderze w katalogu rozszerzeń Brackets. Ścieżka dostępu zwykle wygląda tak: C:\Users\[Twoje Imię]\AppData\Roaming\Brackets\extensions\user\simple-extension na Windows lub ~/Library/Application Support/Brackets/extensions/user/ na macOS.
• Uruchom ponownie Brackets, aby załadować rozszerzenie.
• Sprawdź, czy nowa opcja menu pojawiła się w Brackets (zgodnie z powyższym przykładem, powinna pojawić się w menu Pomoc).

Debugowanie i rozwój

• Użyj narzędzi deweloperskich Brackets do debugowania rozszerzenia (Deweloper -> Show Developer Tools).
• Kontynuuj rozwijanie i testowanie swojego rozszerzenia, dodając więcej funkcji i optymalizując kod.

Omówienie kodu rozszerzenia

Struktura Kodu

Rozszerzenie jest zbudowane na module AMD (Asynchronous Module Definition), który jest standardem w Brackets. Używa funkcji define do określenia zależności i logiki modułu.

define(function (require, exports, module) {
    // Tutaj znajduje się logika rozszerzenia
});

Importowanie modułów brackets

Na początku pliku main.js, importujemy niezbędne moduły z Brackets:

var EditorManager = brackets.getModule("editor/EditorManager"),
    CommandManager = brackets.getModule("command/CommandManager"),
    Menus = brackets.getModule("command/Menus");

• EditorManager: Umożliwia interakcję z aktualnie aktywnym edytorem.
• CommandManager: Umożliwia rejestrowanie nowych komend (poleceń) w Brackets.
• Menus: Umożliwia dodawanie elementów do menu Brackets.

Funkcja insertText

Definiujemy funkcję insertText, która będzie odpowiedzialna za wstawienie tekstu.

function insertText() {
    var editor = EditorManager.getFocusedEditor();
    if (editor) {
        var insertionPos = editor.getCursorPos();
        editor.document.replaceRange("Twój tekst", insertionPos);
    }
}

• EditorManager.getFocusedEditor(): Pobiera aktualnie aktywny edytor.
• editor.getCursorPos(): Pobiera aktualną pozycję kursora w edytorze.
• editor.document.replaceRange("Hello CKZiU!", insertionPos): Wstawia tekst "Twój tekst" w miejscu kursora.

Rejestracja komendy

Następnie rejestrujemy nową komendę w Brackets:

var MY_COMMAND_ID = "insertText.customInsertText";
CommandManager.register("Wstaw Tekst", MY_COMMAND_ID, insertText);

• MY_COMMAND_ID: Unikalny identyfikator dla naszej komendy.
• CommandManager.register: Rejestruje komendę z określoną nazwą, identyfikatorem i funkcją, która zostanie wywołana, gdy komenda zostanie aktywowana.

Dodawanie komendy do menu

Ostatecznie dodajemy naszą komendę do menu Edycja (Edit) w Brackets:

var menu = Menus.getMenu(Menus.AppMenuBar.EDIT_MENU);
menu.addMenuItem(MY_COMMAND_ID);

• Menus.getMenu(Menus.AppMenuBar.EDIT_MENU): Pobiera menu Edycja.
• menu.addMenuItem(MY_COMMAND_ID): Dodaje nową komendę do menu.