Personalize as configurações do gerenciador de design

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

Personalizar configurações gerais

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No canto inferior direito, clique em Configurações, em seguida, selecione Abrir configurações.
3. Para abrir o localizador ao acessar o gerenciador de design, ative a opção Abrir localizador ao iniciar . 
4. Para atualizar automaticamente o visualizador ao alternar entre arquivos, ative a opção Atualizar o visualizador ao alternar arquivos na seção Na inicialização.
5. Para ativar os avisos de pré-renderização, ative a opção Ativar avisos de pré-renderização na seção Linting do HubL.

Personalizar configurações de código

Personalize as configurações de código para controlar como o código é exibido e editado no editor de código. Essas configurações afetam a legibilidade, a consistência e a maneira como a formatação se comporta à medida que o código é escrito ou atualizado.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No canto inferior direito, clique em Configurações, em seguida, selecione Abrir configurações.
3. Clique no menu suspenso Configurações: Geral e selecione Código.
4. Continue a personalizar as seções Aparência e Origem .

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 tabulação: a largura de um caractere de tabulação 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 por indentação inteligente.
• Soft tabs: quando ativada, a tecla tab insere 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 seguem o recuo definido da linha anterior.
• Recuar na entrada de formatação: quando ativado, recue a mesma linha na entrada sensível ao contexto. Por exemplo, uma case x: instrução ou um fechamento } será indentado corretamente quando inserido.
• Recuar com tabulações: quando ativado, o recuo automático causado pela indentação inteligente ou pela entrada de formatação usa tabulações.
• Quebra de linha: quando ativado, as linhas serão quebradas em vez de exigir rolagem horizontal.
• Fechar colchetes automaticamente: quando ativado, o editor de código fecha automaticamente colchetes e aspas, como:
  () [] {} ’’ ””
• Tags de fechamento automático: quando ativado, o editor de código fecha automaticamente as tags XML.
• Correspondência de colchetes: quando ativado, colocar o cursor próximo a um caractere de colchete realça o colchete de abertura ou fecha correspondente.
• Tags de correspondência: quando ativado, colocar o cursor próximo a uma tag destaca a tag de abertura ou fechamento correspondente.
• Continuar comentários do bloco: quando ativado, o editor de código continua automaticamente os comentários do bloco ao criar novas linhas.

Configurações de linting de JavaScript

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No canto inferior direito, clique em Configurações, em seguida, selecione Abrir configurações.
3. Clique no menu suspenso Configurações: Geral e selecione JS Linter.
4. Clique para ativar ou desativar a opção Ativar ESLint . Quando ativado, o ESLint será executado sobre JavaScript ao visualizar a saída em arquivos codificados.
5. No painel esquerdo, defina suas configurações de ESLint. Saiba mais sobre como configurar o ESLint.
6. No painel direito, uma demonstração do JavaScript mostrará as alterações feitas à esquerda.
7. Clique em Restaurar eslintrc padrão para restaurar a configuração padrão.