create-react-app 設定の eslint 手順の詳細な説明

今回は、create-react-appでeslintを設定する手順について詳しく説明します。create-react-appでeslintを設定する際の注意点は何ですか?実際のケースを見てみましょう。

eslint と editorconfig を使用してコードを標準化します

これらを使用する理由:

1. コード仕様はチームのコラボレーションに役立ちます

2. 純粋な手動仕様は時間と労力がかかり、正確性は保証できません

3. 編集者と連携できる Js lint ツールは自動的にエラーを通知し、開発効率を向上させます

eslint

ECMAScript のバージョンが常に更新されているため、Js lint ツールには豊富なプラグインがあり、仕様を適用できます。非常に豊富で、ほとんどのチームのニーズを満たすことができます。

eslint は git と連携します

全員の仕様を最大限に制御するために、git がコードをコミットするときに、非標準コードをウェアハウスに送信できないときに、git フックを使用して eslint を呼び出してコード仕様を検証できます。 。

editorconfig

異なるエディターではテキストの形式に特定の違いがあるため、いくつかの標準を統一しないと、他のユーザーと協力するときに他の人のコードを更新するたびに大量のエラーが発生する可能性があります - ウェブストームが自動的に実行されます。 editorconfig 設定ファイルをサポートします。

create-react-app はデフォルトですでにインストールされているため、最初に eslintnpm i eslint をインストールしますeslintnpm i eslint 因为create-react-app默认已经安装了

  "babel-eslint": "7.2.3",
  "eslint": "4.10.0",
  "eslint-config-react-app": "^2.1.0",
  "eslint-loader": "1.9.0",
  "eslint-plugin-flowtype": "2.39.1",
  "eslint-plugin-import": "2.8.0",
  "eslint-plugin-jsx-a11y": "5.1.1",
  "eslint-plugin-react": "7.4.0",

我们针对我们想要的自定义配置，我们再安装如下

npm i babel-eslint \
\ eslint-config-airbnb eslint-config-standard \
\ eslint-loader \
\ eslint-plugin-import \
\ eslint-plugin-jsx-a11y \
\ eslint-plugin-node \
\ eslint-plugin-promise \
\ eslint-plugin-react \
\ eslint-plugin-standard -D

我们在根目录下新建 .eslintrc 文件针对整个项目做一个标准的规范

{
 "extends": "standard"
}

主要项目是前端工程，所以我们在前端文件夹下新建 .eslintrc 文件，在这里去规范客户端代码，客户端代码使用 jsx，很多规则和 nodejs 是不同的，在这里使用更加严格的规范来要求客户端代码。

配置的value对应的值： 0 : off 1 : warning 2 : error

{
 "parser": "babel-eslint",
 "env": {
  "browser": true,
  "es6": true,
  "node": true
 },
 "parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module"
 },
 "extends": "airbnb",
 "rules": {
  "semi": [0],
  "react/jsx-filename-extension": [0],
  "jsx-a11y/anchor-is-valid": [0]
 }
}

使用 babel-eslint 去解析代码，定义环境是浏览器和es6，会包含公共变量，webpack所以需要node一些环境变量，parserOptions定义版本，jsmodule模式方法书写。

因为需要在每次编译之前都要去检查一下代码，所以还需要配置 webpack,这是create-react-app默认的

   {
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
     {
      options: {
       formatter: eslintFormatter,
       eslintPath: require.resolve('eslint'),
       
      },
      loader: require.resolve('eslint-loader'),
     },
    ],
    include: paths.appSrc,
   },

我们希望屏蔽掉 node_modules 文件夹下的代码

exclude:[path.resolve(__dirname, '../node_modules')]

在项目根目录下新建文件 .editorconfig webstom默认就有配置

1. root = true 项目根目录

2. [*] 所有文件都应用这个规则

3. charset = utf-8 编码模式

4. indent_style = space 使用 tab 的样式制表符和 space

5. indent_size = 2

6. end_of_line = lf 行尾结尾方式

7. insert_final_newline = true 自动保存行尾最后一行是空行

8. trim_trailing_whitespace = true 一行结束后面的空格自动去掉

eslint 不检测这行代码 // eslint-disable-line

eslint 不检测这个文件，在开头 /* eslint-disable */在文件结尾/* eslint-enable */

安装 npm i husky -D

"lint": "eslint --ext .js --ext .jsx src/",
"precommit": "npm run lint"

必要なカスタム構成については、次のようにインストールします

rrreee

ルート ディレクトリ .eslintrc ファイルはプロジェクト全体の標準仕様を作成します

rrreee

メイン プロジェクトはフロントエンド プロジェクトであるため、クライアント コードを標準化するためにフロントエンド フォルダーの下に新しい .eslintrc ファイルを作成します。 jsx を使用しており、多くのルールがあり、nodejs とは異なります。ここでは、クライアント コードを要求するためにより厳密な仕様が使用されています。

設定値に対応する値: 0: オフ 1: 警告 2: エラー

rrreee

babel-eslint を使用してコードを解析します。定義された環境はブラウザと es6 なので、Webpack にはいくつかのパブリック変数が必要です。ノード環境変数 ParserOptions はバージョンを定義し、jsmodule モードのメソッドが記述されます。

各コンパイル前にコードをチェックする必要があるため、create-react-app のデフォルトである webpack を設定する必要もありますrrreee
プロジェクトのルートにある node_modules フォルダー

rrreee

内のコードをブロックしたいと考えていますディレクトリに新しいファイルを作成します。 .editorconfig Webstom はデフォルトで設定されています

root = true プロジェクトのルート ディレクトリ 🎜🎜🎜🎜[*] このルールはすべてのファイルに適用されます 🎜🎜🎜🎜charset = utf-8 エンコード モード 🎜 🎜🎜🎜indent_style = space はタブスタイルのタブとスペースを使用します🎜🎜🎜🎜indent_size = 2🎜🎜🎜🎜end_of_line = lf 行終了メソッド🎜🎜🎜🎜insert_final_newline = true は行末の最後の行を空白として自動的に保存しますline🎜🎜🎜🎜trim_trailing_whitespace = true 行末の後のスペースは自動的に削除されます🎜🎜🎜🎜eslint はこのコード行を検出しません // eslint-disable-line🎜🎜eslint は検出しますこのファイルの先頭では検出されません /* eslint-disable */ ファイルの最後 /* eslint-enable */🎜🎜 npm i husky をインストールします-D🎜🎜その後、git を package.json スクリプトに追加します。フックは、git commit を実行する前にこのコマンドを呼び出します🎜rrreee🎜git commit を実行して、eslint に渡されたコードを強制的に実行します🎜🎜 を読んだ後、このメソッドをマスターしたと思います。この記事のケースについては、さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。 🎜🎜推奨読書: 🎜🎜🎜エントリーコンポーネントの使用方法🎜🎜🎜🎜🎜実際のプロジェクトでのインストールプラグインの使用方法🎜🎜🎜

以上がcreate-react-app 設定の eslint 手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。