Dreamweaver CC 2017 でJavascript構文チェック機能をカスタマイズする方法

Dreamweaver CC 2017では構文チェック機能が強化され、Javascriptのコードをリアルタイムでチェックしてくれます。
この機能のおかげで変数や関数名のスペルミスも減り、いままでChromeのコンソールで気づいていたエラーが大分減った気がします(^_^;)

この構文チェック機能はオープンソースの「JSHint」と呼ばれる機能なのですが、カスタマイズすることによりエラーの出方を調整することができます。

よく使いそうなカスタマイズ方法を少しだけ紹介します。

  1. 「○○ is not defined.」エラーを表示させない
  2. 「Missing “use strict” statment.」エラーを表示させない
  3. ES5やES6に対応し「const」や「let」を使う

1.「○○ is not defined.」エラーを表示させない

このJavascript構文チェック機能では別ファイルで定義された関数やグローバル変数を読み込むことができないので、たとえばGoogle Maps APIやGoogle Adsenseの変数、もしくは別ファイルに独自で定義しているグローバル変数などを記述すると「google is not defined.」や「adsbygoogle is not defined.」などと怒られてしまいます。

なのでDreamweaverに「これグローバル変数で宣言済みだから無視して!」と教えてあげればOKです。
コードを記述しているJavascriptファイルに以下のようなコメント行を挿入します。

例:Google Mapsの「google」というグローバル変数を登録する場合

/* global google */

例:独自で定義している関数「foo()」を登録する場合

/* global foo */

例:複数のグローバル変数を登録する場合

/* global google, foo */

これで無駄なエラーが出なくなり気持ちよく仕事を進められます(^^)/

また、今後どのJavascriptファイルでも「google」(Google Maps API用)や「_」(underscore.js用)などのグローバル変数を登録しておきたい場合にはDreamweaverの環境設定を変更します。

DreamweaverのJavascript検証機能設定
DreamweaverのJavascript構文チェック環境設定
  1. 「編集」メニュー > 「環境設定」 > 「構文チェック」カテゴリをクリックする
  2. 「ルールセットを編集」で「JS」を選択し、「変更を編集および適用」をクリックする
  3.  70行目の「globals」の後に「”predef”」キーを追加し、global変数を配列で登録する
  4. 保存して、エラーをチェックしたいJavascriptファイルを開き直す

例:google, adsbygoogle, _を登録する場合

{
  ...
  ...
  "yui": false,
  "globals": {},
  "predef": ["google", "adsbygoogle", "_"]
}

2.「Missing “use strict” statment.」エラーを表示させない

Javascript構文チェック機能のデフォルト設定では「”use strict”;」の記述がない場合に怒られます。

“use strict”とそうではないコードの混在の心配がない場合にはDreamweaverさんの注意に従い「”use strict”;」を記述してあげればいいのですが、過去のコードを引き継がなければならないなど、そうも言っていられない場合も多々あります。

そんな時には以下のようなコメント行を記述し、チェック対象から外してもらいます。

/* jshint strict: false */

または、こちらもDreamweaverの環境設定を変えることにより、恒久的にチェック対象から外すこともできます。

DreamweaverのJavascript検証機能設定

DreamweaverのJavascript構文チェック機能設定

  1. 「編集」メニュー > 「環境設定」 > 「構文チェック」カテゴリをクリックする
  2. 「ルールセットを編集」で「JS」を選択し、「変更を編集および適用」をクリックする
  3.  21行目の「strict」設定を「false」に書き換える
  4. 保存して、エラーをチェックしたいJavascriptファイルを開き直す

これで”use strict”の記述がなくてもエラーにならなくなります。

3.ES5やES6に対応し「const」や「let」を使う

ES5やES6で定義された構文を積極的に使いたいと思っていても、Dreamweaverの構文チェック機能は初期ではそれを許してくれません。

これを許可してもらいます。

  1. 「編集」メニュー > 「環境設定」 > 「構文チェック」カテゴリをクリックする
  2. 「ルールセットを編集」で「JS」を選択し、「変更を編集および適用」をクリックする
  3. 31行目付近の「es5」と32行目付近の「esnext」の値を「true」に変更
  4. 保存して、エラーをチェックしたいJavascriptファイルを開き直す
{
 ...
 "es5": true,
 "esnext": true,
 ...
}

これで「const」や「let」も使い放題です。

参考サイト

以下、参考サイトです。