Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
Design Manager

Personalizar configuración del administrador de diseño

Última actualización: octubre 29, 2019

Requisitos

Marketing Hub  Professional, Enterprise
Básico
HubSpot CMS

El administrador de diseño tiene una matriz de configuración para que puedas personalizar tu experiencia de desarrollador. Estos valores de configuración incluyen el comportamiento de startups con administrador de diseño predeterminado, configuración de códigos para archivos codificados personalizados y linting de JavaScript.

Para acceder a estas configuraciones:

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En la parte inferior derecha, haz clic en Configuración y luego selecciona Configuración abierta.

design-manager-settings

  • Haz clic en el menú desplegable Configuración para seleccionar el tipo de configuración que deseas ajustar.

    design-manager-settings-dropdown

Configuración general

  • Abrir buscador al iniciar: cuando se abre el Administrador de diseño, el buscador de la izquierda siempre se abrirá.
  • Actualizar generador de vista preliminar al cambiar archivos: cuando la vista preliminar esté abierta, el generador de vista preliminar mostrará el archivo seleccionado actualmente. Activa esta configuración si deseas obtener una vista preliminar de un archivo a la vez.


Configuración de código

Apariencia

  • Tema: el esquema de colores utilizado por editores de códigos.
  • Fuente: la fuente principal y el tamaño de fuente utilizado por el editor de códigos.

Fuente

  • Tamaño de la pestaña: el ancho de un carácter de tabulación al presionar la tecla de tabulación en el editor de códigos.
  • Unidad de sangría: el número de espacios que debe tener la sangría de un bloque de códigos con sangría inteligente.
  • Pestañas suaves: al presionar la tecla de tabulación, inserta caracteres de espacio igual al tamaño de la pestaña en lugar de un carácter de tabulación.
  • Sangría inteligente: cuando esté activado, las nuevas líneas seguirán la sangría establecida desde la línea anterior.
  • Sangría al dar formato a los datos: sangría en la misma línea de los datos dependientes del contexto. Por ejemplo, una declarción de caso x: o un } de cierre tendrá la sangría correcta cuando se inserte.
  • Sangría con tabulaciones: usa tabulaciones en la sangría automática causada por la sangría inteligente o los datos de formato.
  • Ajuste de línea: ajustar líneas en lugar de desplazarse horizontalmente
  • Cerrar corchetes automáticamente: se cierran automáticamente caracteres de corchetes y comillas, tales como:

    ( [] {}’’ ””
  • Etiqueta de cierre automática: cerrar etiquetas XML automáticamente.
  • Igualar corchetes: cuando el cursor está junto a un carácter de corchete, resalta el corchete de apertura o cierre correspondiente.
  • Igualar etiquetas: cuando el cursor está junto a una etiqueta, resalta la etiqueta de apertura o cierre correspondiente.
  • Continuar comentarios de bloque: continuar automáticamente los comentarios de bloque al crear una nueva línea.


Configuración de linting de JavaScript

  • Haz clic en Activar ESLint para activar o desactivar. Activar ESLint ejecutará ESLint en JavaScript al ver resultados en archivos codificados.

    design-manager-coded-file-show-output
  • En el panel izquierdo, establece tu configuración de SELint. Más información sobre cómo configurar ESLint.
  • En el panel derecho, una demostración de JavaScript refleja los cambios que haces en la izquierda.
  • Haz clic en Restaurar valores predeterminados de eslintrc para restaurar la configuración predeterminada.

    js-linter-settings