デザインマネージャー設定をカスタマイズ

デザインマネージャー設定で開発者体験をカスタマイズ。デザインマネージャー設定には、デザインマネージャーの既定の起動動作、カスタムコードファイルのコード設定、JavaScript Lintが含まれます。

全般設定のカスタマイズ

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. 右下の「設定」をクリックし、「設定を開く」を選択します。
3. デザインマネージャーへのアクセス時にファインダーを開くには、[ 開始時にファインダーを開く ]スイッチをオンに切り替えます。 
4. ファイルを切り替えるときにプレビューアーを自動的に更新するには、[ 起動時 ]セクションの[ ファイルの切り替え時にプレビューアーを更新する ]スイッチをオンに切り替えます。
5. レンダリング前の警告を有効にするには、[ HubL Lint]セクションで[ レンダリング前の警告を有効にする ]スイッチをオンに切り替えます。

コード設定をカスタマイズする

コード設定をカスタマイズして、 コードエディターでコードを表示および編集する方法を制御します。これらの設定は、読みやすさ、一貫性、およびコードの記述時または更新時の書式設定の動作に影響します。

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. 右下の「設定」をクリックし、「設定を開く」を選択します。
3. [設定:全般 ]ドロップダウンメニューをクリックし、[ コード]を選択します。
4. 次に、[ 外観 ]セクションと [ソース ]セクションのカスタマイズに進みます。

外観

• 「テーマ」:コードエディターで使用される配色。
• Font:コードエディターで使用する主要フォントとフォントサイズ。

ソース

• 「タブサイズ」:コードエディターでタブキーを押したときのタブ文字の幅。
• 字下げ単位:スマート字下げによってコードブロックが字下げされるべきスペース数。
• ソフトタブ:オンに切り替えると、タブキーはタブ文字の代わりにタブサイズと等しいスペース文字を挿入する。
• スマート字下げ:オンにすると、新しい行は前の行で設定された字下げに従います。
• フォーマット入力時の字下げ:オンにすると、文脈依存入力時に同じ行を字下げする。例えば、 case x: ステートメントや終了 } は挿入時に正しくインデントされます。
• タブを使った字下げ:をオンにすると、スマート字下げやフォーマット入力による自動字下げがタブを使います。
• 行の折り返し:オンにすると、水平スクロールの代わりに行が折り返されます。
• 自動閉じ括弧: オンに切り替えると、コードエディターで以下のような括弧と引用符が自動的に閉じられます。
  () [] {} ’’ ””
• 「タグの自動閉じ」:オンにすると、コードエディターがXMLタグを自動的に閉じます。
• 「かっこの対応」:オンに切り替えると、カーソルをかっこ文字の横に置くと、対応する開きかっこまたは閉じかっこがハイライトされます。
• タグを一致させる: オンに切り替えると、タグの横にカーソルを置くと、対応する開始タグまたは終了タグが強調表示されます。
• ブロックコメントを続ける:をオンにすると、コードエディターが新しい行を作成するときに自動的にブロックコメントを続けます。

JavaScriptのリンティング設定

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. 右下の「設定」をクリックし、「設定を開く」を選択します。
3. [設定:全般 ]ドロップダウンメニューをクリックし、[ JS Linter]を選択します。
4. 「ESLintを有効化」スイッチのオン/オフを切り替えるにはクリックしてください。オンに切り替えると、コードファイル内の出力を表示する際にESLintがJavaScript上で実行されます。
5. 左側のパネルで、ESLint 設定を構成します。ESLintの設定についてはこちらをご覧ください。
6. 右側のパネルのJavaScriptデモでは、行った変更が左側に表示されます。
7. Restore default eslintrc をクリックして、デフォルト設定を復元します。