Personalizar configurações do gerenciador de design

Personalizar sua experiência de desenvolvedor com configurações do gerenciador de design. As configurações incluem o comportamento de inicialização do gerenciador de design padrão, configurações de código para arquivos codificados personalizados e fiapos de JavaScript.

Para acessar essas configurações:

• Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
• No canto inferior direito, clique em Definições e, em seguida, selecione Abrir definições.

• Clique no menu suspenso Configurações para selecionar o tipo de configurações que deseja ajustar.
  
  

Configurações gerais

• Localizador aberto no início: quando ativado, o localizador à esquerda será aberto quando o gerenciador de design for acessado pela primeira vez.
• Actualizar o pré-visualizador ao mudar de ficheiros: quando activado, o pré-visualizador do gestor de design irá mostrar o ficheiro seleccionado de momento. Ative esta configuração se quiser visualizar um arquivo por vez.

Definições
do código

Aparência

• Tema: o esquema de cores usado pelos editores de código.
• Fonte: a fonte principal e o tamanho da fonte usados pelo editor de código.

Fonte

• Tamanho da guia: a largura de um caractere de guia ao pressionar a tecla Tab no editor de código.
• Unidade de recuo: o número de espaços que um bloco de código deve ser recuado pelo recuo inteligente.
• Guias suaves: quando ativada, a tecla Tab insere caracteres de espaço iguais ao tamanho da guia em vez de um caractere de guia.
• Recuo inteligente: quando ativado, novas linhas seguem o recuo definido na linha anterior.
• Recuo na entrada de formatação: quando ativado, recue a mesma linha na entrada sensível ao contexto. Por exemplo, uma instrução case x: ou um closing} será recuada corretamente quando inserida.
• Recuo com abas: quando ativado, o recuo automático causado por recuo inteligente ou entrada de formatação usa abas.
• Empacotamento de linhas: quando ativado, as linhas serão empacotadas em vez de exigir rolagem horizontal.
• Fechar automaticamente os parênteses: quando ativado, o editor de código fecha automaticamente os caracteres de parênteses e aspas, como:
  
  () [] {} ’’ ””
• Tags de fechamento automático: quando ativado, o editor de código fecha automaticamente as tags XML.
• Colchetes correspondentes: quando ativado, a colocação do cursor ao lado de um caractere de colchete destaca o colchete de abertura ou fechamento correspondente.
• Etiquetas de correspondência: quando ativado, posicionar o cursor ao lado de uma etiqueta destaca a etiqueta de abertura ou fechamento correspondente.
• Continuar comentários de bloco: quando ativado, o editor de código continua automaticamente bloqueando comentários ao criar novas linhas.

Definições de fiapos
JavaScript

• Clique para alternar o botão  Ativar ESLint para ligar ou desligar. Quando ativado, o ESLint executará o JavaScript ao visualizar a saída em arquivos codificados.
  
  
• No painel esquerdo, configure suas configurações do ESLint. Saiba mais sobre como configurar o ESLint.
• No painel direito, uma demonstração de JavaScript refletirá as alterações feitas à esquerda.
• Clique em Restaurar eslintrc padrão para restaurar a configuração padrão.