Mein Kollege Slawo hat mich schon vor geraumer Zeit auf einen interessanten Code-Editor hingewiesen: Microsofts Visual Studio Code (oder kurz „VS Code“). Microsofts Charme-Offensive in Richtung der Developer-Community hat ein ganz neues Werkzeug hervorgebracht, dass es mit den etablierten Konkurrenten vom Range eines Sublime Text, Atom und Co aufnehmen soll.

Warum wechseln?

Lange Jahre war Sublime Text 2 bzw. 3 mein Lieblings-Code-Editor. Vor allen Dingen die hohe Geschwindigkeit beim Tippen als auch die unglaublich schnelle Suche machten für mich lange Jahre die Benutzung einer echten IDE überflüssig. Mit Hilfe von unzähligen Sublime-Plugins habe ich mich da inzwischen sehr gemütlich eingerichtet.

Beruflich bin ich aber inzwischen bei PhpStorm angelangt, und habe mich da an bestimmten Luxus gewöhnt. Hervorragendes Auto-Complete bzw. die Verlinkung von Objekten im Quellcode, die direkte Anzeige von Fehlern oder die Integration von SQL, Git und Terminals vermisste man dann und wann doch in Sublime Text. Dafür war mir bei PhpStorm schon immer seine Behäbigkeit und sein Ressourcenhunger für das heimische Arbeiten ein Gräuel.

Wonach ich also suchte ist die Spritzigkeit von Sublime Text 3, und die integrierte Arbeitsweise und Unterstützung von PhpStorm. Für mich selber habe ich mit Microsoft Visual Studio Code den perfekten Kompromiss gefunden – zumal dieser Kompromiss keinen Cent kostet.

Sublime Text 3 ist der schnellste Klappspaten unter den Editoren, während PhpStorm das Äquivalent eines Braunkohletagebaubaggers ist.
Damit entspricht Microsofts Visual Studio Code einem Bobcat-Bagger.

Meine Highlights bei VS Code:

  • Schnell, kleiner Fußabdruck
  • Auto-Complete, Auto-Suggest, bzw. Intellisense
  • Integriertes Git
  • Integriertes Terminal
  • Direkte Unterstützung für Gulp, Grunt, Docker, etc.
  • Integriertes Debugging
  • Schnell wachsende Palette an Plugins

Meine ersten Eindrücke

Persönlich wechsele ich ungern meine Werkzeuge aus, wenn ich nicht einen echten Grund dafür verspüre. Ich werfe gerne ein Auge auf die Trends in diesem Bereich, ohne andauernd den Drang zu verspüren, alles selber ausprobieren zu müssen. Außerdem möchte ich eigentlich wenig Zeit mit meinen Werkzeugen, sondern lieber mit meiner Arbeit verbringen. Umso größer ist für mich also der Schritt, meinen Code-Editor auszutauschen – das zentrale Werkzeug, dass meine Ideen in ausführbaren Code verwandelt.

Wie bei jedem Editor-Wechsel war am Anfang etwas Fremdeln angesagt. Chris Coyiers Artikel über den Umstieg auf VS Code hat mir zum Glück gerade noch rechtzeitig die Möglichkeit erläutert, mit einem Plugin das Verhalten von VS Code in einigen relevanten Bereichen (z.B. Tastaturkürzel) einfach auf das Verhalten von Sublime Text 3 abzuändern.

VS Code nutze ich daheim aktuell für folgende Projekt-Typen:

  • Node.js
  • PHP / Web-Projekte

Überraschenderweise ist VS Code für Windows, Mac OSX und Linux verfügbar.

Plugins bzw. Extensions

Direkt nach der Installation stellt man überrascht fest, dass es eigentlich nicht viele Plugins braucht; VS Code hat unglaublich viele Funktionalitäten von vorne herein integriert. So ist für die Verwendung von Gulp, Grunt, Sass, ESlint, Php-Debuggern und vielen anderen Notwendigkeiten des Webentwickler-Lebens bereits Vorsorge getroffen. Selbst eine Live-Preview von Markdown, ein Terminal und Git ist integriert. Daher ist meine persönliche Liste von zusätzlichen Plugins relativ bescheiden:

Sublime Text Keymap and Settings
Die wahre Geschwindigkeit eines Programmierers besteht aus zwei Komponenten: Der Beherrschung der jeweiligen Programmiersprache, und der Beherrschung seiner Werkzeuge. Da viele Tastenkombinationen aus Sublime Text 3 bei mir inzwischen ins Rückenmark übergegangen sind, würde eine Umstellung mich deutlich verlangsamen. Gott sei dank gibt es aber ein Plugin für VS Code, mit dem die Tastaturkürzel von Sublime Text 3 auch in VS Code funktionieren.
EditorConfig for VS Code
In jedem Editor, den ich benutze, verwende ich EditorConfig. Damit habe ich die jeweils projektspezifischen Einstellungen für Tabulatoren, Zeichensätze und Zeilenenden automatisch richtig, ohne mich selber um die Details kümmern zu müssen.
Prettier
Dieses Plugin formatiert so ziemlich jeden Quellcode nach den Ideen von Prettier um, und sorgt so auf Knopfdruck für Ordnung.
Spell Right
Da ich auch viele Texte in meinem Editor schreibe, ist eine anständige Rechtschreibkorrektur überlebenswichtig. Dieses Plugin benutzt einfach das im Betriebssystem verankerte Wörterbuch.
sftp
Erlaubt den direkten Zugriff auf entfernte Verzeichnisse. U.a. kann man Dateien hin- und herkopieren.
Sort Lines
Tut, was man erwartet – es sortiert Zeilen.
Git History
Eine grafische Übersicht über Commits im aktuellen Git-Repo.
PHP Doc
Eine vernünftige Inline-Dokumentation ist ein Muss. Mit diesem Plugin kann man durch Eintippen von /** automatisch für den dahinter liegenden Code-Abschnitt einen PhpDoc-Kommentar erzeugen lassen.
ESLint
Überprüft Javascript (z.B. für NodeJS) mit der Hilfe von ESLint und zeigt Fehler und Vorschläge direkt im Editor an.
Apache Conf
Ein Syntax-Highlighter für Apache-Konfigurationen ist in VS Code nicht direkt enthalten – aber als Plugin nachrüstbar.
Docker
Erweitert VS Code um einen Docker-Tab für laufende Docker-Container, und fügt Docker-Befehle hinzu.

Für viele verschiedene Programmieraufgaben stellt Microsoft Tutorials für VS Code bereit. Die Palette der im Standard unterstützten Sprachen von VS Code reicht dabei von HTML, CSS, JavaScript und PHP über Node.js hin zu C#, C/C++, ohne das diese Liste erschöpfend alle unterstützten Sprachen enthält.

In Kombination mit der Erweiterbarkeit und der Möglichkeit, Kommandozeilentools in VS Code einzubinden, steht dem geneigten Entwickler so ziemlich jede Sprache bequem zur Verfügung.

Übrigens sieht Visual Studio Live Share sehr spannend aus: Hier können mehrere Programmierer zusammen in Echtzeit ein und dieselbe Datei bearbeiten. Das habe ich persönlich zwar noch nicht ausprobiert, Youtube-Videos davon sehen aber sehr interessant aus:

Einstellungen

Meine persönlichen Einstellungen in der settings.json

{
  "editor.fontSize": 13,
  "editor.formatOnPaste": false,
  "editor.formatOnSave": false,
  "editor.largeFileOptimizations": false,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.renderWhitespace": "boundary",
  "editor.rulers": [80, 120],
  "editor.snippetSuggestions": "top",
  "editor.tabSize": 2,
  "editor.useTabStops": false,
  "editor.wordWrap": "on",
  "explorer.confirmDelete": false,
  "files.autoSave": "onFocusChange",
  "files.eol": "\n",
  "files.exclude": {
      ".idea": true,
      ".vscode": true
  },
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "git.path": "C:\\Program Files\\Git\\bin\\git.exe",
  "npm.enableScriptExplorer": true,
  "spellright.documentTypes": [
      "markdown",
      "latex",
      "plaintext"
  ],
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "workbench.colorTheme": "Monokai",
  "php.validate.executablePath": "C:\\xampp\\php\\php.exe",
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

…und der keybindings.json

[
  { "key": "ctrl+g",          "command": "editor.action.nextMatchFindAction" },
  { "key": "ctrl+7",          "command": "editor.action.commentLine", "when": "editorTextFocus && !editorReadonly" },
  { "key": "ctrl+shift+7",    "command": "editor.action.blockComment", "when": "editorFocus" },
  { "key": "ctrl+shift+d",    "command": "editor.action.copyLinesDownAction", "when": "editorFocus" },
  { "key": "ctrl+d",          "command": "editor.action.addSelectionToNextFindMatch", "when": "editorFocus" },
  { "key": "ctrl+h",          "command": "editor.action.startFindReplaceAction" },
  { "key": "ctrl+shift+up",   "command": "editor.action.moveLinesUpAction" },
  { "key": "ctrl+shift+down", "command": "editor.action.moveLinesDownAction" }
]

…sind direkte Übernahmen des Verhaltens, dass ich mir schon für Sublime Text 3 überlegt hatte. Viel mehr Konfiguration ist dann nicht mehr nötig.

Fallstrick: Git unter Windows

Bei meinen ersten Versuchen scheiterte ich daran, den in VS Code integrierten Git-Client zum Laufen zu bringen. Obwohl auf der Kommandozeile und auch in einem lokal installierten Source Tree alles ganz wunderbar lief, wehrte sich VS Code gegen git push und git pull mit dem Hinweis, dass der Git-Server meine Credentials nicht mochte. Die Lösung dafür war aber gar nicht so komplex:

Die Voraussetzungen für die Benutzung von Git direkt aus Microsofts Visual Studio Code ist die Installation von Git Credential Manager (bei neuerem Git wird dies automatisch mit dabei sein) und Plink von Putty, dass den SSH-Schlüssel für Git bereitstellt.

Außerdem sollte eine globale Systemvariable vorhanden sein, die auf plink.exe verweist. Das kann man mit der Windows Eingabeaufforderung erledigen:

set GIT_SSH="C:\Program Files\PuTTY\plink.exe"
setx GIT_SSH %GIT_SSH%
echo %GIT_SSH%

Sobald der SSH-Schlüssel in Pageant geladen ist, kann VS Code auch problemlos alle Git-Kommandos ausführen.

Fazit

Für meine heimische Arbeit ist Microsofts Visual Studio Code der würdige Nachfolger von Sublime Text 3. Er ist nicht nur kostenlos, sondern lässt mich (fast) so schnell wie mit Sublime Text 3 arbeiten, während er gleichzeitig viele Annehmlichkeiten einer echten IDE mitbringt.


Andere Artikel zum Thema · · · · ·

Zuletzt geändert am

fboës - Der Blog