HTML、CSS、DW テンプレート、JS の構成ファイルを編集して、構文チェックのルールを指定します。詳しくは、構文チェックのルールの指定を参照してください。
- Dreamweaver ユーザーガイド
- はじめに
- Dreamweaver と Creative Cloud
- Dreamweaver のワークスペースとビュー
- サイトの設定
- ファイルの管理
- レイアウトとデザイン
- CSS
- ページコンテンツとアセット
- ページプロパティの設定
- CSS 見出しプロパティおよび CSS リンクプロパティの設定
- テキストの操作
- テキスト、タグ、属性の検索と置換
- DOM パネル
- ライブビューでの編集
- Dreamweaver でのドキュメントのエンコード
- ドキュメントウィンドウでのエレメントの選択および表示
- プロパティインスペクターでのテキストプロパティの設定
- web ページのスペルチェック
- Dreamweaver での区切り線の使用
- Dreamweaver でのフォントの組み合わせの追加と変更
- アセットを使用した作業
- Dreamweaver での日付の挿入と更新
- Dreamweaver でのお気に入りアセットの作成と管理
- Dreamweaver でのイメージの挿入と編集
- メディアオブジェクトの追加
- Dreamweaver でのビデオの追加
- HTML5 ビデオの挿入
- SWF ファイルの挿入
- オーディオエフェクトの追加
- Dreamweaver での HTML5 オーディオの挿入
- ライブラリ項目の操作
- Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
- リンクおよびナビゲーション
- jQuery Widget と効果
- web サイトのコーディング
- Dreamweaver でのコーディングについて
- Dreamweaver のコーディング環境
- コーディングの環境設定
- コードカラーリングのカスタマイズ
- コードの記述と編集
- コードヒントとコード補完機能
- コードの折りたたみと展開
- スニペットでコードを再利用する
- 構文チェックコード
- コードの最適化
- デザインビューでのコードの編集
- ページのヘッドコンテンツの操作
- Dreamweaver でのサーバーサイドインクルードの挿入
- Dreamweaver でのタグライブラリの使用
- Dreamweaver へのカスタムタグの読み込み
- JavaScript ビヘイビアーの使用(基本操作)
- JavaScript に組み込まれているビヘイビアーの適用
- XML および XSLT について
- Dreamweaver でのサーバーサイド XSL 変換の実行
- Dreamweaver でのクライアントサイド XSL 変換の実行
- Dreamweaver での XSLT の文字エンティティの追加
- コードのフォーマット
- 製品間ワークフロー
- テンプレート
- Dreamweaver テンプレートについて
- テンプレートおよびテンプレートから作成されたドキュメントの認識
- Dreamweaver テンプレートの作成
- テンプレート編集可能領域の作成
- Dreamweaver でのリピート領域およびテーブルの作成
- テンプレートの任意の領域の使用
- Dreamweaver での編集可能なタグ属性の定義
- Dreamweaver でネストされたテンプレートを作成する方法
- テンプレートの編集、更新、削除
- Dreamweaver での xml コンテンツの書き出しおよび読み込み
- 既存のドキュメントでのテンプレートの適用または削除
- Dreamweaver テンプレートでのコンテンツの編集
- Dreamweaver でのテンプレートタグのシンタックスルール
- テンプレート領域のハイライト表示の環境設定
- Dreamweaver でテンプレートを使用する利点
- モバイルとマルチスクリーン
- 動的サイト、ページおよび web フォーム
- web アプリケーションについて
- アプリケーション開発のためのコンピューター設定
- データベース接続のトラブルシューティング
- Dreamweaver での接続スクリプトの削除
- 動的ページのデザイン
- 動的コンテンツソースの概要
- 動的コンテンツのソースの定義
- ページへの動的コンテンツの追加
- Dreamweaver での動的コンテンツの変更
- データベースのレコードの表示
- Dreamweaver でのライブデータの入力とトラブルシューティング
- Dreamweaver でのカスタムサーバービヘイビアーの追加
- Dreamweaver を使用したフォームの作成
- フォームを使用したユーザーからの情報の収集
- Dreamweaver での ColdFusion フォームの作成と有効化
- web フォームの作成
- フォームエレメントの HTML5 サポート強化
- Dreamweaver を使用したフォームの開発
- アプリケーションのビジュアル開発
- web サイトのテスト、プレビュー、パブリッシュ
- トラブルシューティング
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」をオフにして、「適用」をクリックします。
構文チェックのルールの指定
HTML、CSS、JS ファイルを構文チェックするには、次の対応する構成ファイルで構文チェックのルールを編集します。
- HTML:DW.htmlhintrc
- CSS:DW.csslintrc
- JS:.eslintrc
これらのファイルにアクセスし編集するには、次の手順を実行します。
-
編集/環境設定(Windows)または Dreamweaver/環境設定(Mac)をクリックします。
-
「カテゴリ」リストで「構文チェック」を選択します。
-
「ルールセットを編集」セクションで目的のファイルの種類をクリックし、「変更を編集および適用」をクリックします。
対応する構成ファイルが 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 のサイトを参照してください。
構文チェックの結果と出力パネル
構文チェックの結果(エラーと警告)は出力パネルに一覧表示されます。出力パネルは、すべての既定のワークスペース下部でドッキング モードで使用できます。出力パネルが閉じている場合は、次のいずれかの操作で開くことができます。
- ドキュメントウィンドウのステータスバーで、構文チェックのステータスアイコンをクリックする
- キーボードショートカット(Shift+F6 キー)を使用する
- ウィンドウ/結果/出力を使用する
ステータスバーの構文チェックアイコンに構文チェックの結果が次のように示されます。
- 赤 - 現在のドキュメントにエラーと警告があります。
- 黄 - 現在のドキュメントに警告のみがあります。
- 緑 - 現在のドキュメントにエラーはありません。
アイコンが赤または黄色の場合、ステータスバーの構文チェックアイコンを使用して、出力パネル(開く/閉じる)を切り替えることもできます。
エラーまたは警告が含まれた行は、それぞれ赤または黄色でハイライト表示されます。出力パネルでメッセージをダブルクリックして、エラーが発生した行にジャンプすることもできます。コードビューでエラーの部組まれた行の番号をマウスでポイントして、エラーまたは警告のプレビューを表示することもできます。
出力パネルには一度に 50 件のメッセージが表示され、エラーの次に警告が一覧表示されます。エラーの修正時には、パネル内の一覧がスクロールして、次のエラーを表示します。