更新日時 2023年 1月 19日
デザインマネージャーの設定で開発者エクスペリエンスをカスタマイズします。設定には、デフォルトのデザインマネージャーの起動動作、カスタムコード化されたファイルのコード設定、JavaScriptのリンティングが含まれます。
これらの設定にアクセスするには、次の手順を実行します。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- 右下の[設定]をクリックし、[設定を開く]を選択します。
- [設定]ドロップダウンメニューをクリックして、調整する設定のタイプを選択します。
全般設定
- 開始時にファインダーを開く：オンに切り替えると、最初にデザインマネージャーにアクセスしたときに左側のファインダーが開きます。
- ファイルを切り替えるときにプレビューアを更新します。切り替えると、デザインマネージャプレビューアに現在選択されているファイルが表示されます。一度に 1 つのファイルをプレビューする場合は、この設定を有効にします。
コード設定
表示
- テーマ：コードエディターで使用される色スキーム。
- フォント：コードエディターで使用される主なフォントとフォントサイズ。
出典（英語）
- タブサイズ：コードエディターでタブキーを押すときのタブ文字の幅。
- インデントユニット：スマートインデントによってインデントされるコードブロックの数。
- ソフトタブ:オンに切り替えると、タブキーはタブ文字の代わりにタブサイズに等しいスペース文字を挿入します。
- スマートインデント：オンに切り替えると、新しい行は前の行から設定されたインデントに従います。
- フォーマット入力のインデント:オンに切り替えると、コンテキストに敏感な入力で同じ行をインデントします。たとえば、case x：ステートメントや閉じ｝が正しくインデントされます。
- タブ付きインデント：オンに切り替えると、スマートインデントまたはフォーマット入力によって引き起こされる自動インデントはタブを使用します。
- 行の折り返し:オンに切り替えると、水平スクロールを必要とせずに行が折り返されます。
- かっこを自動的に閉じる：オンに切り替えると、コードエディタは次のようなかっこと引用符を自動的に閉じます。() [] {} ''"
- タグを自動的に閉じる:オンに切り替えると、コードエディタは自動的にXMLタグを閉じます。
- かっこを合わせる:オンに切り替えると、かっこの文字の横にカーソルを置くと、対応する開閉かっこが強調表示されます。
- マッチタグ:オンに切り替えると、タグの横にカーソルを置くと、対応する開始タグまたは終了タグが強調表示されます。
- ブロックコメントを続行:オンに切り替えると、コードエディターは新しい行を作成するときにブロックコメントを自動的に続行します。
JavaScript リンク設定
- [ESLintを有効にする]スイッチをオンまたはオフに切り替えるには、をクリックします。オンに切り替えると、ESLintはコード化されたファイルの出力を表示するときにJavaScriptを実行します。
- 左側のパネルで、ESLint 設定を構成します。ESLint の構成についてもっと詳しく知る。
- 右側のパネルで、JavaScript デモが左側の変更内容を反映します。
- 既定の設定を復元するには、[既定の eslintrc を復元]をクリックします。
