Skip to content

Die 30 besten VS Code Erweiterungen für Administratoren und DevOps

Wie bereits im letzten Artikel erwähnt, gibt es mit Visual Studio Code einen starken Editor, welcher sich mit Hilfe von Erweiterungen für jeden Einsatzzweck anpassen lässt.

Ich möchte euch einige davon vorstellen, welche sich für den Einsatz im Administrations- oder DevOps Bereich eignen.

Die 30 besten VS Code Erweiterungen

  1. Ansible Language: Zu dieser Erweiterung muss wenig gesagt werden. Ihr erhaltet YAML Support mit Syntax Highlighting, Autovervollständigung und der mitgelieferte YAML bzw. Ansible Linter zeigt euch Fehler adhoc an. ansible

  2. Apache Syntax Support: Der Name ist Programm und eure Apache Config Files erstrahlen beim Editieren in neuem Glanz, dank Syntax Highlighting.

  3. Atom Keymap: Solltet ihr aus der Atom Editor Welt kommen und eure alten Shortcuts vermissen, dann hilft das Plugin ungemein.

  4. Better Jinja: Das Arbeiten mit Jinja Templates kann schnell in die Verzweiflung führen. Durch diese Erweiterung erhaltet ihr neben Jinja auch Support für HTML, Markdown, YAML, CSS, Docker, Python und uvm. in euren Dateien. jinja

  5. Better TomlTom's Obvious, Minimal Language kommt immer mal wieder vor. Einige werden die Dateien von Gitlab kennen. Die Extension sorgt für bessere Lesbarkeit beim Editieren.

  6. Confluence: Atlassians Wiki Lösung findet sich sehr häufig in Unternehmen. Aus diesem Grund kommen einige sicher öfters mit deren Markup in Berührung. Hier gibt es Unterstützung für Confluence® and Jira® Markup.

  7. Debian Package Syntax Highlighting: Nur für diejenigen, die öfters mit DEB Paketen zu tun haben.

  8. Docker: Eigentlich schon essentiell, Docker Unterstützung für VS Code. docker

  9. Git History: Für Git fast unverzichtbar. Bereitet Logs auf, nimmt Grafiken zu Hand, kann vergleichen usw.

  10. Git Lens: Der selbst ernannte Supercharger. Bietet ähnlich wie Git History eine schöne Log Übersicht. Zusätzlich dazu kommen Features wie Revision Navigation, History Anzeige in der Status Bar oder der aktuellen Zeile.

  11. Gremlins Tracker: Wer kenn es nicht, ein unerwünschtes Leerzeichen sorgt im Code für Aufregung. Gremlins werden sie von dieser Erweiterung genannt und als solche auch in der Sidebar sichtbar gemacht. gremlins

  12. Hugo Language Support: NutzerInnen des Frameworks wird mit Syntax Highlighting und Snippets das Webseiten bauen erleichtert.

  13. Indent Rainbow: Einer meiner Favoriten, macht Nichts anderes als Einrückung kolorieren. Das hilft nicht nur bei YAML Dateien ungemein. 

  14. Jinja Syntax Highlighting: Jinja kann durchaus hilfreich sein, leider geht auch schnell die Übersicht im Code verloren. Durch Syntax-Hervorhebung kann dem aber vorgebeugt werden.

  15. Kubernetes: Die Beschreibung im Marketplace sagt eigentlich alles:  Develop, deploy and debug Kubernetes applications

  16. Nginx Configuration Language Support: Autovervollständigung bei der NGINX Konfiguration, nicht mehr und nicht weniger. Allerdings nicht mehr ganz aktuell. nginx

  17. Notepad++ Keymap: Für Umsteiger eignet sich diese Notepad++ Keymap.

  18. OpenSSL Utilities: Auf ITrig hatte ich bereits Anleitungen, wie Private Key, CSR oder self-signed Zertifikate über die Kommandozeile erstellt werden. Die Erweiterung erlaubt euch das Erstellen ohne weitere Kenntnisse der CLI Befehle direkt in Visual Studio Code. privkey

  19. Prettier: Schöner programmieren mit Prettier - Code formatter. Das Tools formatiert euren Code automatisch. Unterstützt werden JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML.

  20. Projekt Manager: Wenn an mehreren Projekten gleichzeitig gearbeitet wird, kann es sinnvoll sein die Verwaltung dieser zu verbessern.

  21. Rainbow Brackets: Es wird wieder bunt. Regenbogenfarben für die runden Klammern, die eckigen Klammern und die verschnörkelten Klammern.

  22. Remote SSH: Dateien direkt auf Servern editieren kann durchaus praktisch sein.

  23. Salt-lint. Einfacher Linter für States und Pillars

  24. Saltstack: Analog zum Salt-Linter ist dieser Syntax Highlighter für Saltstack ein Muss. saltstack

  25. Snort:  NIDS/NIPS in Farbe.

  26. Sort: Wörter alphabetisch sortieren, einfach shift+alt+s  drücken

  27. Tomcat for Visual Code: Tomcat Server direkt aus VS Code starten und war Pakete debuggen.

  28. Toml Language Support: Ein weiterer Formater für Toml Dateien.

  29. XML Support: Alles was es für XML braucht in einem Plugin.

  30. YAML: Voller YAML Support mit Kubernetes Unterstützung. yaml

Themes

Damit die Arbeit noch mehr Spaß macht, gibt es ebenfalls viele Themes, sowie Icon Sets.

Hier eine kleine Auswahl an Themes, welche ich gerne einsetze.

  1. SynthWave 84 (die 80er sind zurück)
  2. Dracula Theme (schönes ausgewogenes Theme)
  3. Material Icons (Icons für die Ordner und Dateistruktur)
  4. Solarized Dark (Blau und Grüntöne, ist bei VSCode dabei)
  5. Monokai Pro (Theme und Icon Set zusammen)

synthwave

Eine schöne Übersicht mit Vorschauen vieler Themes bietet vscodethemes.com

Download

Schlussendlich fehlt wohl noch ein Link zu Visual Studio Code. Denn was helfen Erweiterungen, wenn der Editor fehlt.

Download VSCode

VS Code: Swissknife - konvertieren und generieren direkt im Editor

Cyberchef (The Cyber Swiss Army Knife) hatte ich vor fast 4 Jahren auf ITrig erwähnt. Das Tool sagte mir damals wegen seiner praktischen Encoding beziehungsweise Decoding Funktionen zu.

Seitdem ist einige Zeit vergangen und Arbeitsweisen haben sich geändert. So verwende ich inzwischen unter anderem Visual Studio Code fürs tägliche Editieren. Durch die vielen Plugins ist der Editor sehr gut erweiterbar.

Genau hier kommt die Erweiterung Swiss Knife ins Spiel

 

VS Code – Swissknife

swissknife

Die Visual Studio Code Erweiterung von Luis Fontes beherrscht eine Menge an Funktionen, vom Hashes generieren, über Hex oder Base64 bis Markdown.

Das heißt eurer Editor wird mit wenigen Klicks um viele Alltagsanwendungen erweitert.

Folgende Funktionen beherrscht das Schweizer Messer für Visual Studio momentan:

  • Base64 decode

  • Base64 encode

  • Binary To Text

  • Bip39 Mnemonic

  • CSV to Markdown

  • Count characters

  • Count words

  • Crypto currency value

  • Date to Timestamp

  • Eliptic Curve Key Pair

  • Generate Password

  • HTML Encode (AlL)

  • Hex decode

  • Hex encode

  • Hex to RGB

  • Identify hash

  • JWT Decode

  • Join lines

  • Lorem Ipsum

  • Markdown to HTML

  • Md5 hash

  • New Swissknife Script (JS)

  • New Swissknife Script (TS)

  • Password strength

  • RGB To Hex

  • RSA Key pair

  • Random String

  • Request to fetch

  • SHA1 hash

  • SHA256 hash

  • SHA512 hash

  • Self Signed Certificate

  • Start Local HTTP Server

  • Start Local HTTPS Server

  • Stop HTTP Server

  • Text To Binary

  • Text to String

  • Timestamp to Date

  • To Camel Case

  • To Lower Case

  • To Morse code

  • To Upper Case

  • UUIDv4

  • Unicode decode

  • Unicode encode (js format)

  • Unix/Linux Permission To Human Readable

  • Url Decode

  • Url Encode

  • Url Encode (All Characters)

  • Url Shorten

  • Url Unshorten (url expand)

Die Funktionen lassen sich mit swissknife.show oder Strg+Shift+9 beziehungsweise cmd+shift+9 im Terminal aufrufen. (Text markieren vorher nicht vergessen).

Hat man die Tastenkombination einmal im Kopf, erleichtert die Erweiterung das Arbeiten an vielen Stellen sehr, vorrausgesetzt die Anwendungsfälle kommen öfters vor.

Download swissknife

 

Raspberry Pi 4 Kiosk - Bildschirmschoner unter Raspberry Pi OS deaktivieren

Der Raspberry Pi ist schon längere Zeit in Version 4 verfügbar, Raspbian heißt nun Raspberry Pi OS und der dazugehörige Imager hat mehr Optionen erhalten (Strg + Shift +X).

Dies sind allerdings nicht die einzigen Neuerungen. Denn eine oft gestellte Frage hat nun ebenfalls eine andere Antwort.

Wie deaktiviere ich den Bildschirmschoner unter Raspberry Pi OS

Um den Bildschirmschoner zu deaktivieren, konnten bisher in einigen Dateien Hand angelegt werden.

So mussten in der Vergangenheit diverse Werte im Autostart eingetragen werden:

/home/pi/.config/lxsession/LXDE-pi/autostart

Beziehungsweise unter:

/etc/xdg/lxsession/LXDE-pi/autostart 

Details dazu findet ihr in einem alten Artikel.

Mit der neuen OS Version, welche auf Debian Buster basiert, ist dies nicht mehr nötig.

Der Hersteller hat diese Option nun direkt im Konfigurationstool versteckt. 

sudo raspi-config

[Menu] --> [Preferences] --> [Screen Blanking]

raspberrypi4-screensaveDie alten Methoden funktionieren nicht mehr.

Ein weiterer Workaround wäre die Installation eines extra Screensavers ( sudo apt-get install xscreensaver ), welcher dann deaktiviert wird. Dieser Schritt sollte im Normalfall allerdings nicht nötig sein.

 

NGINX - Webserver, Load Balancer und Proxy

NGINX ist neben Apache einer der bekanntesten Webserver. Allerdings kann das Tool mehr als nur ein schlichter Webserver sein. Reverse Proxy, Load Balancer, Mail Proxy oder HTTP cache Server sind ein paar wenige Funktionen die Nginx beherrscht.

Ich möchte euch heute ein paar Beispiele zu einzelnen Funktionen zeigen. Den Anfang macht logischerweise die Installation. Als System verwende ich einen Ubuntu 20.04 LTS Server.

 

Nginx

 

Installation Nginx unter Ubuntu/Debian

Die Installation der frei verfügbaren Version (Die kommerzielle Variante nennt sich Nginx Plus) erfolgt über das Nginx Repository.

sudo wget https://nginx.org/keys/nginx_signing.key

sudo apt-key add nginx_signing.key

sudo nano /etc/apt/sources.list.d/nginx.list

  deb https://nginx.org/packages/mainline/ubuntu/ focal nginx
  deb-src https://nginx.org/packages/mainline/ubuntu/ focal nginx
              
sudo apt install nginx

sudo systemctl is-enabled nginx.service

sudo systemctl enable nginx

Nach der Installation erfolgt eine schnelle Kontrolle.

ss -ltn
ubuntu:~$ curl -I http://127.0.0.2

HTTP/1.1 200 OK
Server: nginx/1.19.6
Date: Thu, 17 Dec 2020 22:20:49 GMT
Content-Type: text/html
Content-Length: 612

Nginx selbst kompilieren

Es besteht auch die Möglichkeit, das Nginx Paket selbst zu kompilieren. Dies wird dann nötig, wenn Pakete benötigt werden, die in der Standardvariante nicht enthalten sind. Die war zum Beispiel bei der Verwendung von GeoIP oder LibreSSL mal bzw. ist noch so.

Mit dem folgenden Befehl können die installierten Module eingesehen werden.

Nginx –V

In der Standardinstallation sollte hier das Modul --add-dynamic-module=/build/nginx-5J5hor/nginx-1.18.0/debian/modules/http-geoip2 angezeigt werden. D.h. das eingangs erwähnte Geo IP Modul wird hier bereits geladen.

Einen eigenen Nginx Server unter Debian/Ubuntu einrichten

Nach einer erfolgreichen Installation zeigt Nginx eine Standardseite an. Diese kann gelöscht oder zusätzlich eine eigene virtuelle Seite angelegt werden. Auf einer IP können so mehrere Webseiten gehostet werden.

Folgende Struktur bietet sich unter Ubuntu an:

Konfiguration der einzelnen virtuellen Server.

/etc/nginx/sites-available/xyz

Momentan aktive Server wobei es sich hier um einen Symlink handelt.

/etc/nginx/sites-enabled/xyz

Schritt für Schritt heißt dies für einen Server welche auf Port 80 lauscht:

#config anlegen
touch /etc/nginx/sites-available/itrig

#config schreiben
nano /etc/nginx/sites-available/itrig

server {

        listen 80 default_server;    

        # Make site accessible from http://localhost/

        server_name localhost;
        location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
        }
}

#aktiv setzen
ln -s /etc/nginx/sites-available/itrig /etc/nginx/sites-enabled/itrig

Konfiguration überprüfen

nginx –t

Neustart der Konfiguration mit

#lädt nur die neue Konfiguration
nginx –s reload

oder

sudo systemctl reload nginx


Nginx als Loadbalancer verwenden

Neben der reinen Webserverfunktion bietet NGINX die Möglichkeit den Server, als Loadbalancer zu betreiben. Da heißt der Server sorgt für Ausfallsicherheit bzw. Leistung von Webanwendungen, in dem er die Last verteilt. Vorstellen kann man sich dies wie einen Haupthändler, welcher Daten unter verteilt.

LoadbalancerNginx bietet mehrere Varianten an, wie diese Verteilung geschehen kann.

Round Robin

Das bekannteste dürfte das Round Robin Verfahren sein. Es wird eine Liste von Servern durchgearbeitet und die Last nach und nach verteilt. Ist die Liste zu Ende, fängt der Server wieder am Anfang an.

Im unteren Beispiel werden 3 Server in der Gruppe "itrigloadbalancer" zusammengefasst und der Webserver geht diese Liste nach und nach durch. Unterstützt werden die Protokolle HTTP, HTTPS, FastCGI, uwsgi, SCGI, memcached, und gRPC.

http {
    upstream itrigloadbalancer {
        server srv1.example.com;
        server srv2.example.com;
        server srv3.example.com;
    }

    server {
        listen 80;

        location / {
            proxy_pass http://itrig.de;
        }
    }
}

Least Connected

Eine weitere Lastverteilung ist das Least-Connected-Verfahren. Hier wird auf die aktiven Verbindungen der einzelnen Server geschaut. Der Server, welcher die geringste Anzahl an aktiven Verbindungen hat, bekommt die Anfrage zugeschanzt.

upstream intrigleastload {
        least_conn;
        server srv1.example.com;
        server srv2.example.com;
        server srv3.example.com;
    }

Session-Persistenz - IP Hash

Die dritte Möglichkeit Last zu verteilen, stellt das IP-Hash-Verfahren dar. Hier werden von den zugreifenden Client IPs Hash Werte erstellt. Anhand dieser Werte wird einem Client immer ein bestimmter Server zugewiesen. Damit erhält der Nutzer eine Session Persistenz, da Anfragen immer vom gleichen Server beantwortet werden.

Beim Round-Robin- oder Least-Connected-Load-Balancing kann jede nachfolgende Anfrage eines Clients potenziell auf einem anderen Servern ankommen.

upstream itrighash {
    ip_hash;
    server srv1.example.com;
    server srv2.example.com;
    server srv3.example.com;
}

Weighted load balancing

Alle Varianten lassen sich zusätzlich gewichten. So kann es vorkommen, dass ein Server eine bessere Hardware verbaut hat, als ein anderer. Mit Weighted load balancing lässt sich einzelnen Geräten mehr Last zuschieben.

upstream itrigmitgewicht {
        server srv1.example.com;
        server srv2.example.com weight=3;
        server srv3.example.com;
    }
upstream itrig {
    ip_hash;
    server srv1.example.com weight=2;
    server srv2.example.com;
    server srv3.example.com;
}

Mehr zu der Thematik unter load_balancing.


Nginx als Reverse Proxy verwenden

Den aufmerksamen Lesern dürfte aufgefallen sein, dass in einem Code Beispiel weiter oben eine Zeile mit "proxy_pass" vorhanden ist. Diese Zeile deutet darauf hin, dass NGINX als Reverse Proxy eingesetzt wird und ein Aufruf nicht direkt auf dem Server landet, sondern weitergeleitet wird.

location /webshop {
proxy_pass http://opencart.itrig.local;
}

location /landkarte {
proxy_pass http://192.168.100.99;
}

Es gibt verschiedene "Vorteile" für so eine Weiterleitung.

So kann der Nginx als HTTPS Endpunkt dienen und die Struktur dahinter kann unverschlüsselt agieren. Auch bietet NGINX die Möglichkeit als Reverse Proxy und als Load Balancer gleichzeitig zu arbeiten, die Details sind weiter oben zu lesen.

Weiter erlaubt der vorgeschaltete Server eine Caching Funktion, was zum schnelleren Ausliefern von Webseiten beitragen kann.

Hier ein Beispiel mit gesplittetem Cache aus der offiziellen NGINX Cache Dokumentation.

proxy_cache_path /path/to/hdd1 levels=1:2 keys_zone=my_cache_hdd1:10m
                 max_size=10g inactive=60m use_temp_path=off;
proxy_cache_path /path/to/hdd2 levels=1:2 keys_zone=my_cache_hdd2:10m
                 max_size=10g inactive=60m use_temp_path=off;

split_clients $request_uri $my_cache {
              50%          “my_cache_hdd1”;
              50%          “my_cache_hdd2”;
}

server {
    # ...
    location / {
        proxy_cache $my_cache;
        proxy_pass http://my_upstream;
    }
}

Das Thema Sicherheit spielt ebenso eine Rolle, da durch den vorgeschalteten Server, die Angriffsfläche kleiner gehalten wird.


NGINX mit Regex

Richtig interessant wird es, sobald die aufgerufene URL verschiedene Eigenschaften besitzt bzw. ein besonderes Verhalten zeigen sollte.

Diese Eigenschaften werden mit regulären Ausdrücken umgesetzt.

Hier sind ein paar Beispiele von regulären Ausdrücken für NGINX :

# Die URL ist durch * case insensitive
 location ~* /itrig/ {
    #...
    #...
    }

# Die URL ist case sensitive das ^ sorgt dafür das nur z.B. /itrig/logo.jpg gültig ist und nach dem ersten Match gestoppt wird.
 location ^~ /itrig/ {
    #...
    #...
    }

# Bilder anhand der Endung umleiten
 location ~ \.(gif|jpg|png)$ {
    root /data/images;
    }

# Unnötige Endungen aussperren (case insensitive)
 location ~* "\.(old|orig|original|php#|php~|php_bak|save|swo|aspx?|tpl|sh|bash|bak?|cfg|cgi|dll|exe|git|hg|ini|jsp|log|mdb|out|sql|svn|swp|tar|rdf)$" {
    deny all;
    }

# Einen Alias setzen
 location /_/static {
        alias /path/to/glory;
    }

# Rewrite einer URL,  "pfad" wird entfernt
    location /pfad {
        rewrite ^/pfad(.*)$ $1 break;
        proxy_pass http://splunk-api:8080;
    }

Es bietet sich immer an, eigene Befehle zu testen, bevor sie produktiv eingesetzt werden, denn neben Einschränkungen auf URLs kann ebenso Haus und Hof geöffnet werden.

Ein Regex Test sollte daher immer gemacht werden. Hier findet sich so ein Tool online regex.datahoarder.dev.

Das Tool kann jederzeit auf der eigenen Umgebung gehostet werden und ist auf Github zu finden.

Nginx_Regular_Expression_Tester

 

Sailfish OS Kontakte exportieren und auf Android oder iOS importieren

Der Vorgang klingt abstrus, denn wer will schon von Sailfish OS auf Android wechseln, dennoch wurde mir genau diese Frage neulich gestellt.

Sailfish OS Kontakte exportieren

Wie lassen sich Sailfish OS Kontakte zum Beispiel von einem Jolla oder Sony auf Android exportieren?

Die Sailfish Kontakte App bietet keinen direkten Export an, dennoch ich es möglich ein Full Backup des Gerätes zu erstellen und genau damit befinden wir uns schon auf dem richtigen Weg.

Das neueste Sailfish OS (Pallas-Yllästunturi) erlaubt sogar das Erstellen eines vollen Backups direkt in eine Nextcloud, Dropbox oder ownCloud. Die so erstellte TAR Datei muss nur noch entpackt werden. Unter ".\People\data\all.vcf" ist eine VCF Datei mit allen euren Kontakten zu finden, die dann in Android oder iOS importiert werden können.

  1. Datensicherung in Sailfish OS direkt zu Nextcloud erstellen
  2. sailfish_backup_2020-10-28T20-33-00Z.tar entpacken
  3. all.vcf suchen .\People\data\all.vcf
  4. Datei in Android oder iOS importieren

sailfishos-backup