Personalizzare le impostazioni del design manager

Personalizzate la vostra esperienza di sviluppatori con le impostazioni del design manager. Le impostazioni del design manager comprendono il comportamento predefinito all'avvio del design manager, le impostazioni del codice per i file personalizzati e il linting di JavaScript.

Personalizzare le impostazioni generali

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. In basso a destra, fare clic su Impostazioni, quindi selezionare Apri impostazioni.
3. Per aprire il finder quando si accede al design manager, attivare l'interruttore Apri finder all'avvio.
4. Per aggiornare automaticamente l'anteprima quando si passa da un file all'altro, attivare l'opzione Aggiorna anteprima quando si passa da un file all'altro nella sezione All'avvio.
5. Per attivare gli avvisi di pre-rendering, attivare l'interruttore Abilita avvisi di pre-rendering nella sezione HubL Linting .

Personalizzare le impostazioni del codice

Personalizzare le impostazioni del codice per controllare il modo in cui il codice viene visualizzato e modificato nell'editor di codice. Queste impostazioni influenzano la leggibilità, la coerenza e il modo in cui la formattazione si comporta quando il codice viene scritto o aggiornato.

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. In basso a destra, fare clic su Impostazioni, quindi selezionare Apri impostazioni.
3. Fare clic sul menu a discesa Impostazioni: Generale e selezionare Codice.
4. Continuare a personalizzare le sezioni Aspetto e Sorgente.

Aspetto

• Tema: la combinazione di colori utilizzata dall'editor di codice.
• Carattere: il carattere principale e la dimensione del carattere utilizzati dall'editor di codice.

Fonte

• Dimensione tabulazione: la larghezza di un carattere di tabulazione quando si preme il tasto tabulazione nell'editor di codice.
• Unità di rientro: il numero di spazi in cui un blocco di codice deve essere rientrato con il rientro intelligente.
• Tabulazione morbida: se attivata, il tasto tabulazione inserisce caratteri di spazio pari alla dimensione della tabulazione invece di un carattere di tabulazione.
• Rientro intelligente: quando è attivato, le nuove righe seguono il rientro impostato dalla riga precedente.
• Rientro su input di formattazione: se attivata, la stessa riga viene rientrata su input sensibili al contesto. Ad esempio, un'istruzione case x: o una chiusura } saranno rientrate correttamente quando vengono inserite.
• Rientro con tabulazioni: se attivata, l'indentazione automatica causata dall'indentazione intelligente o dall'input di formattazione utilizza le tabulazioni.
• Avvolgimento delle righe: se attivata, le righe vengono avvolte invece di richiedere lo scorrimento orizzontale.
• Chiusura automatica delle parentesi: se attivata, l'editor di codice chiude automaticamente le parentesi e i caratteri di citazione, come ad esempio:
  () [] {} ’’ ””
• Chiudi automaticamente i tag: se attivata, l'editor di codice chiude automaticamente i tag XML.
• Abbina parentesi: se attivata, il posizionamento del cursore accanto a un carattere di parentesi evidenzia la parentesi di apertura o di chiusura corrispondente.
• Corrispondenza dei tag: quando è attivata, il posizionamento del cursore accanto a un tag evidenzia il tag di apertura o di chiusura corrispondente.
• Continua commenti di blocco: se attivata, l'editor di codice continua automaticamente i commenti di blocco quando si creano nuove righe.

Impostazioni del linting di JavaScript

1. Nel tuo account HubSpot, passa a Contenuti > Design Manager.
2. In basso a destra, fare clic su Impostazioni, quindi selezionare Apri impostazioni.
3. Fare clic sul menu a discesa Impostazioni: Generale e selezionare JS Linter.
4. Fare clic per attivare o disattivare l'interruttore Abilita ESLint. Quando è attivato, ESLint viene eseguito su JavaScript quando si visualizza l'output nei file codificati.
5. Nel pannello di sinistra, configurare le impostazioni di ESLint. Per saperne di più sulla configurazione di ESLint.
6. Nel pannello di destra, una demo JavaScript mostrerà le modifiche apportate a sinistra.
7. Fare clic su Ripristina eslintrc predefinito per ripristinare la configurazione predefinita.