ESLint 是一个非常受欢迎的 JavaScript 代码检查工具，它可以帮助开发人员在编写代码时自动检查代码错误和风格问题。随着前端技术的发展，越来越多的开发人员开始使用 React 来构建 Web 应用程序。在这些项目中，遵循一致的代码风格是非常重要的，因此 eslint-plugin-wix-style-react 这个包应运而生。
本篇文章将介绍如何使用 eslint-plugin-wix-style-react 在 React 项目中进行代码检查。
安装 eslint-plugin-wix-style-react
在项目目录下运行以下命令进行安装：
npm install --save-dev eslint eslint-plugin-wix-style-react
配置 .eslintrc 文件
在项目根目录下创建名为 .eslintrc 的文件，并添加如下内容：
{
"extends": [
"plugin:wix-style-react/recommended"
],
"plugins": [
"wix-style-react"
]
}上述配置指定了使用 eslint-plugin-wix-style-react 提供的规则集，同时也指定了使用名为 wix-style-react 的插件。
运行 ESLint
在项目目录下运行以下命令：
npx eslint .
这个命令会在项目目录下运行 ESLint，并检查所有 JavaScript 文件。你可以自行修改命令中的文件路径和参数以适应你自己的项目需求。
集成 ESLint 到代码编辑器
虽然可以在命令行中使用 ESLint 进行代码检查，但集成到代码编辑器中是更方便的选择，因为你可以实时地看到 ESLint 对你的代码进行的检查提示。
下面以 vscode 为例介绍如何配置：
安装 vscode 的 ESLint 插件。在 vscode 中按下
Ctrl+Shift+X打开扩展面板，搜索并安装名为ESLint的插件。在 vscode 设置中搜索
eslint.validate选项，选择Edit in settings.json，将下面的配置添加到 settings.json 文件中：
"eslint.validate": [
"javascript", "javascriptreact", "typescript", "typescriptreact"
]这个配置指定了使用 ESLint 插件进行代码检查的文件类型。
- 重启 vscode 后，就可以在代码编辑器中看到 ESLint 检查的提示了。
总结
使用 eslint-plugin-wix-style-react 可以帮助开发人员在 React 项目中维护一致的代码风格，并避免常见的代码错误。本篇文章介绍了如何安装和配置 eslint-plugin-wix-style-react，并将其集成到代码编辑器中。希望这篇文章对你有所帮助！
示例代码
对下面的代码进行检查：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
----- ----------- - -- -------- ---- -- -- -
------- ------------------
------
---------
--
--------------------- - -
-------- ---------------
----- ---------------------------
-
------ ------- ------------上述代码涉及到的问题有：
React没有被正确 importonClick的 propType 没有被正确地声明
在进行检查之前，需要做些配置。将 .eslintrc 文件修改为：
-- -------------------- ---- -------
-
---------------- -
-------------- --
------------- --------
--
------ -
---------- -----
------ -----
------- ----
--
---------- -
-------
--
---------- -
---------------------
--------------------------
--
-------- -
------------- -------
------------------- ------
-
-其中，"no-console": "warn" 的规则将在 console.log() 调用时发出警告，"react/prop-types": "warn" 规则将在 propType 没有正确声明时发出警告。
运行 eslint MyComponent.js，结果如下所示：
MyComponent.js 4:16 error 'React' must be in scope when using JSX react/react-in-jsx-scope 4:34 error 'onClick' is missing in props validation react/prop-types ✖ 2 problems (2 errors, 0 warnings)
ESLint 指出了错误，并列出了出错的地方。将 import React from 'react'; 添加到文件开头就解决了第一个问题，而将 onClick 添加到 propType 中就解决了第二个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f053dba403f2923b035bea7