React プロジェクトで eslint の Baidu スタイルを使用する詳細な説明

React プロジェクトで eslint の Baidu スタイルを使用する詳細な説明

1. Baidu Eslint Ruleプラグインをインストールする

npm i -D eslint @babel/eslint-parser @babel/eslint-plugin @ecomfe/eslint-config

// React プロジェクト npm i -D eslint-plugin-react eslint-plugin-react-hooks
 
// Typescriptをサポートする必要がある場合は、npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. .eslintrcファイルを設定する

{
    "parser": "@typescript-eslint/parser", // typescriptパーサー "extends": [
        "@ecomfe/eslint-config", // ファクトリー EE-eslint ルール構成 "@ecomfe/eslint-config/react" を継承します
    ]、
    「プラグイン」: [
        "@typescript-eslint", // TypeScript 構文チェックをいくつか追加 "react", // React 構文チェック "react-hooks" // フック構文チェック],
    「ルール」: {
        「インデント」: [
            "エラー"、
            4、
            {
                「スイッチケース」: 1
            }
        ], // 4 グリッド スタイルを強制します "no-unused-vars": "off", // eslint no-unused-vars のデフォルト設定をオフにします "@typescript-eslint/no-unused-vars": [
            「警告」、
            {
                "変数": "すべて",
                "args": "使用後",
                "残りの兄弟を無視": false
            }
        ], // @typescript-eslint/no-unused-vars 設定を使用する "import/no-unresolved": "off",
        "react/jsx-uses-react": 2, // Shield "React" は定義されていますが、使用されていないエラー "import/order": "off", // 注文検証をインポートする必要はありません "comma-dangle": [
            "オフ"
        ], // 末尾に余分なカンマを入れないでください "@typescript-eslint/consistent-type-definitions": [
            "オフ"
        ], // 最初にオフにする "react-hooks/rules-of-hooks": "error", // フックルールをチェックする "react-hooks/exhaustive-deps": "warn", // エフェクトの依存関係をチェックする "max-params": [
            「警告」、
            8
        ], // メソッドには最大 8 つのパラメータがあります "no-use-before-define": "off",
        "@typescript-eslint/定義前に使用しない": [
            "エラー"、
            {
                「関数」:偽、
                「変数」: false
            }
        ], // 注意: メソッドと変数は使用後に定義できます。フックで頻繁に発生する循環依存関係の問題を解決するには、「react/jsx-no-bind」の危険性に注意してください: [
            「警告」、
            {
                "allowArrowFunctions": true // コードの読みやすさを向上させるために矢印関数を一時的に許可します}
        ]、
        「最大ネストコールバック数」: [
            「警告」、
            4
        ], // 最大ループ深度は 4 です。4 を超える深度が指定された場合は警告が表示されます "react/require-default-props": "off", // コンポーネントの必須でな​​いプロパティにはデフォルト値は必要ありません "react/no-find-dom-node": "off", // react-dom の findDOMNode メソッドの使用を一時的に許可します "@babel/object-curly-spacing": "off",
        「オブジェクト-カーリー-間隔」: [
            "オフ"、
            "いつも"、
            {
                "arraysInObjects": false
            }
        ], // オブジェクト括弧内にスペースを追加するかどうか "brace-style": [
            "オフ"、
            「大さじ1杯」
        ]、
        "react/no-string-refs": "warn", // 文字列型参照レポートの警告
        "到達不能ループなし": "オフ",
        "eol-last": ["error", "always"] // ファイルの最後に追加の空白行が必要です}
} 

ここに画像の説明を挿入

3. Eslint、Prettier Eslintプラグインをインストールする

ここに画像の説明を挿入
ここに画像の説明を挿入

4. そうでない場合は、Prettier ESlintに必要なパッケージがインストールされているかどうかを確認します。

ここに画像の説明を挿入

これで、React プロジェクトで Baidu スタイルの eslint を使用する方法に関するこの記事は終了です。React プロジェクトで eslint を使用する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Eslint コードチェックツールの使用と React プロジェクトにおける一般的な問題
  • create-react-appカスタムeslint構成の詳細な説明
  • React開発に必須のeslint設定の詳細な説明

<<:  Dockerイメージサイズを最適化する一般的な方法

>>:  各グループの最新データを取得するためにMySQLベースのグループを実装する

推薦する

3分でUbuntu 16.04を初期化し、Java、Maven、Docker環境をデプロイする

Fast-Linux プロジェクト アドレス: https://gitee.com/uitc/Fas...

Vueのフロントエンドとバックエンドのデータのやり取りと表示を理解する方法

目次1. 技術概要2. 技術的な詳細1. インターフェースからバックエンドデータを取得する2. フロ...

mysql 5.7.23 winx64 解凍バージョンのインストールチュートリアル

参考までに、mysql-5.7.23-winx64 解凍版の詳細なインストールチュートリアルです。具...

MySQLのストレージエンジンについてお話しましょう

基礎リレーショナル データベースでは、各データ テーブルはファイルに相当し、異なるストレージ エンジ...

Samba を使用して Linux サーバー上で共有ファイル サービスを構築する方法

最近、私たちの小さなチームは、サーバー上の共有フォルダーを共有して、全員がパブリックリソースドキュメ...

MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるようになりました (例)

MySQL 8.0.19 では、間違ったパスワードを 3 回入力するとアカウントがロックされるよう...

ReactHooks バッチ更新状態とルートパラメータの取得例の分析

目次1. 一括更新の方法コンソール出力2. フックがルーティングパラメータを取得する方法実行効果1....

HTML ページにミュージック ビデオを追加する例

1. ビデオタグFirefoxでは自動再生をサポートしますが、GoogleとIEではサポートしません...

Reactのようなフレームワークをゼロから作成する

最近、インターネットで「Build your own React」という記事を見ました。著者は、シン...

Nginx の構成と HTTP 実装コード分析との互換性

OpenSSL を使用して SSL キーと CSR ファイルを生成するHTTPS を設定するには、秘...

Vue の大容量ファイルアップロードとブレークポイント再開アップロードの実装

目次ファイルアップロードのための2つのソリューションファイルストリーム(フォームデータ)に基づくクラ...

v-html レンダリング コンポーネントの問題

以前 HTML を解析したことがあるので、今日は Vue ドラッグ アンド ドロップを使用して、Ku...

mysql MDLメタデータロックの詳細な分析

序文: MySQL で SQL 文を実行すると、予想した時間内に文が完了しません。このような場合、通...

MySQL の null 可能フィールドは NULL に設定する必要がありますか、それとも NOT NULL に設定する必要がありますか?

MySQL を頻繁に使用する人は、次のような状況に遭遇する可能性があります。 1. フィールド タ...

XshellがvirtualBox仮想マシンに接続できない問題の解決策

まず、VirtualBox仮想マシンのネットワーク設定モードについて説明します。NAT+ホストオンリ...