フロントエンドプロジェクト（React）アクセスeslint静的コード検査といくつかの問題解決策

1つ、エスリント

eslintは、コードを標準化し、潜在的なバグを見つけるのに役立つフロントエンドのjs静的コード検査ツールです。

公式の指示：https：//eslint.org/

2、インストール

ノード環境がインストールされていることを確認します

1.依存関係パッケージeslintをインストールします

npm install eslint --save-dev

2.package.jsonファイルを設定します

"scripts":{
    ...
    "lint":"eslint src",
    "lint:create":"eslint --init"
}

3.eslintを初期化します

この例では、reactプロジェクトを例として取り上げ、プロンプトに従ってvueまたは他のプロジェクトを選択できます。

npm run lint:create

デフォルトの選択で問題ありません

作成後、.eslintrc.jsファイルがルートディレクトリに表示されます

.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
};

4.コードを確認します

npm run lint

2行目の5番目の文字、エラールールはno-unused-varsであり、変数は使用されていません
。3行目の13番目の文字、エラールールはno-undefであり、変数はeslintルールで定義されていません。
表。http：// eslintを参照してください。cn/ docs / rules /

3つ目は、発生した問題です。

1.小道具の検証に「xxx」がありません

小道具の検証に「xxx」がなく、コンポーネント変数に値が割り当てられていますが、使用されていません

解決する.eslintrc.jsファイルのルールで必要なルールを構成できます

 "rules": {
        "react/prop-types": 0 //防止在react组件定义中缺少props验证
    }

2.this.refsの使用は非推奨です

Using this.refs is deprecated
Using string literals in ref attributes is deprecated

解決策：
定義参照を変更し、ローカル
オリジナルの使用を変更します。

html:
<div ref="testDiv" />
js:
const div = this.refs.testDiv;

着替える：

html:
<div ref={(v) => { this.testDiv = v; }} />
js:
const div = this.testDiv;

その理由は、オフィシャルがrefの（推奨される）使用法を文字列によって呼び出されるように変更し、それをコールバック関数の形式に変更したためです。

3.その他のルール構成：

"rules": {
        "eqeqeq": 2, //必须使用 === 和 !==
        "no-empty-function": 2, //禁止空函数
        "no-multi-spaces": 2, //禁止使用多个空格
        "no-trailing-spaces": 2, //禁止禁用行尾空格
        "space-infix-ops": 2, // 要求操作符周围有空格
        "space-in-parens": 2, //强制在圆括号内使用一致的空格
        "no-var":2, //要求使用 let 或 const 而不是 var,
        "no-unused-vars": 2, //禁止出现未使用过的变量
        "react/prop-types": 0 //防止在react组件定义中缺少props验证
    }

この記事へのリンク：https：//blog.csdn.net/qq_39903567/article/details/115294455