web-dev-qa-db-ja.com

JSHintおよびjQuery： '$'は定義されていません

次のJS：

(function() {
  "use strict";

  $("#target").click(function(){
    console.log("clicked");
  });

}());

利回り：

test.js: line 5, col 3, '$' is not defined.

JSHint 0.5.5を使用してリントした場合。何か案は？

javascriptjqueryjshint
207
Allyl Isocyanate

JSHintの比較的最近のバージョンを使用している場合、一般的に推奨されるアプローチは、プロジェクトのルートに.jshintrcファイルを作成し、この構成をその中に配置することです。

{
    "globals": {
        "$": false
    }
}

これは、$がグローバル変数であることをJSHintに宣言し、falseはそれがオーバーライドされるべきではないことを示します。

.jshintrcファイルは、JSHintの実際の古いバージョン（2012年の元の質問のようなv0.5.5など）ではサポートされていませんでした。 .jshintrcファイルを使用できない、または使用したくない場合は、スクリプトファイルの先頭にこれを追加できます。

/*globals $:false */

JSHintオプションページ ..にあるように、「jquery」jshintオプションの短縮形もあります。

375
Stephen Booher

.jshintrcに2行追加することもできます

  "globals": {
    "$": false,
    "jQuery": false
  }

これはjshintに2つのグローバル変数があることを伝えます。

147
wmil

必要なことは、"jquery": trueに.jshintrcを設定することだけです。

JSHintオプションリファレンス ：

jquery

このオプションは、jQuery JavaScriptライブラリによって公開されるグローバルを定義します。

50
niren

ここにあなたの.jshintrcに入れる小さな幸せなリストがあります
時間の経過とともにこのリストに追加します。

{
  // other settings...
  // ENVIRONMENTS
  // "browser": true, // Is in most configs by default
  "node": true,
  // others (e.g. yui, mootools, rhino, worker, etc.)
  "globals": {
    "$":false,
    "jquery":false,
    "angular":false
    // other explicit global names to exclude
  },
}
16
James Harrington

WebStorm、PyCharm、RubyMine、IntelliJ IDEAなどのIntelliJエディターを使用している場合：

[ファイル]、[設定]、[JavaScript]、[コード品質ツール]、[JSHint]の[環境]セクションで、[jQuery]チェックボックスをクリックします。

7
Joe Golton

通常の「JSHintグローバルをオフにする」ことを推奨する代わりに、この問題を解決するために モジュールパターン を使用することをお勧めします。これにより、コードが「含まれたまま」になり、パフォーマンスが向上します（Paul Irishの 「Jqueryについて学んだ10のこと」 に基づいています）。

私はこのようなモジュールパターンを書く傾向があります：

(function (window) {
    // Handle dependencies
    var angular = window.angular,
        $ = window.$,
        document = window.document;

    // Your application's code
}(window))

これらの他のパフォーマンス上の利点を得ることができます（詳細は こちら で説明）：

  • コードを縮小するとき、渡されたwindowオブジェクト宣言も縮小されます。例えばwindow.alert()はm.alert()になります。
  • 自己実行匿名関数内のコードは、windowオブジェクトの1つのインスタンスのみを使用します。
  • windowのプロパティまたはメソッドを呼び出すときに追跡し、スコープチェーンの高コストなトラバーサルを防ぎます。 window.alert()（高速）対alert()（低速）パフォーマンス。
  • 「namespacing」と包含による関数のローカルスコープ（グローバルは悪です）。このコードを個別のスクリプトに分割する必要がある場合は、それらのスクリプトごとにサブモジュールを作成し、それらを1つのメインモジュールにインポートできます。
3
Alastair Paragas

オンラインJSHint実装 を使用しているときにこのエラーを修正するには：

  • 「構成」をクリックします（ページの中央の列の上部）
  • 「jQuery」を有効にします（下部の「ASSUME」セクションの下）
2
Tony L.

IntelliJエディターを使用している場合は、

  • 設定/設定
    • Javascript
      • コード品質ツール
        • JSHint
          • 事前定義済み（下部）、設定

たとえば、console:falseなど、何でも入力できます。これは、リスト（.jshintrc）にもグローバルとして追加されます。

1
knowncitizen