マニュアルキャンセル

構文チェックコード

検索

最終更新日 : 2021年4月28日

Adobe Dreamweaver で HTML、CSS、DW テンプレート、および JS ファイルの構文チェックをおこなう方法について説明します。出力パネルにエラーと警告を表示し、エラーの含まれたコード行に 1 クリックでジャンプします。

初心者でも経験豊富なプログラマーでも、気付かないうちに、または知識不足によりコードにエラーが入り込んでしまう可能性は常にあります。Web ページやその一部が予想どおりに表示されなかった場合、構文エラーや論理的なエラーを探すためにコードをデバッグする必要に迫られます。デバッグは、複雑な実装の場合は特に、大変な労力と時間が必要なプロセスになる場合があります。

Dreamweaver で構文チェックを使用することで、一般的なエラーに対するコードのデバッグがシンプルかつ簡単になります。構文チェックは、潜在的なエラーや、コードの疑わしい使用を特定するコードを解析するプロセスです。Dreamweaver の構文チェックで検出されるものには、HTML 構文エラー、CSS での解析エラー、JavaScript ファイルでの警告などがあります。

見つかったエラーや警告は、ワークスペースの下部にドッキングされた個別のパネル（出力パネル）に表示されます。パネルの各行からエラーが発生したコードの部分にジャンプできるため、簡単にコードを見つけて修正できます。また、エラーが含まれた行の番号が、エラーの場合は赤で、警告の場合は黄色でハイライト表示されます。ハイライト表示された行番号をマウスでポイントすると、エラーまたは警告のプレビューが表示されます。

編集時 Linting 機能を使用すると、コードの編集と同時に、出力パネルにエラーと警告が表示されます。

Dreamweaver では、HTML（.htm および .html）、CSS、DW テンプレートおよび JavaScript ファイルの構文チェックを実行できます。

これらのファイルのコードの構文チェックをおこなうには、次の手順を実行します。

HTML、CSS、DW テンプレート、JS の構成ファイルを編集して、構文チェックのルールを指定します。詳しくは、構文チェックのルールの指定を参照してください。
構文チェックを有効または無効にします。構文チェックは、ファイルの編集時、読み込み時、保存時に実行できます。
- 編集時 Linting を有効または無効にするには、環境設定／構文チェックオプションを使用します。詳しくは、構文チェックの有効化と環境設定の指定を参照してください。

ファイルに見つかったエラーや警告は、出力パネルに表示されます。詳しくは、構文チェックの結果と出力パネルを参照してください。

構文チェック、編集時 Linting の有効化と構文チェックルールの指定

編集／環境設定（Windows）または Dreamweaver／環境設定（Mac）をクリックします。「カテゴリ」リストで、「構文チェック」をクリックし、「構文チェックを有効にする」をオンにして、「適用」をクリックします。

編集時 Linting

Dreamweaver では、編集時 Linting 機能はデフォルトで有効になっています。無効にするには、編集／環境設定（Windows）または Dreamweaver／環境設定（Mac）をクリックします。「カテゴリ」リストで、「構文チェック」をクリックし、「編集時 Linting」をオフにして、「適用」をクリックします。

構文チェックのルールの指定

HTML、CSS、JS ファイルを構文チェックするには、次の対応する構成ファイルで構文チェックのルールを編集します。

HTML：DW.htmlhintrc
CSS：DW.csslintrc
JS：.eslintrc

これらのファイルにアクセスし編集するには、次の手順を実行します。

編集／環境設定（Windows）または Dreamweaver／環境設定（Mac）をクリックします。
「カテゴリ」リストで「構文チェック」を選択します。
「ルールセットを編集」セクションで目的のファイルの種類をクリックし、「変更を編集および適用」をクリックします。

対応する構成ファイルが Dreamweaver で開きます。
構文チェックのルールを編集し、構成ファイルに追加します。構文チェックのルールについて詳しくは、次のドキュメントを参照してください。
- HTML リンター：https://github.com/yaniswang/HTMLHint/wiki/Rules
- CSS リンター：https://github.com/CSSLint/csslint/wiki/Rules
- JS リンター：https://eslint.org/docs/rules
これらの構成ファイルでは、表示するエラーまたは警告の種類も設定できます。

注意：

以前のバージョンの Dreamweaver 19.0 用の構文チェックルール設定ファイルは、JS：DW.jshintrc です。http://jshint.com/docs/options/ を参照してください。

ECMAScript 6 の構文チェック

Dreamweaver では ECMAScript 6 構文をサポートしています。Dreamweaver では、JavaScript linter のデフォルトとして ESLint を備えた、ECMAScript コードの構文チェックもサポートしています。

サイト／サイトの管理をクリックします。

サイトの管理ダイアログから Web サイトを選択
サイト設定ダイアログウインドウの左のパネルから「詳細設定」を選択します。
左側パネルの「詳細設定」から「JS Lint」を選択します。

ECMAScript バージョンの横にあるドロップダウンリストをクリックして、3、5、6 から選択できます。Dreamweaver では、選択したバージョンのデフォルトのルールセットが使用されます。

ECMAScript バージョンを選択
ルールセットをカスタマイズするには、ドロップダウンリストから「構成ファイル」を選択して、「構成ファイルを編集」をクリックします。

JS 構文セットの構成ファイルを編集

サイト設定で行った変更が保存され、新しいファイル .eslintrc.js がサイトのルートに存在しない場合はサイトのルートに作成されます。

.eslintrc.js ファイルがサイトのルートで開き、編集できるようになります。詳しくは、ESLint のルールを参照してください。

.eslintrc.js 構成ファイル
注意：
サイト設定ダイアログで定義された ECMAScript バージョンの設定は、サイトルートで使用される .eslintrc.js ファイルよりも優先されます。

サイトに ESLint 設定ファイルがない場合、Dreamweaver によってルートディレクトリまでのすべての場所で設定ファイルが検索されます。

構成ファイルのカスケーディングと階層について詳しくは、ESLint のサイトを参照してください。