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 Marketing > Files and Templates > Design Tools.
- 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.