Ir para o conteúdo principal
Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.
Design Manager

Personalizar configurações do gerenciador de design

Ultima atualização: Junho 15, 2022

Disponível para

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Marketing Hub Basic (versão anterior)

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.

design-manager-settings

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

    design-manager-settings-dropdown

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.

    design-manager-coded-file-show-output
  • 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.

    js-linter-settings
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.