HTML、CSS、DW テンプレート、JS の構成ファイルを編集して、構文チェックのルールを指定します。 詳しくは、構文チェックのルールの指定を参照してください。
最終更新日 :
2021年4月27日
Adobe Dreamweaver で HTML、CSS、DW テンプレート、および JS ファイルの構文チェックをおこなう方法について説明します。 出力パネルにエラーと警告を表示し、エラーの含まれたコード行に 1 クリックでジャンプします。
初心者でも経験豊富なプログラマーでも、気付かないうちに、または知識不足によりコードにエラーが入り込んでしまう可能性は常にあります。 Web ページやその一部が予想どおりに表示されなかった場合、構文エラーや論理的なエラーを探すためにコードをデバッグする必要に迫られます。 デバッグは、複雑な実装の場合は特に、大変な労力と時間が必要なプロセスになる場合があります。
Dreamweaver で構文チェックを使用することで、一般的なエラーに対するコードのデバッグがシンプルかつ簡単になります。 構文チェックは、潜在的なエラーや、コードの疑わしい使用を特定するコードを解析するプロセスです。 Dreamweaver の構文チェックで検出されるものには、HTML 構文エラー、CSS での解析エラー、JavaScript ファイルでの警告などがあります。
見つかったエラーや警告は、ワークスペースの下部にドッキングされた個別のパネル（出力パネル）に表示されます。 パネルの各行からエラーが発生したコードの部分にジャンプできるため、簡単にコードを見つけて修正できます。 また、エラーが含まれた行の番号が、エラーの場合は赤で、警告の場合は黄色でハイライト表示されます。 ハイライト表示された行番号をマウスでポイントすると、エラーまたは警告のプレビューが表示されます。
編集時 Linting 機能を使用すると、コードの編集と同時に、出力パネルにエラーと警告が表示されます。
Dreamweaver では、HTML（.htm および .html）、CSS、DW テンプレートおよび JavaScript ファイルの構文チェックを実行できます。
これらのファイルのコードの構文チェックをおこなうには、次の手順を実行します。
構文チェックを有効または無効にします。 構文チェックは、ファイルの編集時、読み込み時、保存時に実行できます。
- 編集時 Linting を有効または無効にするには、環境設定／構文チェックオプションを使用します。 詳しくは、構文チェックの有効化と環境設定の指定を参照してください。
ファイルに見つかったエラーや警告は、出力パネルに表示されます。 詳しくは、構文チェックの結果と出力パネルを参照してください。
構文チェック、編集時 Linting の有効化と構文チェックルールの指定
編集／環境設定（Windows）または Dreamweaver／環境設定（Mac）をクリックします。 「カテゴリ」リストで、「構文チェック」をクリックし、「構文チェックを有効にする」をオンにして、「適用」をクリックします。
編集時 Linting
Dreamweaver では、編集時 Linting 機能はデフォルトで有効になっています。 無効にするには、編集／環境設定（Windows）または Dreamweaver／環境設定（Mac）をクリックします。 カテゴリリストでLintingをクリックし、On edit lintingを選択してApply
をクリックします。
構文チェックのルールの指定
HTML、CSS、JS ファイルを構文チェックするには、次の対応する構成ファイルで構文チェックのルールを編集します。
- HTML：DW.htmlhintrc
- CSS：DW.csslintrc
- JS: .eslintrc
これらのファイルにアクセスし編集するには、次の手順を実行します。
編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）をクリックします。
「カテゴリ」リストで「構文チェック」を選択します。
「ルールセットを編集」セクションで目的のファイルの種類をクリックし、「変更を編集および適用」をクリックします。
対応する構成ファイルが Dreamweaver で開きます。
構文チェックのルールを編集し、構成ファイルに追加します。 構文チェックのルールについて詳しくは、次のドキュメントを参照してください。
これらの構成ファイルでは、表示するエラーまたは警告の種類も設定できます。
メモ
以前のバージョンの Dreamweaver 19.0 用の構文チェックルール設定ファイルは、JS：DW.jshintrc です。 http://jshint.com/docs/options/ を参照してください。
ECMAScript 6 の構文チェック
Dreamweaver では ECMAScript 6 構文をサポートしています。 Dreamweaver では、JavaScript linter のデフォルトとして ESLint を備えた、ECMAScript コードの構文チェックもサポートしています。
サイト／サイトの管理をクリックします。
サイト設定ダイアログウインドウの左のパネルから「詳細設定」を選択します。
左側パネルの「詳細設定」から「JS Lint」を選択します。
ECMAScript バージョンの横にあるドロップダウンリストをクリックして、3、5、または6を選択できます。Dreamweaverは選択したバージョンのデフォルトルールセットを使用します。
ルールセットをカスタマイズするには、ドロップダウンリストから「構成ファイル」を選択して、「構成ファイルを編集」をクリックします。
サイト設定で行った変更が保存され、新しいファイル .eslintrc.js がサイトのルートに存在しない場合はサイトのルートに作成されます。
.eslintrc.js ファイルがサイトのルートで開き、編集できるようになります。 詳しくは、ESLint のルールを参照してください。
メモ
- サイト設定ダイアログで定義された ECMAScript バージョンの設定は、サイトルートで使用される .eslintrc.js ファイルよりも優先されます。
- サイトに ESLint 設定ファイルがない場合、Dreamweaver によってルートディレクトリまでのすべての場所で設定ファイルが検索されます。
構成ファイルのカスケーディングと階層について詳しくは、ESLint のサイトを参照してください。
Lintingの結果とOutputパネル
構文チェックの結果（エラーと警告）は出力パネルに一覧表示されます。 出力パネルは、すべての既定のワークスペース下部でドッキング モードで使用できます。 出力パネルが閉じている場合は、次のいずれかの操作で開くことができます。
- ドキュメントウィンドウのステータスバーで、構文チェックのステータスアイコンをクリックする
- キーボードショートカット（Shift+F6 キー）を使用する
- ウィンドウ／結果／出力を使用する
ステータスバーの構文チェックアイコンに構文チェックの結果が次のように示されます。
赤 - 現在のドキュメントにエラーと警告があります
黄 - 現在のドキュメントに警告のみがあります
緑 - 現在のドキュメントにエラーはありません
メモ
アイコンが赤または黄色の場合、ステータスバーの構文チェックアイコンを使用して、出力パネル（開く／閉じる）を切り替えることもできます。
エラーまたは警告が含まれた行は、それぞれ赤または黄色でハイライト表示されます。 出力パネルでメッセージをダブルクリックして、エラーが発生した行にジャンプすることもできます。 コードビューでエラーの部組まれた行の番号をマウスでポイントして、エラーまたは警告のプレビューを表示することもできます。
出力パネルには一度に 50 件のメッセージが表示され、エラーの次に警告が一覧表示されます。 エラーの修正時には、パネル内の一覧がスクロールして、次のエラーを表示します。
