Customize design manager settings

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

To access these settings:

• In your HubSpot account, navigate to Content > Design Manager.
• In the bottom right, click Settings, then select Open settings.

• Click the Settings dropdown menu to select the type of settings you want to adjust.
  
  

General settings

• Open finder on start: when toggled on, the finder on the left will be open when the design manager is first accessed.
• Update previewer when switching files: when toggled on, the design manager previewer will show the currently selected file. Enable this setting if you want to preview one file at a time.

Code settings

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 closse bracket 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 is 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

• Click to toggle the Enable ESLint switch on or off. When toggled on, ESLint will run over JavaScript when viewing output in coded files.
  
  
• In the left panel, configure your ESLint settings. Learn more about configuring ESLint.
• In the right panel, a JavaScript demo will reflect the changes you make on the left.
• Click Restore default eslintrc to restore the default configuration.