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

Dreamweaver CC 2017では構文チェック機能が強化され、Javascriptのコードをリアルタイムでチェックしてくれます。

この機能のおかげで変数や関数名のスペルミスも減り、いままでChromeのコンソールで気づいていたエラーが大分減った気がします(^_^;)

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

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

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

１．「○○ 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用）や「_」（lodash.js用）などのグローバル変数を登録しておきたい場合にはDreamweaverの環境設定を変更します。

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

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

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

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

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

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

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

/* jshint strict: false */

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

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

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

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

３．ES5やES6に対応し「const」や「let」を使う

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

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

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

{
  ...
  "es5": true,
  "esnext": true,
  ...
}

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

参考サイト

以下、参考サイトです。

JS Hint Documentation