Arbeiten mit Github Copilot

Wie eine KI Ihre Codierungsgeschwindigkeit drastisch verbessern kann

Befestigen Sie Ihre Sicherheitsgurte

Ich habe vor kurzem die Genehmigung erhalten, Github Copilot mit meinem privaten Github-Account zu verwenden und kann das Tool seitdem während meiner täglichen Programmierung verwenden. In diesem Artikel möchte ich meine ersten Erfahrungen mit diesem mächtigen Code-Assistenten teilen.

Was Github Copilot macht – und was nicht

Github Copilot ist außergewöhnlich gut darin, den Kontext zu verstehen, in dem Sie gerade arbeiten, und kann daher sehr präzise Vorschläge zur Codevervollständigung machen. Dies bedeutet auch, dass Entwickler immer weniger auf vordefinierte Code-Schnipsel angewiesen sind, um beispielsweise schnell eine asynchrone Funktion oder React.js-Komponente zu erstellen.

Github Copilot kann das von Ihnen verwendete Muster erkennen, beispielsweise durch die Analyse eines Arrays von Datenpunkten oder einer Schnittstelle, und kann diese Informationen korrekt verwenden, wenn es auf diese Daten in einem Funktionsaufruf zugreift, um ein einfaches Beispiel zu geben.

Das Tool codiert nicht alles für Sie. Es versteht den aktuellen Kontext und Ihre Absichten und ist in der Lage, basierend auf diesen Informationen sehr genaue Codevorschläge zu unterbreiten.

Reale Verwendungen in meinen Hobbyprojekten

Okay, genug der Hintergrundinformationen! Wenn Sie mehr über die Implementierung von Github Copilot erfahren möchten, lesen Sie bitte die Links im Anhang am Ende der Seite.

Der Rest dieses Artikels zeigt meine realen Erfahrungen mit Github Copilot. Insgesamt kann ich feststellen, dass es die leistungsstärkste Codierungshilfe ist, die ich je gesehen habe. Wenn man bedenkt, dass dies nur die allererste Version ist, ist es umso beeindruckender, wie Github Copilot meine Absichten versteht und die richtigen Vorschläge machen kann.

Javascript

Beginnen wir mit einigen einfachen JavaScript-Codevervollständigungen. Die Vorschläge leiten den Kontext richtig ab und verstehen meine Absicht, eine neue Route zu schreiben oder

Image 3a745b6b4325

Image 1b10f916ba56

Image fce20a54bd33

React.js und Hooks

Die folgenden Screenshots zeigen meine ersten Begegnungen mit Vorschlägen für die Hooks von React, alle sind beeindruckend genau. Der erste Screenshot zeigt einen Tab-Handler, der noch nicht in der Komponente implementiert wurde (der Tab-Container selbst wurde implementiert).

Der andere Screenshot wurde in der Artikel-Komponente aufgenommen, und wie Sie richtig sehen können, möchte ich auch die zugehörigen Übersetzungen in diesen Teil des Codes laden.

Image 2349c4814bb3

Image b0b4e779d117

Die nächsten Beispiele zeigen, wie Github Copilot bei der Entwicklung von React.js-Komponenten andere Teile korrekt ableitet.

Image ee9960a38080

Image 8a25c744f100

Image 811cfdc2ad44

Image afa67dbd0151

Vorschläge für Reduzierer

Die wahrscheinlich beeindruckendste Erfahrung, die ich gemacht habe, war, als das Tool im Grunde einen vollständigen Reduzierer zur Verwendung mit useReducer bereitstellte.

Image 60c212ca3a8e

JSON-Dateien für Übersetzungen

Auch die folgenden Vorschläge sind wirklich beeindruckend, da sie keine Codevervollständigung, sondern korrekte Übersetzungen bieten. Alle Übersetzungen sind unter jedem Gebietsschema aufgeführt, und für die deutschen Dateien hat Github Copilot deutsche Übersetzungen für die englischen Schlüssel bereitgestellt. Gedankenbeugendes Zeug!

Image 527d8f89f516

Image 2862682d35a2

Image e733d5a797ca

CSS-Vervollständigungen

Sehr gut sind auch Vorschläge für Tailwind.css-Styles. Die bereitgestellten Codevervollständigungen sind genau richtig und werden aus dem Kontext korrekt abgeleitet.

Image 4835f6a1a839

Image 10bd8559f56a

Image 9d593d7bd6c9

Image fbfcc0b75a5c

Next.js

Über React.js hinaus versteht Github Copilot auch den Kontext eines Next.js-Projekts und kann relevante Vorschläge machen, beispielsweise beim Schreiben des serverseitigen Codes für Strategien zur statischen Site-Generierung.

Image db94b45feb59

Image 202c014c2cad