Beschleunigung der Entwicklung in VSCode / Sudo Null IT News

Hey Habr! Dies ist mein erster Beitrag und ich möchte mit etwas Nützlichem für die Community beginnen. Auf Anhieb … Ich habe eine Erweiterung für VSCode geschrieben, die dabei hilft, die Erstellung der Komponentendateistruktur zu automatisieren.

Für diejenigen, die sich im Videoformat wohler fühlen, hier Verknüpfung zum Screencast. Ich sage plus oder minus dasselbe, aber spannend und peinlich.

Vscode-KomponentenerstellerVscode-Komponentenersteller

Hintergrund

Aber zuerst lernen wir uns kennen, Mein Name ist Dima. Ich arbeite als Full-Stack-Entwickler in einem Handelsunternehmen. Ich führe Dienste auf nestjs und die Front auf nextjs aus. Ein wenig devopsyu und sehr vorsichtig in die Python stecken.

Kürzlich stieß ich auf das Problem, dass ich es leid war, Ordner und Unterordner mit der gleichen Struktur zu erstellen. Zum Beispiel die einfachste React-Komponente:

∟Komponentenname ∟Komponentenname.tsx ∟Komponentenname.props.ts ∟Komponentenname.module.css ∟index.ts

Es reicht nicht aus, Dateien zu erstellen, Sie müssen noch die Props-Schnittstelle registrieren, sie in die tsx-Komponente importieren, Standardexporte registrieren, Stile importieren und vieles mehr. Müde…

Im Allgemeinen ist Faulheit der Motor des Fortschritts, also beschloss ich, mich auf dem Markt umzusehen und etwas zu finden, das all dies für mich erledigt. Ich konnte nichts Passendes finden (vielleicht habe ich auch nur schlecht gesucht), irgendetwas hat mir die ganze Zeit nicht gepasst. Entweder war die Verlängerung streng an den Motor gebunden, oder die Struktur war unverändert, oder die Arbeit war allgemein unverständlich. Da ich kein bequemes Fahrrad für mich fand, entschied ich mich, mein eigenes zu schweißen.

Eigentlich TA DAH!!! (wir spielen die Klänge der Fanfare im Kopf :)). für meinen ersten Versuch mit Open Source.

Knapp

F: Warum?

A: Aus Faulheit!

F: Was macht es?

A: Erstellt eine Dateistruktur mit den erforderlichen Inhalten.

F: Was ist besser als andere?

A: Hier beugen wir schon die Finger. Nicht an die Sprache und den Rahmen gebunden. Sie können Ihre eigenen Vorlagen erstellen. Es kann beliebig viele Vorlagen geben. Jedes Projekt hat seine eigene Vorlage. Kann sowohl flache als auch tiefe Strukturen erzeugen. Er weiß auch, wie man in verschiedenen Stilen schreibt (Kamelkiste, Pascalkiste, Dönerkiste usw.).

Erstes Muster

Wenn Sie bis hierher gelesen haben, möchten Sie es wahrscheinlich ausprobieren. Lassen Sie uns gemeinsam die Erweiterungsmöglichkeiten durchgehen.

Zunächst müssen Sie nach der Installation der Erweiterung eine der vorgeschlagenen Vorlagen herunterladen oder Ihre eigene erstellen. Um die Vorlage herunterzuladen, drücken Sie Strg/Cmd + Umschalt + P und geben Sie im Popup-Menü Folgendes ein: Komponentenersteller: Vorlage herunterladen (es gibt noch nicht viele Vorlagen, wir werden sie nach und nach ergänzen).

Aber das ist nicht unser Weg. Wir werden unsere eigene Vorlage für React-Komponenten erstellen!

Zunächst müssen Sie ein .vscode/cch-template-Verzeichnis im Stammverzeichnis des Projekts erstellen. Dies ist das Standardverzeichnis, aus dem Vorlagen entnommen werden. Darin erstellen wir ein Verzeichnis namens React FC, das ist der Name unserer Vorlage. Versuchen wir im Beispiel, die ganz am Anfang des Beitrags beschriebene Struktur nachzubilden.

Erstellen Sie im React FC-Ordner einen weiteren namens {{pascalCase}} (der den Namen der Komponente im Pascal-Case-Format ersetzt). Erstellen Sie als Nächstes in diesem Ordner eine Dateistruktur, die wie folgt aussieht:

SchabloneSchablone

Befüllen der Dateien:

/* {{pascalCase}}.module.css */ .wrapper { }/* {{pascalCase}}.props.ts */ import {DetailedHTMLProps, HTMLAttributes } from ‘react’; export interface {{pascalCase}}Props erweitert DetailedHTMLProps, HTMLDivElement> {}/* {{pascalCase}}.tsx */ import React, { FC } from ‘react’; import { {{pascalCase}}Requisiten } aus ‘.’; Importiere Stile aus ‘./{{pascalCase}}.module.css’ export const {{pascalCase}}: FC<{{pascalCase}}Props> = (props) => { return (

); };/* index.ts */ export * from ‘./{{pascalCase}}’; exportiere * aus ‘./{{pascalCase}}.props’;

OK, jetzt ist alles vorbei. Die Vorlage ist fertig!

  1. Wählen Sie das gewünschte Verzeichnis aus, klicken Sie mit der rechten Maustaste darauf;

  2. Wählen Sie im Kontextmenü den Punkt „Neue Komponente“;

  3. Geben Sie den Namen der Komponente getrennt durch ein Leerzeichen ein;

  4. Genieße deine eigene Überlegenheit 🙂

ErgebnisErgebnis

Wie Sie bereits verstanden haben, werden Konstruktionen wie {{pascalCase}} {{camelCase}} usw. benötigt, um den konvertierten Komponentennamen in den Dateinamen oder die Struktur einzufügen. Weitere Informationen zu allen Formatierungsstilen finden Sie in der Beschreibung der Erweiterung selbst.

Wenn Sie also mehrere dieser Vorlagen selbst erstellen, können Sie die Entwicklung sowohl auf der Vorder- als auch auf der Rückseite standardisieren und erheblich beschleunigen. Außerdem gibt es, wie Sie bereits bemerkt haben, keine Bindung an Sprachen und Frameworks. Auf die gleiche Weise können Sie Strukturen für Python, Angular, Vue usw. erstellen.

Wenn Sie Ideen haben, wie Sie eine Komponente ändern oder überarbeiten können, bespreche ich sie jederzeit gerne in den Kommentaren. Wie ich bereits geschrieben habe, ist dies mein erstes Open-Source-Projekt, daher bin ich für Ihre Sterne dankbar und jedes Feedback ist willkommen! 🙂

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *