JSHintを使ってJavaScriptのエラーを減らす
2474 ワード
JSHint はJavaScriptコードがあなたのコードルールに合っているかを分析し、検証するためのオープンソースツールです.この強力なツールは、あなたのコードの中のエラーと問題Tを発見するのを助けることができます.それはあなたのチームに一定のコード慣行とスタイルを維持するように強制します.コードが信頼でき、読みやすくなります.
この記事では、JSHintのインストール、配置、使用方法を示します. また、一例を含めて、私が一番好きなJSHintを使えるエディタを紹介しました.
JSHintの設置
JSHintをインストールするのはとても簡単です.ご利用ください. Nodeパッケージマネージャ (npm)します.もしまだnpmをインストールしていないなら、 nodeJS websiteは最新版をダウンロードして、Node.jsとnpmをインストールします.
npmをインストールすると、以下のコマンドでJSHintをインストールできます.
コマンドラインでコードをチェックする
今JSHintはすでにインストールされています.コマンドラインでJavaScriptコードファイルを分析します.
次はファイル名です. demo 1.jsonのファイル:
私たちは下記のコマンドを使ってコードを分析します.
足りない番号を補って、このコマンドを再実行すれば、エラーメッセージが出力されなくなります.
JSHintの設定
JSHintはデフォルトの設定でコードを分析していますが、設定は非常に柔軟に設計されています.JSHintにプロファイルを提供する4つの方法があります.
一つの方法は使うことです.
第三の方法は package.json ファイルのjshintConfig属性に設定情報を入れます.
この3つの方法のいずれかにおいて、JSON形式の設定情報は、JSHintオプションがオンまたはオフであることをJSON形式で指定している.例えば、以下の構成ファイルの「unused」と「undef」は、未使用変数と未定義変数のアラームをアクティブにします.「curly」は常にループと条件ブロックに大きな括弧を入れることを要求します. 「eqeq」は使用禁止＝＝という意味です.使うべきです === and!==..."globals"は、コードに定義されていないグローバル変数ホワイトリストを指定します.
第四の方法は、注釈のように構成情報をコードファイルに書き込むことである.
設定の違いを確認してJSHintの行動をコントロールできます.詳細は下記の通りです. http://jshint.com/docs/options/.
一例
次に、上記のconfig.jsonプロファイルのオプションを操作します. 次のようなものがあるとします. JavaScriptファイルは、これはほんの一部分の学習コードです.
私たちがjshint命令を実行すれば
私たちのコードには4つのエラーがあります.9行目のJSHintでは、大括弧で包むべきだというメッセージがあります. 「if」コードブロック.変数subscriptionを定義しました.idは使っていません. 9行目と11行目に、 「confirm」と「consolie」は定義されていません.
私たちは少し修正すれば前の二つのエラーを回避できます.
今、私たちを config.jsonファイルにdevelオプションを追加して設定します. true、このようにJSHintは「confirm」と「consolie」を識別することができます.
ここで、もし私達が再び運行するならば
テキストエディタのJSHintへのサポート
あなたが見ているように、JSHintはコードエラーを減らすための非常に良いツールです.多くのエディタがJSHintサポートを提供しています.以下は私が一番好きなプラグインのリストです. Eclipse の webclipse plugin Brackets の braackets-jshint SublimeText: の Sublime Linter Webstorm 内蔵 Code Quallity Tools gedit の gedit-jshint Twitterに連絡してください.@anbellawats 0 n
この記事では、JSHintのインストール、配置、使用方法を示します. また、一例を含めて、私が一番好きなJSHintを使えるエディタを紹介しました.
JSHintの設置
JSHintをインストールするのはとても簡単です.ご利用ください. Nodeパッケージマネージャ (npm)します.もしまだnpmをインストールしていないなら、 nodeJS websiteは最新版をダウンロードして、Node.jsとnpmをインストールします.
npmをインストールすると、以下のコマンドでJSHintをインストールできます.
npm install jshint -g-gパラメータはnpmにグローバルインストールを教えてくれます.このコマンドはどのディレクトリでも呼び出すことができます.コマンドラインでコードをチェックする
今JSHintはすでにインストールされています.コマンドラインでJavaScriptコードファイルを分析します.
次はファイル名です. demo 1.jsonのファイル:
私たちは下記のコマンドを使ってコードを分析します.
jshint demo1.jsJSHintはdemo 1.jsファイルの8行目にエラーがあったと教えてくれました.原因:セミコロンが足りません.足りない番号を補って、このコマンドを再実行すれば、エラーメッセージが出力されなくなります.
JSHintの設定
JSHintはデフォルトの設定でコードを分析していますが、設定は非常に柔軟に設計されています.JSHintにプロファイルを提供する4つの方法があります.
一つの方法は使うことです.
--config :jshint demo1.js --config config.jsonもう一つの方法は.jshintrcというファイルに配置を入れることです.JSHintは同じディレクトリの下でこのプロファイルを検索してコード分析に使います.見つからなかったら、ルートディレクトリまで探し続けます. ,このようにして、プロジェクトに対して異なる設定ファイルを設定することができます. 第三の方法は package.json ファイルのjshintConfig属性に設定情報を入れます.
この3つの方法のいずれかにおいて、JSON形式の設定情報は、JSHintオプションがオンまたはオフであることをJSON形式で指定している.例えば、以下の構成ファイルの「unused」と「undef」は、未使用変数と未定義変数のアラームをアクティブにします.「curly」は常にループと条件ブロックに大きな括弧を入れることを要求します. 「eqeq」は使用禁止＝＝という意味です.使うべきです === and!==..."globals"は、コードに定義されていないグローバル変数ホワイトリストを指定します.
第四の方法は、注釈のように構成情報をコードファイルに書き込むことである.
設定の違いを確認してJSHintの行動をコントロールできます.詳細は下記の通りです. http://jshint.com/docs/options/.
一例
次に、上記のconfig.jsonプロファイルのオプションを操作します. 次のようなものがあるとします. JavaScriptファイルは、これはほんの一部分の学習コードです.
私たちがjshint命令を実行すれば
demo2.js --config config.json， ：.私たちのコードには4つのエラーがあります.9行目のJSHintでは、大括弧で包むべきだというメッセージがあります. 「if」コードブロック.変数subscriptionを定義しました.idは使っていません. 9行目と11行目に、 「confirm」と「consolie」は定義されていません.
私たちは少し修正すれば前の二つのエラーを回避できます.
今、私たちを config.jsonファイルにdevelオプションを追加して設定します. true、このようにJSHintは「confirm」と「consolie」を識別することができます.
ここで、もし私達が再び運行するならば
jshint 命令すれば、何の間違いもありません.テキストエディタのJSHintへのサポート
あなたが見ているように、JSHintはコードエラーを減らすための非常に良いツールです.多くのエディタがJSHintサポートを提供しています.以下は私が一番好きなプラグインのリストです.