Customize design manager settings

Customize your developer experience with design manager settings. The design manager settings include default design manager startup behavior, code settings for custom-coded files, and JavaScript linting.

Customize general settings

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the bottom right, click Settings, then select Open settings.
3. To open the finder when accessing the design manager, toggle the Open finder on start switch on. 
4. To automatically update the previewer when switching between files, toggle the Update previewer when switching files switch on in the On startup section.
5. To turn on pre-rendering warnings, toggle the Enable Pre-Rendering Warnings switch on in the HubL Linting section.

Customize code settings

Customize code settings to control how code is displayed and edited in the code editor. These settings affect readability, consistency, and the way formatting behaves as code is written or updated.

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the bottom right, click Settings, then select Open settings.
3. Click the Settings: General dropdown menu and select Code.
4. Continue to customize the Appearance and Source sections.

Appearance

• Theme: the color scheme used by code editors.
• Font: the primary font and font size used by the code editor.

Source

• Tab size: the width of a tab character when pressing the tab key in the code editor.
• Indent unit: the number of spaces a code block should be indented by smart indent.
• Soft tabs: when toggled on, the tab key inserts space characters equal to Tab size instead of a tab character.
• Smart indent: when toggled on, new lines follow the indentation set from the previous line.
• Indent on formatting input: when toggled on, indent the same line on contextually sensitive input. For example, a case x: statement, or a closing } will be correctly indented when inserted.
• Indent with tabs: when toggled on, auto indentation caused by smart indent or formatting input uses tabs.
• Line wrapping: when toggled on, lines will be wrapped instead of requiring horizontal scrolling.
• Auto close brackets: when toggled on, the code editor automatically closes brackets and quotation characters, such as:
  () [] {} ’’ ””
• Auto close tags: when toggled on, the code editor automatically closes XML tags.
• Match brackets: when toggled on, placing the cursor next to a bracket character highlights the corresponding opening or closing bracket.
• Match tags: when toggled on, placing the cursor next to a tag highlights the corresponding opening or closing tag.
• Continue block comments: when toggled on, the code editor automatically continues block comments when creating new lines.

JavaScript linting settings

1. In your HubSpot account, navigate to Content > Design Manager.
2. In the bottom right, click Settings, then select Open settings.
3. Click the Settings: General dropdown menu and select JS Linter.
4. Click to toggle the Enable ESLint switch on or off. When toggled on, ESLint will run over JavaScript when viewing output in coded files.
5. In the left panel, configure your ESLint settings. Learn more about configuring ESLint.
6. In the right panel, a JavaScript demo will show the changes you make on the left.
7. Click Restore default eslintrc to restore the default configuration.