Anpassa inställningarna för designhanteraren

Anpassa din utvecklarupplevelse med inställningarna för designhanteraren. Inställningarna för designhanteraren omfattar standardbeteende för start av designhanteraren, kodinställningar för specialkodade filer och JavaScript-linting.

Anpassa allmänna inställningar

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på Inställningar längst ned till höger och välj sedan Öppna inställningar.
3. Om du vill öppna sökaren när du öppnar designhanteraren aktiverar du alternativet Öppna sökaren vid start.
4. Om du vill uppdatera förhandsgranskaren automatiskt när du växlar mellan filer aktiverar du Uppdatera förhandsgranskaren när du växlar mellan filer i avsnittet Vid start.
5. För att aktivera varningar före rendering, slå på knappen Enable Pre-Rendering Warnings i avsnittet HubL Linting .

Anpassa kodinställningar

Anpassa kodinställningar för att styra hur kod visas och redigeras i kodredigeraren. Dessa inställningar påverkar läsbarheten, konsekvensen och hur formateringen beter sig när koden skrivs eller uppdateras.

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på Inställningar längst ned till höger och välj sedan Öppna inställningar.
3. Klicka på rullgardinsmenyn Inställningar: Allmänt och välj Kod.
4. Fortsätt att anpassa avsnitten Utseende och Källa.

Utseende

• Tema: det färgschema som används av kodredigerare.
• Font: det primära teckensnittet och teckenstorleken som används av kodredigeraren.

Källa

• Tabbstorlek: bredden på ett tabbtecken när du trycker på tabbtangenten i kodredigeraren.
• Indragsenhet: antalet mellanslag som ett kodblock ska vara indraget med smart indrag.
• Mjuka tab bar: när tabbtangenten är aktiverad infogar den mellanslagstecken som motsvarar tabbstorleken i stället för tabbtecken.
• Smart indrag: när den är aktiverad följer nya rader det indrag som angetts för föregående rad.
• Indrag vid formateringsinmatning: när den är aktiverad, dras samma rad in vid kontextuellt känslig inmatning. Till exempel kommer en case x: -sats eller en avslutande } att vara korrekt indragen när den infogas.
• Indrag med flikar: när den är aktiverad används flikar vid automatiskt indrag som orsakas av smart indrag eller formateringsinmatning.
• Radombrytning: när den är aktiverad kommer raderna att brytas istället för att kräva horisontell rullning.
• Stäng par enteser automatiskt: när det är aktiverat stänger kodredigeraren automatiskt parenteser och citattecken, t.ex:
  () [] {} ’’ ””
• Stäng taggar automatiskt: när detta är aktiverat stänger kodredigeraren automatiskt XML-taggar.
• Matchaparenteser: När markören placeras bredvid ett parentestecken markeras motsvarande öppnande eller stängande parentes när funktionen är aktiverad.
• Matcha tag gar: När markören placeras bredvid en tagg markeras motsvarande öppnande eller stängande tagg när funktionen är aktiverad.
• Fortsätt blockkommentarer: när den är aktiverad fortsätter kodredigeraren automatiskt blockkommentarer när nya rader skapas.

Inställningar för linting av JavaScript

1. I ditt HubSpot-konto navigerar du till Innehåll > Design Manager.
2. Klicka på Inställningar längst ned till höger och välj sedan Öppna inställningar.
3. Klicka på rullgardinsmenyn Inställningar: Allmänt och välj JS Linter.
4. Klicka för att aktivera eller inaktivera knappen Aktivera ESLint. När den är aktiverad kommer ESLint att köra över JavaScript när du visar utdata i kodade filer.
5. I den vänstra panelen konfigurerar du dina ESLint-inställningar. Läs mer om hur du konfigurerar ESLint.
6. I den högra panelen visas en JavaScript-demo med de ändringar du gör till vänster.
7. Klicka på Restore default eslintrc för att återställa standardkonfigurationen.