Personalizar configuración del administrador de diseño

Personaliza tu experiencia de desarrollador con los ajustes del gestor de diseño. La configuración del administrador de diseño incluye el comportamiento predeterminado de inicio del administrador de diseño, la configuración de código para archivos codificados personalizados y el linting de JavaScript.

Personalizar configuración general

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En la parte inferior derecha, haz clic en Configuración, luego selecciona Abrir configuración.
3. Para abrir el buscador al acceder al administrador de diseño, activa el interruptor Abrir buscador al iniciar . 
4. Para actualizar automáticamente el generador de vista previa al cambiar entre archivos, activa el interruptor Actualizar vista previa al cambiar archivos en la sección Activado inicio .
5. Para activar las advertencias previas a la presentación, activa el interruptor Activar advertencias previas a la representación en la sección HubL Linting.

Personalizar configuración de código

Personaliza la configuración del código para controlar cómo se muestra y edita el código en el editor de código. Estos ajustes afectan a la legibilidad, la coherencia y a la forma en que el formato se comporta a medida que se escribe o actualiza el código.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En la parte inferior derecha, haz clic en Configuración, luego selecciona Abrir configuración.
3. Haz clic en el menú desplegable Configuración: General y selecciona Código.
4. Continúa personalizando las secciones Apariencia y Fuente .

Apariencia

• Tema: el esquema de colores utilizado por los editores de código.
• Fuente: la fuente primaria y el tamaño de fuente utilizados por el editor de código.

Fuente

• Tamaño de tabulación: la anchura de un carácter de tabulación al pulsar la tecla de tabulación en el editor de código.
• Unidad de sangría: el número de espacios que debe sangrar un bloque de código mediante sangría inteligente.
• Tabulaciones suaves: cuando está activada, la tecla de tabulación inserta caracteres de espacio iguales a Tamaño de tabulación en lugar de un carácter de tabulación.
• Sangría inteligente: cuando está activada, las líneas nuevas siguen la sangría establecida en la línea anterior.
• Sangría en la entrada de formato: cuando está activada, sangrar la misma línea en la entrada sensible al contexto. Por ejemplo, una case x: sentencia o un cierre } tendrán la sangría correcta cuando se inserten.
• Sangría con tabuladores: cuando está activada, la sangría automática causada por la sangría inteligente o la entrada de formato utiliza tabuladores.
• Ajuste de líneas: cuando está activado, las líneas se ajustan en lugar de requerir desplazamiento horizontal.
• Corchetes cerrar automáticamente: cuando se activa, el editor de códigos cierra automáticamente los corchetes y los caracteres de cita, como:
  () [] {} ’’ ””
• Cierre automático de etiquetas: cuando está activado, el editor de código cierra automáticamente las etiquetas XML.
• Hacer coincidir corchetes: cuando está activado, al colocar el cursor junto a un carácter de corchete se resalta el corchete de apertura o cierre correspondiente.
• Etiquetas de coincidencia: cuando se activa, al colocar el cursor junto a una etiqueta se resalta la etiqueta de apertura o cierre correspondiente.
• Continuar comentarios de bloque: cuando está activado, el editor de código continúa automáticamente los comentarios de bloque al crear nuevas líneas.

Configuración de linting de JavaScript

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En la parte inferior derecha, haz clic en Configuración, luego selecciona Abrir configuración.
3. Haz clic en el menú desplegable Configuración: General y selecciona JS Linter.
4. Haz clic para activar o desactivar el interruptor Activar ESLint. Cuando se activa, ESLint se ejecutará sobre JavaScript cuando vea la salida en archivos codificados.
5. En el panel izquierdo, establece tu configuración de SELint. Más información sobre la configuración de ESLint.
6. En el panel derecho, una demostración de JavaScript mostrará los cambios que realizas.
7. Haz clic en Restaurar eslintrc predeterminado para restaurar la configuración predeterminada.