vscodeを使用してReact Native開発環境を構築する方法を教えます

質問

コードにはプロンプトがありません:
RN 開発に不慣れな、フロントエンド以外の学生の多くは、「どのエディターにスマートプロンプトがありますか?」と尋ねます。。。高校を卒業する学生にとって、生活は以前よりずっと良くなったので、なぜ自転車が必要なのでしょうか?

低レベルコードエラー:
ここでのエラーとは、スペルミスや記号エラーなどを指します。コードを書いた後、実行するとさまざまなエラーが報告されます。問題を見つけるのに多大な労力を費やし、最終的に中国語のセミコロンに問題があることがわかったこともあります。

解決

可能なオプションは次のとおりです。

TypeScript を使用する: 静的型をサポートする js バージョンを直接使用しますが、別の構文セットを学習する必要があります。また、私のコードはすべて ts で記述されていますが、多くの優れたパブリックライブラリはそうではありません。
フローを使用する: ネットワーク上の理由により、この環境を構成するのは非常に難しく、いくつかの新しい構文を学習する必要もあります。

私たちの選択: vscode + Typings + eslint

vscode: 宇宙で最も強力な IDE ファミリーの最新製品
型付け: タイプスクリプトに基づくインターフェースファイル
eslint: 低レベルの構文エラーを検出し、コード形式を標準化し、ベストプラクティスを適用できる静的コードチェック

ツールとプラグイン

エディター: vscode。

必須および推奨されるプラグインは次のとおりです。

注記：

各プラグインをクリックすると、対応する詳細な手順が表示されます。
vscodeとプラグインの更新頻度はまだ比較的速いので、時間内に更新することをお勧めします。
vscode のプラグインのインストールは非常に簡単です。左下のボタンは拡張機能パネルです。プラグイン名を検索してクリックするだけでインストールできます。

コードインテリジェンスのヒント

react-native などのサードパーティパッケージの場合:

グローバルにタイピングをインストールします。

npm インストール タイピング -g

react および react-native の API ドキュメントをインストールします。

インストール dt~react --save

インストール dt~react-native --save

インストールが完了するのを待つと (パッケージの数とネットワークの状態によって異なります)、プロジェクトのルートディレクトリに、typings ディレクトリと types.json 構成ファイルが作成されます。

完了したら、コードを再起動するか、reload コマンドを使用します。これで、react-native および react-related コードに、以下に示すようにプロンプトと指示が表示されます。

メソッドスマートヒント:

表示方法のパラメータ:

マウスをホバーすると手順が表示されます:

注: 他のサードパーティパッケージの場合、同様のアプローチを使用するか、上記のプラグインを使用できます。

ビジネスコード開発者の場合:

標準のモジュラー js コードの場合、vscode は自動的に接続を確立し、プロンプトを提供するため、コメントを記述するだけで済みます。

ツールキットまたは SDK 開発者の場合:

コードを他の学生に公開する場合は、公開時に対応する .d.ts インターフェースファイルを提供する必要があります。
デフォルトはパッケージのルートディレクトリにある index.d.ts ファイルです。それ以外の場合は、package.json 構成で types 項目を指定する必要があります (main と同様)。

インターフェースファイルの書き方: ドキュメント

コードの静的チェック

コードは、CLI と構成ファイル (ルール) で構成される eslint の助けを借りて静的に lint されます。

vscode に対応するプラグインをインストールすると、CLI を自分で実行しなくても、エディター上で検出結果をリアルタイムで確認できるようになります。

注: この記事では、開発では通常使用されない eslint-cli のパラメータについて説明します。自動化されたスクリプトコマンドを作成するときは、ドキュメントを確認してください。

まず、eslint cli と関連プラグインをインストールし、プロジェクトの package.json に開発依存関係を追加します (これは一般的な RN 構成です)。

「devDependencies」: {
    "eslint": "^3.3.1",
    "バベル-eslint": "^6.1.2",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-プラグインインポート": "^1.14.0",
    "eslint-プラグイン-jsx-a11y": "^2.1.0",
    "eslint-プラグイン-react": "^6.1.2"
}

次に、npm install を実行してインストールします。

設定ファイル .eslintrc.js (ここではコメントを追加できるため js 形式を使用します。json 形式はオプションです)

ここで、eslint init を使用してウィザードを起動し、生成することができます。

既製のものをそのまま使用することもできます（利点は、チームの他のプロジェクトと一貫性があることです）。プロジェクトのルートディレクトリに新しい.eslintr.jsファイルを作成します。内容は次のとおりです。

モジュール.エクスポート = {
  パーサー: 'babel-eslint'、
  パーサーオプション: {
    ソースタイプ: 'モジュール'
  },
  拡張: "airbnb",
  プラグイン: [
    「反応する」、
    "jsx-a11y",
    "輸入"
  ]、
  ルール:
    // 0 = オフ、1 = 警告、2 = エラー
    //FB設定リファレンス:
    // https://github.com/facebook/react-native/blob/8baaad9b0fbda2b02bb1834452aa63cac7910dc5/.eslintrc

    "グローバル要求": 0,
    "no-use-before-define": 0, // 定義される前の変数の使用を禁止する
    "max-len": 0, // プログラム内の行の最大長を指定します (デフォルトではオフ)
    "no-console": 0, // コンソールの使用を許可しない (ノード環境ではデフォルトでオフ)
    "no-undef": 2, // /*global */ ブロックで指定されていない限り、宣言されていない変数の使用を禁止します

    「未使用変数なし」: 0,
    "block-scoped-var": 0, // var ステートメントをブロックスコープであるかのように扱います (デフォルトではオフ)
    "complexity": 0, // プログラムで許容される最大の循環的複雑度を指定します (デフォルトではオフ)
    "consistent-return": 0, // return ステートメントでは常に値を指定するか、または値を指定しないことを要求します

    // async-await を許可する
    'ジェネレーターの星の間隔': 0,

    "no-return-assign": 1, // return 文での代入の使用を禁止する

    "react/jsx-ファイル名拡張子": 0,
    「反応/自己終了コンプ」: 1,
    "react/jsx-閉じ括弧の位置": 0,
    "react/prop-types": 0, // reduxのようなプロパティの挿入を避ける},

  // ここで使用できるグローバル変数を設定します "globals": {
    「ウィンドウ」：true、
    「フェッチ」：true、
    "__DEV__": 真、
    "__APP__": 真、
    "__ANDROID__": 真、
    "__IOS__": 真
  }
};

ここでは主にプラグインと検出ルールを設定します。いくつかの手順は次のとおりです。

ルールリスト
ルールの後の 0 はオフを意味し、1 は警告を表示することを意味し、2 はエラーを表示することを意味します。一部のルールはパラメータで設定できます。詳細については、上記のルールリストのドキュメントを参照してください。
vscode が自動的に修正できる単純なエラーがいくつかあります (電球アイコンが表示された場合は、自動的に修正できることを意味します)

ここでのルールは、基本的に実践からまとめた js コードの書き方のベストプラクティスです。検出エラーが発生した場合は、ルールを直接検索して手順を読んでください。

ただシャットダウンしないでください。

vscode 用の eslint プラグインをインストールした後:

さらに:

事前コミットツールを使用して eslint を実行し、各送信前にコードを監視できます。失敗した場合、送信は禁止されます。

デバッグ

vscode に react-native-tools プラグインをインストールした後、chromDevTools を使用してコードをデバッグできます。

よりネイティブに近いデバッグ方法。

私たちがよく使う方法は次のとおりです。

ターミナルでパッケージサーバーを開く
vscode の選択、dbug、パッケージャーへのアタッチ
ターミナルでデバッグメニューを表示し、JSをリモートでデバッグを選択します。

要約する

仕事をうまくやり遂げたいなら、まず道具を研がなければなりません。努力する価値はあります。

優れた開発環境は、品質を確保しながら効率性を実現します。

優れた開発経験があれば、コーディングが楽しくなります。

これで、vscode を使用して react-native 開発環境を構築する方法を説明するこの記事は終了です。より関連性の高い vscode 構築 react-native コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: