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: Agosto 4, 2021

Disponível para

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

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

Para aceder a estas definições:

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

design-manager-settings

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

    design-manager-settings-dropdown

Configurações gerais

  • Abrir o localizador no início: quando alternado, o localizador à esquerda estará aberto quando o gerente de design for acessado pela primeira vez.
  • Pré-visualizador de atualização ao alternar arquivos: quando alternado, o pré-visualizador do gerenciador de design mostrará o arquivo atualmente selecionado. Ative esta configuração se você quiser visualizar um arquivo de cada vez.


Configurações de código

Aparência

  • Tema: o esquema de cores utilizado pelos editores de código.
  • Fonte: a fonte primária e o tamanho da fonte utilizada pelo editor de código.

Fonte:

  • Tamanho da aba: a largura de um caractere de aba ao pressionar a tecla de aba no editor de código.
  • Unidade de recuo: o número de espaços que um bloco de código deve ser recuado por travessão inteligente.
  • Soft tabs: quando ativada, a tecla Tab insere caracteres de espaço iguais ao tamanho da Tab ao invés de um caractere de tabulação.
  • Traço inteligente: quando alternado, novas linhas seguem o conjunto de traços da linha anterior.
  • Indentar na entrada de formatação: quando alternado, indentar a mesma linha na entrada contextualmente sensível. Por exemplo, um caso x: declaração, ou um fechamento } será corretamente recuado quando inserido.
  • Indentação com abas: quando alternado, a indentação automática causada por indentação inteligente ou formatação de entrada usa abas.
  • Envolvimento das linhas: quando alternadas, as linhas serão embrulhadas em vez de requererem uma rolagem horizontal.
  • Fecho automático de parênteses: quando ligado, o editor de código fecha automaticamente os caracteres de parênteses e aspas, tais como:

    () [] {} '' "" ""
  • Fechamento automático de tags: quando ligado, o editor de código fecha automaticamente as tags XML.
  • Parênteses de correspondência: quando alternado, colocando o cursor ao lado de um caractere de parêntese destaca o parêntese de abertura ou fechamento correspondente.
  • Match tags: quando alternado, colocar o cursor ao lado de uma tag destaca a tag correspondente de abertura ou fechamento.
  • Continuar comentários de bloco: quando alternado, o editor de código continua automaticamente a bloquear comentários ao criar novas linhas.


JavaScript linting settings

  • Clique para ativar ou desativar o botão  Habilitar ESLint. Quando alternado, o ESLint correrá sobre JavaScript quando estiver a visualizar a saída em ficheiros codificados

    design-manager-coded-file-show-output
  • No painel esquerdo, configure as suas definições ESLint. Saiba mais sobre a configuração do ESLint.
  • No painel direito, uma demonstração em JavaScript irá refletir as alterações que você fizer à esquerda.
  • Clique em Restore default eslintrc para restaurar a configuração padrão

    js-linter-settings