デザインマネージャーには、開発者エクスペリエンスをカスタマイズするための一連の設定があります。これらの設定には、既定のデザインマネージャーのスタートアップ動作、カスタムコードファイルのコード設定、JavaScript ラインナップが含まれます。
これらの設定にアクセスするには、次の手順を実行します。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- 右下の[設定]をクリックし、[設定を開く]を選択します。
- [設定]ドロップダウンメニューをクリックして、調整する設定のタイプを選択します。
一般設定
- 開始時のファインダーを開く：デザインマネージャーが初めて開かれた場合、左側のファインダーは常に開かれます。
- ファイルを切り替えるときにプレビューアーを更新：プレビューアが開いている場合、プレビューアは現在選択されているファイルを表示します。一度に 1 つのファイルをプレビューする場合は、この設定を有効にします。
コード設定
外観
- テーマ：コードエディターで使用される色スキーム。
- フォント：コードエディターで使用される主なフォントとフォントサイズ。
ソース
- タブサイズ：コードエディターでタブキーを押すときのタブ文字の幅。
- インデントユニット：スマートインデントによってインデントされるコードブロックの数。
- ソフトタブ：タブキーを押すと、タブ文字ではなく、タブサイズに等しいスペース文字を挿入します。
- スマートインデント：有効になっている場合、新しい行は前の行から設定されたインデントになります。
- フォーマット入力にインデント：コンテキスト機密情報の入力に同じ行をインデントします。たとえば、case x：ステートメントや閉じ｝が正しくインデントされます。
- タブを使用したインデント：スマートインデントまたはフォーマット入力による自動インデントでタブを使用します。
- 行の折り返し：水平スクロールの代わりに行を折り返します。ではなくラインライン。
- 自動クローズドブラケット：
() [] {} ’’ ””などの括弧や引用符がある時に自動的に閉じます。 - 自動クローズタグ：自動的に XML タグを閉じます。
- 一致括弧：カーソルがブラケット文字の横にある場合は、対応するオープニングまたはクローズブラケットを強調表示します。
- タグの一致：カーソルがタグの横にある場合は、対応するオープニングまたはクローズタグを強調表示します。
- ブロックのコメントを続行：新しい行を作成するときに自動的にブロックコメントを続行します。
JavaScript リンク設定
- [ESLint を有効化]をクリックしてのオン/オフを切り替えます。コードファイルで出力を表示中にESLint を有効にすると、JavaScript でESLint が実行されます。
- 左側のパネルで、ESLint 設定を構成します。ESLint の構成についてもっと詳しく知る。
- 右側のパネルで、JavaScript デモが左側の変更内容を反映します。
- 既定の設定を復元するには、[既定の eslintrc を復元]をクリックします。
