Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Edytor Brackets: Proste rozszerzenie

wtorek,

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.

Artykuł: Światowy Dzień Książki i Praw Autorskich

Światowy Dzień Książki i Praw Autorskich

Artykuł: Hiszpańska przygoda

Hiszpańska przygoda

Artykuł: Certyfikaty bezpieczeństwa dla zasilaczy komputerowych

Certyfikaty bezpieczeństwa dla zasilaczy komputerowych

Artykuł: DRAM Speculative Leadoff

DRAM Speculative Leadoff

Artykuł: Burst Mode DMA

Burst Mode DMA

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły