Design-Manager-Einstellungen anpassen

Mit den Einstellungen des Design-Managers können Sie Ihre Entwicklererfahrung anpassen. Die Einstellungen des Design-Managers umfassen das Standard-Startverhalten des Design-Managers, Code-Einstellungen für benutzerdefinierte codierte Dateien und JavaScript-Linting.

Allgemeine Einstellungen anpassen

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie unten rechts auf Einstellungen und wählen Sie dann Einstellungen öffnen.
3. Um den Finder zu öffnen, während Sie auf den Design-Manager zugreifen, aktivieren Sie den Schalter Finder beim Start öffnen . 
4. Um die Vorschau beim Wechseln zwischen Dateien automatisch zu aktualisieren, aktivieren Sie den Schalter Vorschau beim Wechseln von Dateien im Abschnitt Beim Start .
5. Um Pre-Rendering-Warnungen zu aktivieren, aktivieren Sie den Schalter Pre-Rendering-Warnungen aktivieren im HubL-Linting-Abschnitt .

Code-Einstellungen anpassen

Passen Sie die Code-Einstellungen an, um zu steuern, wie Code im Code-Editor angezeigt und bearbeitet wird. Diese Einstellungen wirken sich auf die Lesbarkeit, Konsistenz und das Verhalten der Formatierung aus, wenn Code geschrieben oder aktualisiert wird.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie unten rechts auf Einstellungen und wählen Sie dann Einstellungen öffnen.
3. Klicken Sie auf das Dropdown-Menü Einstellungen: Allgemein und wählen Sie Code aus.
4. Fahren Sie mit dem Anpassen der Abschnitte "Erscheinungsbild " und "Quelle " fort.

Erscheinungsbild

• Design: das von den Code-Editoren verwendete Farbschema.
• Schriftart: die vom Code-Editor verwendete Hauptschriftart und Schriftgröße.

Quelle

• Tabulatorgröße: die Breite eines Tabulatorzeichens beim Drücken der Tabulator-Taste im Code-Editor.
• Einrückungseinheit: die Anzahl der Leerzeichen, um die ein Codeblock mit smart indent eingerückt werden soll.
• Weiche Tabulatoren: wenn eingeschaltet, fügt die Tabulatortaste anstelle eines Tabulatorzeichens ein Leerzeichen ein, das Tabulatorgröße entspricht.
• Intelligenter Einzug: Wenn diese Option aktiviert ist, folgen neue Zeilen dem Einzug der vorherigen Zeile.
• Einrücken bei Formatierungseingabe: wenn eingeschaltet, wird dieselbe Zeile bei kontextabhängiger Eingabe eingerückt. Beispielsweise wird eine case x: Anweisung oder ein Schluss } beim Einfügen korrekt eingerückt.
• Einrücken mit Tabulatoren: wenn eingeschaltet, verwendet die automatische Einrückung durch intelligente Einrückung oder Formatierungseingabe Tabulatoren.
• Zeilenumbruch: Wenn diese Option aktiviert ist, werden die Zeilen umbrochen, anstatt einen horizontalen Bildlauf zu erfordern.
• Klammern automatisch schließen: Wenn diese Option aktiviert ist, schließt der Code-Editor automatisch Klammern und Anführungszeichen, z. B.:
  () [] {} ’’ ””
• Automatisches Schließen von Tags: Wenn diese Option aktiviert ist, schließt der Code-Editor XML-Tags automatisch.
• Klammern abgleichen: Wenn diese Option aktiviert ist, wird beim Platzieren des Cursors neben einem Klammerzeichen die entsprechende öffnende oder schließende Klammer hervorgehoben.
• Tags abgleichen: Wenn diese Option aktiviert ist, wird durch Platzieren des Cursors neben einem Tag das entsprechende öffnende oder schließende Tag hervorgehoben.
• Blockkommentare fortsetzen: Wenn diese Option aktiviert ist, setzt der Code-Editor Blockkommentare automatisch fort, wenn neue Zeilen erstellt werden.

JavaScript-Linting-Einstellungen

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie unten rechts auf Einstellungen und wählen Sie dann Einstellungen öffnen.
3. Klicken Sie auf das Dropdown-Menü Einstellungen: Allgemein und wählen Sie JS Linter aus.
4. Klicken Sie hier, um den Schalter Enable ESLint ein- oder auszuschalten. Wenn diese Option aktiviert ist, wird ESLint über JavaScript ausgeführt, wenn die Ausgabe in Code-Dateien angezeigt wird.
5. Konfigurieren Sie im linken Bereich Ihre ESLint-Einstellungen. Erfahren Sie mehr über die Konfiguration von ESLint.
6. Im rechten Bereich zeigt eine JavaScript-Demo die Änderungen, die Sie auf der linken Seite vornehmen.
7. Klicken Sie auf Restore default eslintrc , um die Standardkonfiguration wiederherzustellen.