React常用開発デバッグツール

reactプロジェクトを開発する時、私達はいくつかの開発と調整のツールを使って助けに来なければならなくて、私は4つの良いツールを整理しました.
1.ESList
みんなは開発においてこのツールに役立つはずです.JavascriptとJSXの文法検査ツールです.チームが一緒にプロジェクトを開発する時、コードのスタイルが一致するようにします.
インストール

$ npm install eslint --save-dev

インストール後、プロジェクトのルートディレクトリに.eslintrcファイルを作成して規則的な構成を行うことができます.eslintには多くの規則があり、自分でパラメータ構成を選択すると、漏れがあるかもしれません.一般的にはairbnbのテンプレートを使って、github上に、8万+starがあります.airbnbのテンプレートを使用して、まず以下のインストールを行います.

$ npm install eslint-config-airbnb --save-dev

構成を.eslintrcに追加する.

{
  "extends": "airbnb",      //    extends   airbnb
  "parser": "babel-eslint",
  "rules": {
    "arrow-body-style": [0],
    "consistent-return": [0],
    "generator-star-spacing": [0],
    "global-require": [1],
    "import/extensions": [0],
    "import/no-extraneous-dependencies": [0],
    "import/no-unresolved": [0],
    "import/prefer-default-export": [0],
    "jsx-a11y/no-static-element-interactions": [0],
    "no-bitwise": [0],
    "no-cond-assign": [0],
    "no-else-return": [0],
    "no-nested-ternary": [0],
    "no-restricted-syntax": [0],
    "no-use-before-define": [0],
    "react/forbid-prop-types": [0],
    "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
    "react/jsx-no-bind": [0],
    "react/prefer-stateless-function": [0],
    "react/prop-types": [0],   //   react       react   
    "require-yield": [1]
  }
}

(githubリンクを添付します.https://github.com/airbnb/jav...)
これは全面的なeslintテンプレートです.コードの末尾にスペースがあると、注意喚起の赤い下線が現れ、余分なスペースがあることを注意します.
変数が定義されていますが、ずっと使われていません.下線を注意することもあります.変数はまた灰になります.ここのtestとfooは全部使われていません.マウスはtestの上に移動します.定義されたものはまだ使われていません.
一般的なシンタックスの検査に加えて、eslintは、reactにおけるコンポーネント方法のステートメント順序をチェックすることができ、図のようにcomponentWillMountは、render方法の後に定義されている.
コードを提出する際にコードスタイルの不一致やエラーコードのアップロードを阻止するためには、renderで構成することができます.
このように、componentWillMountの後、エラーやスタイルが一致しないと、すべての問題があるファイルのパスを列挙し、全部でどれぐらいのpackage.jsonとgit commitがあるかを明示してから、直接errorsにエラーが発生し、コードをアップロードできない.
2.Prettierwarningsの中国語は「綺麗で利口」という意味です.コードフォーマットツールです.コードを解析して自分で設定した規則を使ってコードを保存します.commitと違って、Prettierはエラーを提示し、eslintはeslintを押した時に直接コードをフォーマットします.
Pretierは以下のいくつかの長所を持っています.

は構成可能である.

は複数の言語をサポートします.

複数のエディタを統合します.

シンプルな構成項目.

インストール

$ npm install prettier --save-dev --save-exact

$ npm install prettier --global

Prettier自体には多くの構成が内蔵されているので、構成が必要な内容は簡潔であり、以下はctrl + sの構成である.

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

これは多くの言語をサポートしています.HTMLとCSSを含めて、開発時に一行の改行がないコードを書きやすいようにしています.
保存後、自動的にコードをフォーマットします.
設定ファイルのPrettierはシングルクォーテーションマークを表し、.prettierrcに設定された場合、入力シングルクォーテーションマークは自動的にダブルクォーテーションマークとして保存されます.singleQuoteは改行後のスペースの数です.設定項目は、falseと一致するように設定したほうがいいです.そうすると、フォーマットコードを同期させることができます.
3.React DevToolstabWidthはeslintのプラグインであり、React DevToolsのコンソールでChromeのコンポーネント構造を確認することができる.このプラグインをインストールした後、コンソールの上の欄にChromeオプションが表示されます.そして、左上の位置付けreactをクリックして、ページ要素のコンポーネントを特定できます.
コンソールのコンポーネント名が見られ、1つのコンポーネントを選択すると、右側にそのサブコンポーネント、対応するReactなどの情報が表示されます.
右上の設定アイコンをクリックすると、設定枠がイジェクトされます.iconを選択できます.その後、ページを操作するたびに、最新の更新されたコンポーネントが明るくなります.
例えば、下の図の時間は更新し続けています.ページ上のこのコンポーネントは明るい枠があります.
これはclassName開発において、私たちにとって大きな助けになります.
4.Redux DevTool
これはまた、Highlight Updatesの1つのプラグインであり、reactの状態ツリーのリアルタイム監視をChromeにすることができ、これにより、Reduxの変化とトリガStoreをブラウザでリアルタイムで見ることができる.同様に、インストール後にコンソールにstateオプションがあります.選択したら次のページが見えます.現在のページのすべてのactionとページを読み込むときに順次トリガされるReduxを見ることができます.stateをクリックした後、actionを選択してこのactionのトリガを確認することができます.いくつかのDiffの変化については、図のようにactionがstateからfetchRedditListPendingに変化しているのが見えます.
下に時間線があります.ある時点をカスタマイズできます.trueアイコンを調整したいなら、falseでずっとローディングすることができます.これで調整しやすいです.loadingオプションを選択したらテストコードが見えます.テストをするなら、直接コードをコピーして、少し修正すればいいです.便利ですか?
以上はよく使われているloadingのデバッグツールを開発しました.