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.
CMS-General

Personalizar configurações do gerenciador de design

Ultima atualização: Outubro 31, 2019

Disponível para

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

O gerenciador de design tem uma variedade de configurações para que você possa personalizar sua experiência de desenvolvedor. Essas configurações incluem o comportamento padrão de inicialização do gerenciador de design, as configurações de código para arquivos codificados personalizados e o linting para 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 Configurações e selecione Abrir configuraçõ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

  • Abrir localizador ao iniciar: quando o gerenciador de design for aberto pela primeira vez, o localizador à esquerda sempre abrirá.
  • Atualizar o visualizador ao alternar arquivos: quando o visualizador estiver aberto, ele mostrará o arquivo atualmente selecionado. Ative essa configuração se quiser visualizar um arquivo por vez.


Configurações do código

Aparência

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

Fonte:

  • Tamanho da tabulação: a largura de um caractere de tabulação ao pressionar a tecla Tab no editor de código.
  • Recuar unidade: o número de espaços que um bloco de código deve ser recuado pelo recuo inteligente.
  • Soft tabs: ao pressionar a tecla Tab, insira caracteres de espaço iguais ao tamanho da tabulação, em vez de um caractere de tabulação.
  • Recuo inteligente: quando ativado, as novas linhas seguirão o recuo definido da linha anterior.
  • Recuar na entrada de formatação: recue a mesma linha na entrada sensível ao contexto. Por exemplo, uma instrução case x: ou uma } de fechamento será recuada corretamente ao ser inserida.
  • Recuar com tabulações: use tabulações com recuo automático por meio do recuo inteligente ou da entrada de formatação.
  • Quebra de linha: quebre linhas em vez de rolar horizontalmente.
  • Fechar automaticamente colchetes: feche automaticamente os caracteres entre colchetes e aspas, como:

    () [] {} ’’ ””
  • Fechar automaticamente tags: feche automaticamente as tags XML.
  • Corresponder colchetes: quando o cursor estiver ao lado de um caractere de colchete, destaque o colchete de abertura ou fechamento correspondente.
  • Corresponder tags: quando o cursor estiver ao lado de uma tag, destaque a tag de abertura ou fechamento correspondente.
  • Continuar a bloquear os comentários: continue a bloquear os comentários automaticamente ao criar uma nova linha.


Configurações de linting para JavaScript

  • Clique para ativar ou desativar a opção Ativar ESLint. A ativação da ESLint executará a ESLint para JavaScript ao exibir a saída em arquivos codificados.

    design-manager-coded-file-show-output
  • No painel esquerdo, defina as configurações de ESLint. Saiba mais sobre como configurar a ESLint.
  • No painel direito, uma demonstração de JavaScript refletirá as alterações feitas à esquerda.
  • Clique em Restaurar padrão eslintrc para restaurar a configuração padrão.

    js-linter-settings