Schlagwort: IDE

  • Visual Studio Code

    VSCode Logo

    Eine Übersicht der zahlreichen Anpassungsmöglichkeiten des Code- Editors Visual Studio Code (VSCode)

    Visual Studio Code ist ein kostenloser Code-Editor, der sich vielfältig an die Bedürfnisse des Nutzers anpassen lässt. Er steht plattformübergreifend für alle gängigen Betriebssysteme zur Verfügung. Mit zahlreichen Plugins (Extensions) lässt er sich für die Arbeit mit unterschiedlichen Programmiersprachen erweitern. Damit wird VSCode zu einer echten IDE (Integrated Development Environment), also zu einem Editor, der zusätzlich Werkzeuge für die Softwareentwicklung mitbringt.

    VSCode Programmfenster

    Das Programm zeichnet sich durch seine sehr gute Anpassbarkeit an die Sehgewohnheiten des Benutzers aus. So kann man das Programmfenster als ganzes skalieren oder nur den Text im Editor- Bereich oder im integrierten Terminal vergrößern. Zusätzlich stehen zahlreiche Farbschemata zur Verfügung.

    Auch kommt VSCode mit allen Auflösungs- oder Skalierungs- Einstellungen des Betriebssystems gut zurecht. Bei manchen Editoren oder IDEs, kann es vorkommen, das Schaltflächen nicht zu sehen oder gar nicht erreichbar sind, wenn der Benutzer für sein Betriebssystem einen höheren Skalierungsfaktor oder / und größere Schriftarten gewählt hat.

    Unter Windows und macOS funktioniert die Unterstützung durch einen Screenreader gut. Auch unter Linux kann der Screenreader Orca inzwischen alle Bereiche lesen.

    Einstellungen finden

    Alle hier vorgestellten Einstellungen finden Sie über das Menü Settings, das man auf verschiedenen Wegen öffnen kann:

    VSCode Programmfenster, mit geöffnetem Menü Settings.
    • über die obere Menüleiste

    Code > Preferences > Settings (auf dem Mac)

    File > Preferences > Settings (Windows und Linux)

    • über das Zahnradsymbol links unten in der Seitenleiste
    • über die Tastenkombination
    Linux und WindowsStrg + , (Komma)
    Maccommand + , (Komma)

    Innerhalb des Menüs „Settings“ finden Sie die gewünschte Einstellung am schnellsten mit Hilfe der Such-Option.

    Hilfe erhalten

    Mit den Tasten opt + F1 öffnet man eine Accessibility-Hilfe, die alle Tastenkombinationen erläutert. Unter Linux und Windows gelingt dies mit den Tasten Alt + Shift + F1.

    VSCode Programmfenster, die Accessibility-Hilfe, ein Pull-Down-Menü am oberen Fensterrand, ist eingeblendet.

    Das Programmfenster skalieren

    Die Ansicht innerhalb des gesamten Programmfensters zoomen funktioniert schnell mit der Tastenkombination Strg + + bzw. Cmd + + und - zum verkleinern.

    Damit verändert man alle Schriftgrößen in allen Menü-Bereichen und alle Symbole.

    Vergrößert man hier sehr stark, wird das auf einem kleineren Bildschirm ein wenig unübersichtlich. Gut geeignet ist diese Vorgehensweise dennoch um nach einer Datei im seitlichen Explorer-Bereich zu suchen oder erst einmal die Programmoberfläche zu erkunden. Auf einem größeren Monitor macht es das Arbeiten deutlich komfortabler.

    Über die Einstellungen können Sie einen Zoom-Level vorgeben, so dass das Programm bereits mit einer vergrößerten Oberfläche startet:

    Settings > Windwo > Zoom-Level

    Mouse-Wheel-Zoom

    Um den Text im Editor- Bereich allein vergrößern zu können, muss zunächst in den Einstellungen die Option Mouse-Wheel-Zoom aktiviert werden. Bei gedrückter Strg- Taste kann dann mit dem Mausrad oder dem Touchpad vergrößert oder verkleinert werden. Auf dem Touchpad funktioniert auch die Zwei-Finger-Geste („Aufziehen“ oder „Zuziehen“). Die nützliche Funktion ist standardmäßig deaktiviert.

    Im Menü Settings findet man mit der Eingabe von „zoom“ im Suchfeld schnell die entsprechenden Einstellungen.

    VSCode Programmfenster, der Bereich "Settings" ist geöffnet, im Suchfeld der Text "zoom".

    So lässt sich ohne Aufwand Quellcode oder Text vergrößern und wieder verkleinern:

    VSCode Programmfenster, der Text im Editor-Bereich ist vergrößert.

    Mit dem Mouse-Wheel-Zoom können Sie auch die Schrift im integrierten Terminal vergrößern. Die Option müssen Sie, wie oben beschrieben, ebenfalls über das Menü Settings zunächst aktivieren.

    Font-Size

    Für den Editor-Bereich und das Terminal können sie die Schriftgröße, Schriftfamilie oder Zeilenabstand dauerhaft umstellen. Diese Möglichkeit besteht auch für viele andere Bereiche wie z.B. Overlay- Fenster oder die Vorschau von Markdown- Texten.

    VSCode Programmfenster, der Bereich "Settings" ist geöffnet, im Suchfeld der Text "font".

    Farbschema

    Die Einstellungen für das Farbschema finden Sie ebenfalls über das Menü „Preferences > Theme“, das Zahnradsymbol oder die Tastenkombination

    command + K (und dann) command + T

    Strg + K (und dann) Strg + T

    Es öffnet sich ein Pull-Down-Menü mit allen bereits installierten Themes, ganz oben die Option „+ Browse additional Color Themes“.

    Alternativ finden Sie Color-Themes auch über das Extension-Symbol der linken Seitenleiste oder das Menü Extensions und Eingabe des Suchbegriffs, z.B. „Theme“ oder „High Contrast“ im Suchfeld.

    Bereits das standardmäßig vorgegebene Thema ist sehr augenfreundlich. Ein gut lesbares Thema ist z.B. auch das Monokai-Sharp-Theme. Mit kräftigen Farben, die sich gut vom dunklen Hintergrund abheben.

    Ein High-Contrast Thema hat VS Code bereits vorinstalliert. Hier werden alle Bereiche mit Linien voneinander getrennt, die aktuell bearbeitete Zeile hervorgehoben. Aber auch andere Anbieter halten solche Themen vor.

    VSCode Programmfenster, High Contrast.

    Zusätzlich hilft die Wahl eines farbstarken Icon-Themes bei der Orientierung im Explorer- Bereich.

    VSCode Programmfenster, im Datei-Explorer-Bereich mit farbigen Icons für unterschiedliche Datei-Typen und Verzeichnisse.

    Das sind nur Beispiele für zahlreiche andere gut lesbare Color-Themes.

    Screenreader

    Unter macOS und Windows erkennt VS Code automatisch, wenn der Nutzer asistive Technologien einsetzt. Es erscheint ein Popup-Fenster mit einer Nachfrage. Das Programm wird dann automatisch entsprechend konfiguriert. Sie sehen dann am unteren Fensterrand den Hinweis „Screen Reader Optimized“.

    💡Hinweis: Unter Linux muss man zum Teil den Screenreader-Optimized-Mode ausdrücklich aktivieren. Läuft der Screenreader bereits, sagt er dies aber auch an und gibt die Tastenkombination

    Shift + Alt + F4

    vor. Ohne die Aktivierung werden zwar normale Textdokumente (wie z.B. Markdown-Files) im Editor gelesen, aber keine Code-Files.

    Command Palette

    Zum schnellen Auffinden jeglicher Befehle dient die Command Palette. Man öffnet Sie mit der Tastenkombination

    Strg + Shift + P

    command + Shift + P (auf dem Mac)

    und kann dann einen Suchbegriff eingeben. Auch hier wird alles vom Screenreader vorgelesen. Der zuletzt verwendete Befehl wird jeweils oben angezeigt.

    In gleicher Weise erhält man eine Übersicht über alle im Explorer befindlichen Dateien mit der Tastenkombination

    Strg + P

    command + P (auf dem Mac)

    Fazit

    Visual Studio Code ist aktuell wohl die IDE mit der besten Barrierefreiheit für Menschen mit eingeschränkter Sehfähigkeit. Alle erdenklichen Möglichkeiten für die Anpassung von Schrift und Farbe stehen zur Verfügung und die Verwendung eines Screenreaders wird unterstützt.


    VS Code Projektseite

    E-Book